fix: allow :where and :is in selectors when they only target & (#1702)

Co-authored-by: Adam Skoufis <[email protected]>

Author: bschlenk

.changeset/mighty-ravens-fail.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Allow `:where` and `:is` in `selectors` if all selectors target `&`
+
+EXAMPLE USAGE:
+

packages/css/src/validateSelector.test.ts

@@ -28,6 +28,16 @@ describe('validateSelector', () => {
       '.a:where(.b, .c) > .target',
       '.a:is(.b, .c) > .target',
       '.target, .foo .target',
+      ':where(.target)',
+      ':where(.target):hover',
+      ':is(.target)',
+      ':is(.target):hover',
+      '.a :where(.target)',
+      '.a > :is(.target)',
+      ':where(.target, .a.target)',
+      ':is(.target, .a.target)',
+      ':where(.target, .a .target)',
+      ':is(.target, .a .target)',
     ];
 
     validSelectors.forEach((selector) =>
@@ -51,6 +61,14 @@ describe('validateSelector', () => {
       '.target + .a',
       '.target ~ .a',
       '.target:where(:hover, :focus) .a',
+      ':where(.target) .a',
+      ':is(.target) > .a',
+      ':where(.target, .a)',
+      ':is(.target, .a)',
+      ':where(.target, .a, .target)',
+      ':is(.target, .a, .target)',
+      ':where(.target, .target > span)',
+      ':is(.target, .target > span)',
     ];
 
     invalidSelectors.forEach((selector) =>

packages/css/src/validateSelector.ts

@@ -7,6 +7,44 @@ function escapeRegex(string: string) {
   return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
 }
 
+type Selector = ReturnType<typeof parse>[number];
+
+function targetsClassName(tokens: Selector, targetClassName: string): boolean {
+  for (let i = tokens.length - 1; i >= 0; i--) {
+    const token = tokens[i];
+
+    if (
+      token.type === 'child' ||
+      token.type === 'parent' ||
+      token.type === 'sibling' ||
+      token.type === 'adjacent' ||
+      token.type === 'descendant'
+    ) {
+      return false;
+    }
+
+    if (
+      token.type === 'attribute' &&
+      token.name === 'class' &&
+      token.value === targetClassName
+    ) {
+      return true;
+    }
+
+    if (
+      token.type === 'pseudo' &&
+      Array.isArray(token.data) &&
+      (token.name === 'is' || token.name === 'where')
+    ) {
+      if (token.data.every((sub) => targetsClassName(sub, targetClassName))) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
 export const validateSelector = (
   selector: string,
   targetClassName: string,
@@ -28,46 +66,19 @@ export const validateSelector = (
   }
 
   selectorParts.forEach((tokens) => {
-    try {
-      for (let i = tokens.length - 1; i >= -1; i--) {
-        if (!tokens[i]) {
-          throw new Error();
-        }
-
-        const token = tokens[i];
-
-        if (
-          token.type === 'child' ||
-          token.type === 'parent' ||
-          token.type === 'sibling' ||
-          token.type === 'adjacent' ||
-          token.type === 'descendant'
-        ) {
-          throw new Error();
-        }
-
-        if (
-          token.type === 'attribute' &&
-          token.name === 'class' &&
-          token.value === targetClassName
-        ) {
-          return; // Found it
-        }
-      }
-    } catch (err) {
+    if (!targetsClassName(tokens, targetClassName)) {
       throw new Error(
         dedent`
         Invalid selector: ${replaceTarget()}
-    
+
         Style selectors must target the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}.
-        
+
         This is to ensure that each style block only affects the styling of a single class.
-        
+
         If your selector is targeting another class, you should move it to the style definition for that class, e.g. given we have styles for 'parent' and 'child' elements, instead of adding a selector of ${'`& ${child}`'}) to 'parent', you should add ${'`${parent} &`'} to 'child').
-        
+
         If your selector is targeting something global, use the 'globalStyle' function instead, e.g. if you wanted to write ${'`& h1`'}, you should instead write 'globalStyle(${'`${parent} h1`'}, { ... })'
       `,
-        { cause: err },
       );
     }
   });