You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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?)local-class
is used, the (local-)class selector is completly isolated (in the browser the rule for (local-)class selector inmy-component.css
won't have the same id as the corresponding selector inapp.css
), so everything defined inapp.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.
The text was updated successfully, but these errors were encountered: