Fix psuedo element validator by updating css-what (#1106)

.changeset/loud-zoos-allow.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Fix "Invalid selector" errors on pseudo-elements with params

packages/css/package.json

@@ -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",

packages/css/src/transformCss.test.ts

@@ -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();