Reduce CSS var and identifier lengths (#34)

Author: mattcompiles

.changeset/stale-scissors-beg.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Reduce CSS var and identifier lengths

packages/css/src/identifier.ts

@@ -15,7 +15,8 @@ function getShortFileName() {
 }
 
 export function generateIdentifier(debugId: string | undefined) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const { filePath, packageName } = getFileScope();
   const fileScopeHash = hash(
     packageName ? `${packageName}${filePath}` : filePath,

packages/css/src/vars.ts

@@ -15,7 +15,8 @@ type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<
 >;
 
 export function createVar(debugId?: string) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const { filePath, packageName } = getFileScope();
   const fileScopeHash = hash(
     packageName ? `${packageName}${filePath}` : filePath,