Allow camel-case CSS var names instead of converting to snake-case (#168)

Author: mattcompiles

.changeset/wet-eggs-rest.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Allow camel-case CSS var names instead of converting to snake-case

fixtures/themed/src/styles.css.ts

@@ -74,13 +74,13 @@ export const button = [
   shadow,
 ];
 
-const undefinedVar1 = createVar();
-const undefinedVar2 = createVar();
+const blankVar1 = createVar();
+const blankVar2 = createVar();
 
 export const opacity = styleVariants(
   {
-    '1/2': fallbackVar(undefinedVar1, '0.5'),
-    '1/4': fallbackVar(undefinedVar1, undefinedVar2, '0.25'),
+    '1/2': fallbackVar(blankVar1, '0.5'),
+    '1/4': fallbackVar(blankVar1, blankVar2, '0.25'),
   },
   (value) => ({
     selectors: { 'html &': { opacity: value } },

packages/css/src/vars.ts

@@ -23,13 +23,9 @@ export function createVar(debugId?: string): CSSVarFunction {
       ? `${debugId}__${fileScopeHash}${refCount}`
       : `${fileScopeHash}${refCount}`;
 
-  // Dashify CSS var names to replicate postcss-js behaviour
-  // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
   const cssVarName = cssesc(varName.match(/^[0-9]/) ? `_${varName}` : varName, {
     isIdentifier: true,
-  })
-    .replace(/([A-Z])/g, '-$1')
-    .toLowerCase();
+  });
 
   return `var(--${cssVarName})` as const;
 }