Placing Carbon styles in a CSS Cascade Layer

[folkforms]

Hi there,

I'm wondering is there a way to place the Carbon styles in a CSS Cascade Layer?

Problem statement would be: "As a developer, I want to control which CSS Cascade Layer the carbon styles are placed in, so that I can better structure the layering of my application styles."

In our case, we ship an on-prem application which customers build and deploy. We use webpack to bundle Carbon CSS and JS into a single JS file that is shipped with the application. Customers do not have access to the Carbon code and must use a standard CSS file for theming. It's worth noting that we are in the process of migrating our UI over to Carbon, but it's a big application and the migration is a multi-year project.

By placing all styles in layers we would make this theming a lot easier for them as their customer-styles layer (and/or their unlayered styles) will always win.

[adamalston]

Hi, this functionality doesn't appear to be supported at the moment. However, it might be possible to manually wrap the imported Carbon styles within an @layer declaration as part of your build process (e.g., using a custom Webpack loader or a post-processing step). One thing you would need to verify after making this change is that you don't disrupt the specificity and order that Carbon relies on.

[folkforms]

yep, custom webpack plugin to add @layer foo { at the start and } at the end of the output CSS file works well