add scope at-rule support#1720
Conversation
🦋 Changeset detectedLatest commit: eb1de2b The changes in this PR will be included in the next version bump. This PR includes changesets to release 11 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
I'm having some trouble running the e2e tests locally on my machine, and I'd really appreciate a bit of help if anyone has an idea what I might be missing. I'm on macOS, in case that makes a difference. |
They can be a bit temperamental. Usually running a |
I just tried running the e2e tests locally on The main issue I’m seeing locally is that the tests appear to be picking up development class names in a production context, for example What makes this harder to reason about is that CI is also failing, but with different errors: I really don't know what to do :/ |
|
@askoufis The e2e test issues were caused by parallelization. Since the tests write files, multiple workers were stepping on each other, and limiting the worker count to 1 fixed everything. I was then able to generate the correct snapshots/screenshots, and the tests are now passing: Thanks again for your help on Discord! |
|
@cahnory glad to see this PR. 👍 Does it support scope limit selectors |
Yes it does as the "query" part (what follows |
| RegExp('(?<=^(?:[^"\']*|"[^"]*"|\'[^\']*\')*)&', 'g'), | ||
| root.selector, | ||
| ), | ||
| )}`; |
There was a problem hiding this comment.
I'm a bit confused by this. What is this regex doing? Is there a reason why this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector)) wouldn't work here?
There was a problem hiding this comment.
The regex is there to avoid replacing & characters that appear inside quoted strings.
For example, if a selector contains something like [data-value="foo&bar"], a plain selector.replace(/&/g, root.selector) would also replace the & inside "foo&bar", which is not what we want.
I do see a fix to make though. It should probably use:
/(?<=^(?:[^"']*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')*)&/g
That way it only matches & outside quoted strings, while still handling escaped quotes correctly.
I should probably add a few tests for that as well.
| }; | ||
| } | ||
|
|
||
| if (condition['@scope']) { |
There was a problem hiding this comment.
Usage of this should be added to the sprinkles fixture.
There was a problem hiding this comment.
I’ve addressed your other requests locally. Since I’m not using sprinkles, this one will take me a bit more time—I’ll try to get it done quickly!
| '@scope': { | ||
| '(body)': { | ||
| ':after': { content: '"Scoped to body"' }, | ||
| }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Indentation seems inconsistent here.
| '@scope': { | |
| '(body)': { | |
| ':after': { content: '"Scoped to body"' }, | |
| }, | |
| }, | |
| }); | |
| '@scope': { | |
| '(body)': { | |
| ':after': { content: '"Scoped to body"' }, | |
| }, | |
| }, | |
| }); |
| `); | ||
| }); | ||
|
|
||
| it('should handle complexe @scope query', () => { |
There was a problem hiding this comment.
| it('should handle complexe @scope query', () => { | |
| it('should handle complex @scope query', () => { |
| '@vanilla-extract/css': minor | ||
| --- | ||
|
|
||
| `style`: Add support for `@scope` rules |
There was a problem hiding this comment.
globalStyle should also support @scope now too. Worth adding that to the changeset.
- fix changeset example indentation - add globalStyle example to changeset - fix typo in unit test title - better test for '&' replacement regex
3 participants
Add support for @scope rules