Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Rethink steal-css' purpose #16

Open
matthewp opened this issue Aug 2, 2016 · 3 comments
Open

Rethink steal-css' purpose #16

matthewp opened this issue Aug 2, 2016 · 3 comments

Comments

@matthewp
Copy link
Member

matthewp commented Aug 2, 2016 •
edited
Loading

This is meant to document recent discussions on the expectations for what steal-css gives you. ccing possibly interested parties; @mjstahl @kylegifford @pYr0x @justinbmeyer @ccummings @James0x57

What steal-css is today

For the sake of clarity this is what steal-css does for you today:

  1. Allows you to import css from JavaScript. This css is injected into the <head> of your document.
  2. Rewrites @import statements to be relative to the css file.
  3. Rewrites url() expressions to be relative to the css file.
  4. Supports the use of the locate scheme.

That's it.

Problems / expectations

  • The introduction of locate scheme changed expectations for what steal-css provides, it does not provide modularity to your CSS dependency tree. @import still behaves the same as if you used it within a <link> or <style> tag. This makes it somewhat of an anti-feature if used in a project with more than 1 CSS dependency tree (virtually all Steal projects).

Possible Solutions

  • Define a meta-language on top of CSS that makes the CSS dependency graph part of the Steal dependency graph. ie; create a better @import for CSS.
  • Provide hooks that existing compile-to-CSS languages can use to integrate with this. Lots of hand-waving as I don't know what this would entail; but in the case of less you can't simply ignore subsequent imports. It would be nice of steal-css could account for that some how.
@matthewp matthewp mentioned this issue Sep 6, 2016
Closed
@matthewp
Copy link
Member Author

Does anyone remember what problems multiple @import of the same CSS file presents? I want to revisit this issue soon but want a better understanding of the problem area.

@JaneOri
Copy link

JaneOri commented Feb 16, 2017 •
edited by justinbmeyer
Loading

Just as an easy to test scenario:

  1. Module A imports basestyle.css body .title { background: tan; }
  2. Module A imports its own less/css module-a .title { background: red; }
    .title in Module A are red
  3. Module B imports basestyle.css body .title { background: tan; }
    .title in Module A are tan

There may be more complex examples but I think that captures it.

@matthewp
Copy link
Member Author

Thanks, that's a great example.

@matthewp matthewp mentioned this issue Feb 17, 2017
Closed
@JaneOri JaneOri mentioned this issue Jun 1, 2018
Closed
5 tasks
@matthewp matthewp mentioned this issue Jul 11, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@matthewp @JaneOri