Allow hyphens inside css classes (#1254)

Co-authored-by: Remus Mate <[email protected]>

Author: EvgenNoskov

.changeset/strong-ducks-dream.md

@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/css': patch
+'@vanilla-extract/esbuild-plugin': patch
+'@vanilla-extract/next-plugin': patch
+'@vanilla-extract/rollup-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Allow hyphens in class names when using a custom identifier

packages/css/src/identifier.test.ts

@@ -91,6 +91,15 @@ describe('identifier', () => {
       );
     });
 
+    it('should allow hyphens in a class name', () => {
+      expect(generateIdentifier('a-b')).toMatchInlineSnapshot(
+        `"abc_a-b_s0xkdr1_packagetest_file"`,
+      );
+      expect(generateIdentifier('a-b-c')).toMatchInlineSnapshot(
+        `"abc_a-b-c_s0xkdr2_packagetest_file"`,
+      );
+    });
+
     it('rejects invalid identifiers', () => {
       // getIdentOption() does not remove spaces from the debug info so the
       // resulting identifier should be invalid here.

packages/css/src/identifier.ts

@@ -75,7 +75,7 @@ export function generateIdentifier(
       packageName,
     });
 
-    if (!identifier.match(/^[A-Z_][0-9A-Z_]+$/i)) {
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
       throw new Error(
         `Identifier function returned invalid indentifier: "${identifier}"`,
       );

site/docs/integrations/webpack.md

@@ -94,7 +94,7 @@ Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc)
 - A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.
 
 ```ts
-VanillaExtractPlugin({
+new VanillaExtractPlugin({
   identifiers: ({ hash }) => `prefix_${hash}`
 });
 ```