Fix escaped characters in selectors (#146)

Author: markdalgleish

.changeset/fifty-emus-own.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Fix escaped characters in selectors

fixtures/themed/src/styles.css.ts

@@ -82,5 +82,7 @@ export const opacity = styleVariants(
     '1/2': fallbackVar(undefinedVar1, '0.5'),
     '1/4': fallbackVar(undefinedVar1, undefinedVar2, '0.25'),
   },
-  (value) => ({ opacity: value }),
+  (value) => ({
+    selectors: { 'html &': { opacity: value } },
+  }),
 );

packages/css/src/validateSelector.ts

@@ -23,16 +23,6 @@ export const validateSelector = (selector: string, targetClassName: string) => {
   };
 
   return selector.split(',').map((selectorPart) => {
-    if (selectorPart.indexOf(targetClassName) === -1) {
-      throw new Error(
-        dedent`
-          Invalid selector: ${replaceTarget()}
-      
-          Selectors must target the ampersand character ('&'), which refers to the generated class name, e.g. '&:nth-child(2n)'
-        `,
-      );
-    }
-
     let currentRule;
 
     try {
@@ -63,7 +53,7 @@ export const validateSelector = (selector: string, targetClassName: string) => {
         dedent`
           Invalid selector: ${replaceTarget()}
       
-          Style selectors must end with the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}.
+          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.
           

tests/E2E/__snapshots__/styles.test.ts.snap

@@ -92,12 +92,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles_slide__blj6yb1",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "red solid 5px",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",
@@ -538,12 +538,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles__jteyb11",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "5px solid red",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",
@@ -984,12 +984,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles__jteyb11",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "red solid 5px",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",
@@ -1430,12 +1430,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles_slide__blj6yb1",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "5px solid red",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",
@@ -1876,12 +1876,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles_slide__blj6yb1",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "5px solid red",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",
@@ -2322,12 +2322,12 @@ Object {
     "animation-fill-mode" => "none",
     "animation-play-state" => "running",
     "animation-name" => "styles__jteyb11",
-    "opacity" => "0.5",
     "border-radius" => "9999px",
     "border-top-left-radius" => "9999px",
     "border-top-right-radius" => "9999px",
     "border-bottom-right-radius" => "9999px",
     "border-bottom-left-radius" => "9999px",
+    "opacity" => "0.5",
     "outline" => "5px solid red",
     "outline-color" => "rgb(255, 0, 0)",
     "outline-style" => "solid",

tests/E2E/__snapshots__/stylesheets.test.ts.snap

@@ -79,11 +79,11 @@ exports[`Stylesheet sprinkles - webpack should create valid stylesheet 1`] = `
 `;
 
 exports[`Stylesheet themed - esbuild should create valid stylesheet 1`] = `
-":root,.themes__cvta170{--colors-background-color__cvta171: blue;--colors-text__cvta172: white;--space-1__cvta173: 4px;--space-2__cvta174: 8px;--space-3__cvta175: 12px}.themes__cvta176{--colors-background-color__cvta171: green;--colors-text__cvta172: white;--space-1__cvta173: 8px;--space-2__cvta174: 12px;--space-3__cvta175: 16px}.themes__cvta177{--colors-background-color__cvta171: pink;--colors-text__cvta172: purple;--space-1__cvta173: 6px;--space-2__cvta174: 12px;--space-3__cvta175: 18px}@media screen and (min-width: 768px){.themes__cvta177{--colors-background-color__cvta171: purple;--colors-text__cvta172: pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:\\"styles__jteyb10\\"}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{animation:3s infinite alternate styles__jteyb11 ease-in-out;font-family:\\"styles__jteyb10\\";background-color:var(--colors-background-color__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172)}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb13{font-family:MyGlobalComicSans;outline:5px solid red}.styles_1\\\\/2__jteyb16{opacity:var(--jteyb14, .5)}.styles_1\\\\/4__jteyb17{opacity:var(--jteyb14, var(--jteyb15, .25))}@media only screen and (min-width: 500px){.styles__jteyb12{border:1px solid var(--colors-background-color__cvta171)}.styles__jteyb13{border-radius:9999px}}
+":root,.themes__cvta170{--colors-background-color__cvta171: blue;--colors-text__cvta172: white;--space-1__cvta173: 4px;--space-2__cvta174: 8px;--space-3__cvta175: 12px}.themes__cvta176{--colors-background-color__cvta171: green;--colors-text__cvta172: white;--space-1__cvta173: 8px;--space-2__cvta174: 12px;--space-3__cvta175: 16px}.themes__cvta177{--colors-background-color__cvta171: pink;--colors-text__cvta172: purple;--space-1__cvta173: 6px;--space-2__cvta174: 12px;--space-3__cvta175: 18px}@media screen and (min-width: 768px){.themes__cvta177{--colors-background-color__cvta171: purple;--colors-text__cvta172: pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:\\"styles__jteyb10\\"}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{animation:3s infinite alternate styles__jteyb11 ease-in-out;font-family:\\"styles__jteyb10\\";background-color:var(--colors-background-color__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172)}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb13{font-family:MyGlobalComicSans;outline:5px solid red}html .styles_1\\\\/2__jteyb16{opacity:var(--jteyb14, .5)}html .styles_1\\\\/4__jteyb17{opacity:var(--jteyb14, var(--jteyb15, .25))}@media only screen and (min-width: 500px){.styles__jteyb12{border:1px solid var(--colors-background-color__cvta171)}.styles__jteyb13{border-radius:9999px}}
 "
 `;
 
-exports[`Stylesheet themed - vite should create valid stylesheet 1`] = `".themes__cvta170,:root{--colors-background-color__cvta171:blue;--colors-text__cvta172:white;--space-1__cvta173:4px;--space-2__cvta174:8px;--space-3__cvta175:12px}.themes__cvta176{--colors-background-color__cvta171:green;--colors-text__cvta172:white;--space-1__cvta173:8px;--space-2__cvta174:12px;--space-3__cvta175:16px}.themes__cvta177{--colors-background-color__cvta171:pink;--colors-text__cvta172:purple;--space-1__cvta173:6px;--space-2__cvta174:12px;--space-3__cvta175:18px}@media screen and (min-width:768px){.themes__cvta177{--colors-background-color__cvta171:purple;--colors-text__cvta172:pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:styles__jteyb10}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{animation:3s infinite alternate styles__jteyb11 ease-in-out;font-family:styles__jteyb10;background-color:var(--colors-background-color__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172)}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb13{font-family:MyGlobalComicSans;outline:5px solid red}.styles_1\\\\/2__jteyb16{opacity:var(--jteyb14,.5)}.styles_1\\\\/4__jteyb17{opacity:var(--jteyb14,var(--jteyb15,.25))}@media only screen and (min-width:500px){.styles__jteyb12{border:1px solid var(--colors-background-color__cvta171)}.styles__jteyb13{border-radius:9999px}}"`;
+exports[`Stylesheet themed - vite should create valid stylesheet 1`] = `".themes__cvta170,:root{--colors-background-color__cvta171:blue;--colors-text__cvta172:white;--space-1__cvta173:4px;--space-2__cvta174:8px;--space-3__cvta175:12px}.themes__cvta176{--colors-background-color__cvta171:green;--colors-text__cvta172:white;--space-1__cvta173:8px;--space-2__cvta174:12px;--space-3__cvta175:16px}.themes__cvta177{--colors-background-color__cvta171:pink;--colors-text__cvta172:purple;--space-1__cvta173:6px;--space-2__cvta174:12px;--space-3__cvta175:18px}@media screen and (min-width:768px){.themes__cvta177{--colors-background-color__cvta171:purple;--colors-text__cvta172:pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:styles__jteyb10}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{animation:3s infinite alternate styles__jteyb11 ease-in-out;font-family:styles__jteyb10;background-color:var(--colors-background-color__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172)}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb13{font-family:MyGlobalComicSans;outline:5px solid red}html .styles_1\\\\/2__jteyb16{opacity:var(--jteyb14,.5)}html .styles_1\\\\/4__jteyb17{opacity:var(--jteyb14,var(--jteyb15,.25))}@media only screen and (min-width:500px){.styles__jteyb12{border:1px solid var(--colors-background-color__cvta171)}.styles__jteyb13{border-radius:9999px}}"`;
 
 exports[`Stylesheet themed - webpack should create valid stylesheet 1`] = `
 ":root, .themes_theme__cdwe0v0 {
@@ -160,10 +160,10 @@ body {
   font-family: MyGlobalComicSans;
   outline: 5px solid red;
 }
-.styles_opacity_1\\\\/2__blj6yb6 {
+html .styles_opacity_1\\\\/2__blj6yb6 {
   opacity: var(--undefined-var1__blj6yb4, 0.5);
 }
-.styles_opacity_1\\\\/4__blj6yb7 {
+html .styles_opacity_1\\\\/4__blj6yb7 {
   opacity: var(--undefined-var1__blj6yb4, var(--undefined-var2__blj6yb5, 0.25));
 }
 @media only screen and (min-width: 500px) {