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.

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

Documenting migration from global app.css to css-modules #288

Open
BlueCutOfficial opened this issue Aug 4, 2022 · 0 comments
Open

Documenting migration from global app.css to css-modules #288

BlueCutOfficial opened this issue Aug 4, 2022 · 0 comments

Comments

@BlueCutOfficial
Copy link

BlueCutOfficial commented Aug 4, 2022

When I tried to play a bit with CSS modules for the first time in my life, I installed this addon on an existing Ember app and spent a quite hard time understanding how to apply the current global style on my page to start a step by step migration.

Although some information might look redundant at first look / Although this is more about general CSS, I believe the documentation of this addon would deserve a migration section to start with an existing app without breaking it. The interesting points I see:

  • app.css rules on elements (body, a, p...) will still apply on the page as elements never own a custom id.
  • app.css rules on class selectors will no longer apply on the page as class selectors are re-written with a custom id even if this is the mains css file and not a file added alongside a component or controller. So :global must be used on the whole file as part of the "init step" (is that correct?)
  • As soon as local-class is used, the (local-)class selector is completly isolated (in the browser the rule for (local-)class selector in my-component.css won't have the same id as the corresponding selector in app.css), so everything defined in app.css for this selector will no longer apply.
  • <div class="my-selector" local-class="my-selector"> does work to apply both global and local style.

The current README.md owns some content that tends to mean the above, though without a dedicated migration section, it is quite hard to gather everything and understand the meaning behind this information and that information in the different sections. As result, you can quickly get stuck with it by making different mistakes at the same time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant