Ensure identifiers are escaped properly (#504)

Author: mattcompiles

.changeset/flat-games-call.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Ensure identifiers are escaped properly

package.json

@@ -12,7 +12,6 @@
     "start": "pnpm start-fixture themed",
     "start-site": "manypkg run site start",
     "build-site": "manypkg run site build",
-    "postinstall": "pnpm dev",
     "test:jest": "jest",
     "test:playwright": "playwright test",
     "format": "prettier --write .",

packages/css/package.json

@@ -47,6 +47,7 @@
     "csstype": "^3.0.7",
     "deep-object-diff": "^1.1.0",
     "deepmerge": "^4.2.2",
+    "escape-string-regexp": "^4.0.0",
     "outdent": "^0.8.0"
   },
   "devDependencies": {

packages/css/src/transformCss.test.ts

@@ -11,7 +11,7 @@ describe('transformCss', () => {
     expect(
       transformCss({
         composedClassLists: [],
-        localClassNames: ['test_1/2_className'],
+        localClassNames: ['test_1/2_className', '[test_with_brackets]'],
         cssObjs: [
           {
             type: 'local',
@@ -28,12 +28,22 @@ describe('transformCss', () => {
               },
             },
           },
+          {
+            type: 'local',
+            selector: '[test_with_brackets]',
+            rule: {
+              color: 'blue',
+            },
+          },
         ],
       }).join('\n'),
     ).toMatchInlineSnapshot(`
       ".test_1\\\\/2_className {
         color: red;
       }
+      .\\\\[test_with_brackets\\\\] {
+        color: blue;
+      }
       @media screen and (min-width: 700px) {
         .test_1\\\\/2_className {
           color: green;

packages/css/src/transformCss.ts

@@ -1,5 +1,6 @@
 import { getVarName } from '@vanilla-extract/private';
 import cssesc from 'cssesc';
+import escapeStringRegexp from 'escape-string-regexp';
 
 import type {
   CSS,
@@ -105,7 +106,7 @@ class Stylesheet {
     this.keyframesRules = [];
     this.localClassNameRegex =
       localClassNames.length > 0
-        ? RegExp(`(${localClassNames.join('|')})`, 'g')
+        ? RegExp(`(${localClassNames.map(escapeStringRegexp).join('|')})`, 'g')
         : null;
 
     // Class list compositions should be priortized by Newer > Older