Global Styles in AEM Custom Common Component Library

[manasabojja7]

Hello,

I'm trying to look for a solution where we want to define CSS, and JS that's common across the app. Here's the architecture of our application.

We are a multi-tenant app and have different teams developing their own AEM apps but we have quite a few components that are common across the applications and we are building a common library of components that can be reused in tenant applications.

The way we have built the commons library is just using the below modules:

        <module>all</module>

        <module>core</module>

        <module>ui.apps</module>

        <module>ui.config</module>

        <module>it.tests</module>

Since we have multiple components to be developed in the commons library, we are in a situation where we need CSS variables, Mixins, etc to reuse. What's the best place/way to include these global/common styles for this library without needing to have a ui.frontend module?

Requesting help on this. Thanks in advance

[ManviSharma]

Hi,

To include global/common styles for a multi-tenant app with a common library of components, you can define CSS variables and mixins in a separate CSS file within the common library and reference it in the individual component CSS files. Alternatively, you can use a preprocessor like Sass or Less to define the variables and mixins in a single file and include it in the component stylesheets. This will allow for easy reuse of common styles across components.

[manasabojja7]

Hi @ManviSharma 

Thanks for the response. I was mostly trying to understand where exactly this separate CSS file is to be stored for it to be referred to in individual component files. Adding this to the clientlib-site seems to be working fine but the individual CSS files for components are forced to be moved to the clientlib-site folder otherwise tenant app is not able to apply styles.

Let's say we have A, B, and C components, and only B, and C are used in the tenant app; the approach mentioned above is causing it to load CSS for all components(A, B, C). The problem here is it loads all CSS files even though the component is not referenced. So trying to see if there's a better way to design the solution.

Thank you,

Manasa

[Sady_Rifat · Accepted solution]

Hello @manasabojja7 ,

You can use the most optimal solution for the common components, and add the clientlibs with HTL file. For example, you have a separator component and this component CSS will be common. 

Separator HTL:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
     categories=['apps.my-project.components.separator.v1.separator'], defer=true}">
  ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

<hr class="separator"/>

Check this documentation on how component clientlib can be added independently once at a time. https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/includin... 

You can also check the benefits of common clientlib and component-wise clientlib: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/clientlibs/m-p/586477 

Since the common components are very few you can use this approach.

However, if you have any restrictions to using this architecture, you can embed all the clientlibs under a common clientlib. Let's say site-common  location my-project/clientlibs/site-common

[BrianKasingli]

To reuse scss variables and javascript utils in your ui.frontend (if you have multiple repositories), I would create my own private npm modules. For CSS, reference to sass-loader | webpack, and for sharing JS utils, you can create a private npm modules to export JS for consumption of your ui.frontend npm project. It's a non-trivial process, but it can be done.

Also, take a look at CSS variables, Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN (mozilla.org)

[ShaileshBassi]

Hi @manasabojja7 As stated by the @ManviSharma you can use the Sass file.

structure path <project-name>/ui.frontend/src/main/webpack

Hope this helps!

Thanks