Debug id for custom identifiers

.changeset/stupid-planes-raise.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/integration': minor
+'@vanilla-extract-private/tests': minor
+---
+
+Added debugId to custom identifiers

packages/integration/src/transform.ts

@@ -23,7 +23,7 @@ export const transformSync = ({
 }: TransformParams): string => {
   let code = source;
 
-  if (identOption === 'debug') {
+  if (identOption !== 'short') {
     const result = babel.transformSync(source, {
       filename: filePath,
       cwd: rootPath,
@@ -57,7 +57,7 @@ export const transform = async ({
 }: TransformParams): Promise<string> => {
   let code = source;
 
-  if (identOption === 'debug') {
+  if (identOption !== 'short') {
     const result = await babel.transformAsync(source, {
       filename: filePath,
       cwd: rootPath,

tests/compiler/compiler.vitest.test.ts

@@ -17,7 +17,7 @@ function getLocalFiles(files: Set<string>) {
 
 describe('compiler', () => {
   let compilers: Record<
-    'default' | 'cssImportSpecifier' | 'shortIdentifiers',
+    'default' | 'cssImportSpecifier' | 'shortIdentifiers' | 'debugIdentifiers' | 'customIdentifiers',
     ReturnType<typeof createCompiler>
   >;
 
@@ -36,6 +36,16 @@ describe('compiler', () => {
         root: __dirname,
         identifiers: 'short',
       }),
+
+      debugIdentifiers: createCompiler({
+        root: __dirname,
+        identifiers: 'debug',
+      }),
+
+      customIdentifiers: createCompiler({
+        root: __dirname,
+        identifiers: ({ debugId, hash }) => `${debugId}__${hash}`,
+      }),
     };
   });
 
@@ -220,6 +230,48 @@ describe('compiler', () => {
     `);
   });
 
+  test('debug identifiers', async () => {
+    const compiler = compilers.debugIdentifiers;
+
+    const cssPath = path.join(
+      __dirname,
+      'fixtures/class-composition/styles.css.ts',
+    );
+    const output = await compiler.processVanillaFile(cssPath);
+    expect(output.source).toMatchInlineSnapshot(`
+      "import 'fixtures/class-composition/shared.css.ts.vanilla.css';
+      import 'fixtures/class-composition/styles.css.ts.vanilla.css';
+      export var className = 'styles_className__q7x3ow0 shared_shared__16bmd920';"
+    `);
+    const { css } = await compiler.getCssForFile(cssPath);
+    expect(css).toMatchInlineSnapshot(`
+      ".styles_className__q7x3ow0 {
+        color: red;
+      }"
+    `);
+  });
+
+  test('custom identifiers', async () => {
+    const compiler = compilers.customIdentifiers;
+
+    const cssPath = path.join(
+      __dirname,
+      'fixtures/class-composition/styles.css.ts',
+    );
+    const output = await compiler.processVanillaFile(cssPath);
+    expect(output.source).toMatchInlineSnapshot(`
+      "import 'fixtures/class-composition/shared.css.ts.vanilla.css';
+      import 'fixtures/class-composition/styles.css.ts.vanilla.css';
+      export var className = 'className__q7x3ow0 shared__16bmd920';"
+    `);
+    const { css } = await compiler.getCssForFile(cssPath);
+    expect(css).toMatchInlineSnapshot(`
+      ".className__q7x3ow0 {
+        color: red;
+      }"
+    `);
+  });
+
   test('custom cssImportSpecifier', async () => {
     const compiler = compilers.cssImportSpecifier;