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.
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.cssrules on elements (body, a, p...) will still apply on the page as elements never own a custom id.app.cssrules 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:globalmust be used on the whole file as part of the "init step" (is that correct?)local-classis used, the (local-)class selector is completly isolated (in the browser the rule for (local-)class selector inmy-component.csswon't have the same id as the corresponding selector inapp.css), so everything defined inapp.cssfor 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.