New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make StealJS de-duplicate less imports #72

Open
matthewp opened this Issue Jul 11, 2018 · 4 comments

Comments

Projects
None yet
4 participants
@matthewp
Copy link
Member

matthewp commented Jul 11, 2018

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.

@matthewp matthewp referenced this issue Jul 11, 2018

Closed

Steal should de-duplicate less imports. #1394

1 of 5 tasks complete

@chasenlehara chasenlehara changed the title Steal should de-duplicate less imports. Make StealJS de-duplicate less imports Nov 16, 2018

@nlundquist

This comment has been minimized.

Copy link
Contributor

nlundquist commented Nov 16, 2018

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

This comment has been minimized.

Copy link
Member

matthewp commented Nov 16, 2018

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

@leoj3n

This comment has been minimized.

Copy link
Contributor

leoj3n commented Nov 18, 2018

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

This comment has been minimized.

Copy link

jeroencornelissen commented Nov 29, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment