Protect unused CSS #13730
Description
Describe the problem
When content comes dynamically or from children, the component itsself is unaware of probably used css classes like in this example: https://discord.com/channels/457912077277855764/1297797158342496266/1297798324727840820
TLDR: markdown rendered and passed as {@html markdown}
At the moment we are forced to use :global in the selector to protect the classes from being removed because they are unused.
While this works, its semantically wrong and isnt intuitive.
Describe the proposed solution
Provide a different syntax to protect rules from being tree-shaked
Proposal Solution 1:
@no-shake {
.myUnusedClass {
font-weight: bold;
}
}Proposal Solution 2:
:no-shake .myUnusedClass {
}Second solution could support multiple classes/rules with nesting.
Importance
nice to have