nlundquist
commented
6 years ago I've been working around this issue in a recent project by importing my global styles into my components styles via a LESS reference import: http://lesscss.org/features/#import-atrules-feature-import-options . A reference import allows a component style sheet to use the variables & mixins of the global styles without printing the global styles in the output.
This allows multiple entry points into the styles without duplication of the global styles. There weren't any notable downsides I encountered.
matthewp
leoj3n
jeroencornelissen
Problem
[This was originally posted by @mjstahl in https://github.com/stealjs/steal/issues/1394]
Our less plugin for steal uses the less engine to compile less to css. The problem occurs when you mix global styles with component-specific or modlet styles that import that global style.
When importing the same less file (like a global style) in multiple component less files, the rules of the global file are duplicated. I imagine this is due to steal and the less engine treating each less file in isolation.
The resolution for this is to have a global style sheet that imports all other style sheets. This creates a single entry point for the steal/less to create CSS sans any duplication. The problem with /this/ fix is that it breaks the idea of isolated self-contained modlets/components. The other problem with this approach is probably bundle sizes as we are including more styles than required.
Proposed Solution
For each bundle (including the main bundle), create a special in-memory less module. For each less module that is imported in the tree, recompile the special module appending the imported module.
Technical hurdles
Knowing what tree a particular module belongs to is a little bit tricky. Some code exists within done-ssr that attempts to do something similar, so we should reuse that if it will be helpful. This might necessitate a new feature in steal first.