Ensure whitespace is stripped from debug Ids (#428)

Author: mattcompiles

.changeset/thick-tigers-roll.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Ensure whitespace is stripped from debug Ids

packages/css/src/identifier.test.ts

@@ -0,0 +1,28 @@
+import { setFileScope, endFileScope } from './fileScope';
+import { generateIdentifier } from './identifier';
+
+describe('identifier', () => {
+  beforeAll(() => {
+    setFileScope('test');
+  });
+
+  afterAll(() => {
+    endFileScope();
+  });
+
+  it(`should create a valid identifier`, () => {
+    expect(generateIdentifier(undefined)).toMatchInlineSnapshot(`"skkcyc0"`);
+  });
+
+  it('should create a valid identifier with a debug id', () => {
+    expect(generateIdentifier('debug')).toMatchInlineSnapshot(
+      `"debug__skkcyc1"`,
+    );
+  });
+
+  it('should create a valid identifier with a debug id with whitespace', () => {
+    expect(generateIdentifier('debug and more')).toMatchInlineSnapshot(
+      `"debug_and_more__skkcyc2"`,
+    );
+  });
+});

packages/css/src/identifier.ts

@@ -4,7 +4,7 @@ import { getIdentOption } from './adapter';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
 
 function getDevPrefix(debugId: string | undefined) {
-  const parts = debugId ? [debugId] : [];
+  const parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
   const { filePath } = getFileScope();
 
   const matches = filePath.match(