Make StealJS de-duplicate less imports

[matthewp]

This was discussed on a recent live stream (30:55) and a previous live stream (6:27).

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.

[nlundquist]

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]

Oh wow, I didn't know about this. @mjstahl did you?

[leoj3n]

Apparently, reference has been available since 2013-10-21... A useful feature for sure!

@nlundquist If you have general recommendations for styling components in a steal project, more in-depth details with examples would be great. Maybe a short forum post?

[jeroencornelissen]

Thanks for sharing @nlundquist !
And as @leoj3n commented, some in-depth insights might be useful! 👍