fix(compiler): scope nested CSS rules#50693
Conversation
There was a problem hiding this comment.
I don't know the context of this assertion, however this is actually invalid syntax (note the mismatching quotes). I had to update the test, because after my changes, invalid syntax would prevent styles from being encapsulated correctly.
There was a problem hiding this comment.
The context behind the isBlock flag is that as the way the parser is set up right now, it doesn't distinguish between something like color: red as a CSS property and color:red as a selector. Until now it wasn't a problem since we didn't scope anything inside of other rules (except for @media, @container etc).
|
@crisbeto this change looks reasonable to me. As discussed yesterday, we should run TGP on it. I also wonder if you want to have another pair of eyes on this PR, from someone more familiar with the CSS syntax / this parser bit. |
|
The TGP showed one legit failure in a file with a bunch of base64-encoded images. I'll have to investigate deeper. |
[Browsers now support nesting CSS rules](https://developer.chrome.com/articles/css-nesting/) however our emulated encapsulation wasn't processing rules nested inside of other rules, except for at-rules. These changes update the encapsulation logic to process rules inside of other rules. I also had to fix a couple of additional bugs where we didn't handle the ampersand symbol in a selector correctly and we weren't skipping style blocks inside of strings.
c7164a9 to
1deec7d
Compare
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Browsers now support nesting CSS rules however our emulated encapsulation wasn't processing rules nested inside of other rules, except for at-rules.
These changes update the encapsulation logic to process rules inside of other rules. I also had to fix a couple of additional bugs where we didn't handle the ampersand symbol in a selector correctly and we weren't skipping style blocks inside of strings.