Skip to content

Commit

Permalink
Fix psuedo element validator by updating css-what (#1106)
Browse files Browse the repository at this point in the history
  • Loading branch information
mattcompiles authored May 31, 2023
1 parent 48df15c commit 8b1c965
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 41 deletions.
5 changes: 5 additions & 0 deletions .changeset/loud-zoos-allow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@vanilla-extract/css': patch
---

Fix "Invalid selector" errors on pseudo-elements with params
2 changes: 1 addition & 1 deletion packages/css/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
"@vanilla-extract/private": "^1.0.3",
"ahocorasick": "1.0.2",
"chalk": "^4.1.1",
"css-what": "^5.0.1",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"csstype": "^3.0.7",
"deep-object-diff": "^1.1.9",
Expand Down
106 changes: 69 additions & 37 deletions packages/css/src/transformCss.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2154,44 +2154,76 @@ describe('transformCss', () => {
}
`);
});
});

it('should handle multiple references to the same locally scoped selector', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [style1, style2, '_1g1ptzo1', '_1g1ptzo10'],
cssObjs: [
{
type: 'local',
selector: style1,
rule: {
selectors: {
[`${style2} &:before, ${style2} &:after`]: {
background: 'black',
},
[`_1g1ptzo1_1g1ptzo10 ${style1}`]: {
background: 'blue',
},
[`_1g1ptzo10_1g1ptzo1 ${style1}`]: {
background: 'blue',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.skkcyc2 .skkcyc1:before, .skkcyc2 .skkcyc1:after {
background: black;
}
._1g1ptzo1._1g1ptzo10 .skkcyc1 {
background: blue;
}
._1g1ptzo10._1g1ptzo1 .skkcyc1 {
background: blue;
}
`);
it('should handle the pseudo-elements with params', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
selectors: {
'&::part(external-wrapper)': {
display: 'block',
},
'&::slotted(span)': {
display: 'block',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass::part(external-wrapper) {
display: block;
}
.testClass::slotted(span) {
display: block;
}
`);
});

it('should handle multiple references to the same locally scoped selector', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [style1, style2, '_1g1ptzo1', '_1g1ptzo10'],
cssObjs: [
{
type: 'local',
selector: style1,
rule: {
selectors: {
[`${style2} &:before, ${style2} &:after`]: {
background: 'black',
},
[`_1g1ptzo1_1g1ptzo10 ${style1}`]: {
background: 'blue',
},
[`_1g1ptzo10_1g1ptzo1 ${style1}`]: {
background: 'blue',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.skkcyc2 .skkcyc1:before, .skkcyc2 .skkcyc1:after {
background: black;
}
._1g1ptzo1._1g1ptzo10 .skkcyc1 {
background: blue;
}
._1g1ptzo10._1g1ptzo1 .skkcyc1 {
background: blue;
}
`);
});
});

endFileScope();
11 changes: 8 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 8b1c965

Please sign in to comment.