Micro Frontends — How to Encapsulate Your Styles Between Projects

Magali Blandin and Joy Caroni collaborating to create one piece of art. source

I am planning to write Micro Frontends — How to … series to share our experiences with micro frontends, problems we encountered and how we try to solve them.

Since there are a lot of resource on everywhere about what micro frontends is, I will not mention it.

We implemented a custom client-side architecture to serve our applications. If you need server-side solution, I encourage you to check our puzzle-js library.

There is a container application that serves front-end applications by domain

TX stands for Trendyol Experience. We put common experience applications such as Customer Experience, Fraud Experience, Seller Experience and others together under the TX. Thus, agents who need to use more than one of these applications will no longer need to switch between different applications. This will save the agents considerable time. Although it is a wide-ranging application, we have formed autonomous teams, each of which has independent development, test and deployment processes and has relatively less responsibility.

When we render sx-ui project, its CSS will be injected to the document. Let’s say we have a class named .title and contains following CSS.

sx-ui’s CSS

Then we change our route to cx-ui. What if it has a same class name?

cx-ui’s CSS

The CSS that injected to the document lastly will always override other ones and we get a result we don’t want. For the above example, if we go back to the sx-ui route, we will see the text with the .title class as blue and 20px instead of seeing it in red.

There are a lot of approaches to write maintainable CSS;

• First option may be defining a naming convention. This requires developers to be careful. But you know we are talking about humans.
• Second may be to use CSS modules.
• Another one may be using SASS.
• Another one may be using a CSS-in-JS library.

Actually it is not important which one we use if we can provide independent environment to developers that they can write class names without thinking to break styling.

Solution

Our solution is writing entire CSS under a container class by project.

sx-ui’s CSS with a container class

cx-ui’s CSS with a container class

By doing this, we can avoid overriding styles between projects. But this as well requires developer to be careful. Of course, we do not want to leave this to the developer’s discretion. So we decided to go with automated solution to implement this approach.

We used a post CSS plugin named postcss-prefixwrap to add acontainer class to our CSS classes.

Because of we used cra to create our react SPA, we are using react-app-rewired to override webpack config. Here is config-overrides file content by project:

So after compilation, we will ensure that our styles are wrapped with the class name we specified. e.g. PrefixWrap(".sx-ui") or PrefixWrap(".cx-ui")

We have experienced this solution for at least a year. There was no complain, problem or bug we encountered because of overriden styles since we applied it. So we are very happy with the result.

You may be using another frontend technology or another bundler but I wanted to share our perspective on solving this issue with you. You can easily apply it to your development stack.

Please leave a comment about what you think.

Thank you for reading.