SCSS duplication: import-once doesn't work with JS imports of SCSS

[JohnWColby]

Detailed description

I've been struggling to prevent SCSS duplication within my application that uses carbon-components. After significant investigation, I found that the reason was related to JS importing SCSS files which seems to prevent the import-once mixin from being effective.

Our file system is partly to blame for the duplication issue, as we have a style sheet for each of our components, which gets imported by the JS for that component. In our application, the easiest way to avoid the majority of duplication problems has been to import specific SCSS files from carbon-components which only import variables and mixins into each style sheet. However, some of the style rules within carbon-components (particularly those that use the reset mixin) seem to still be duplicated.

It would be helpful if there was an example of how to structure an application to best avoid this CSS duplication problem when using carbon-components.

Steps to reproduce the issue

I've created a simple repo (based on carbon-components-react's version of create-react-app) that reproduces this behavior: https://github.com/ColbyJohnIBM/carbon-components-import-once-issue

To reproduce, clone the repo and run yarn build. You should see that the built CSS contains two copies of the carbon-components style rules.

[asudoh]

@ColbyJohnIBM Thank you for reporting the issue! Before we do some deep dive, does #702 sound something related?

[JohnWColby]

@asudoh, no, this has more to do with the way that JS imports of SCSS work generally, rather than a specific component. However, import-once does appear to work well if there are only SCSS imports of one another.

[joshblack]

It seems like there are likely two options here, namely make sure to only call external libraries once per bundle, or to leverage an additional tool that guarantees that modules are only included once.

https://github.com/at-import/node-sass-import-once seems like a good option, will try and see how feasible it'd be to make an example and include in in the React project.

Let me know if you have come across other potential solutions!

[joshblack]

Going to close this now due to inactivity, feel free to re-open if you feel like we should keep digging into this!