vanilla-extract-css · z4o4z · May 16, 2023 · May 31, 2023 · May 16, 2023 · May 31, 2023
diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
@@ -1,4 +1,4 @@
-import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';
 
 const color = createVar();
 const angle = createVar({
@@ -9,7 +9,9 @@ const angle = createVar({
 
 const angleKeyframes = keyframes({
   '100%': {
-    [getVarName(angle)]: '360deg',
+    vars: {
+      [angle]: '360deg',
+    }
   },
 });
 

diff --git a/fixtures/themed/src/styles.css.ts b/fixtures/themed/src/styles.css.ts
@@ -67,7 +67,6 @@ globalStyle(`body ${iDunno}:after`, {
 const blankVar1 = createVar({
   syntax: '<number>',
   inherits: false,
-  initialValue: '0',
 });
 const blankVar2 = createVar();
 

diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
@@ -1,5 +1,3 @@
-export { getVarName } from '@vanilla-extract/private';
-
 import './runtimeAdapter';
 
 export type {

diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
@@ -163,7 +163,7 @@ class Stylesheet {
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
-          return [keyframe, this.transformProperties(rule)];
+          return [keyframe, this.transformVars(this.transformProperties(rule))];
         }),
       );
       this.keyframesRules.push(root);

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
@@ -23,7 +23,7 @@ export type CSSProperties = {
 };
 
 export interface CSSKeyframes {
-  [time: string]: CSSProperties;
+  [time: string]: CSSPropertiesWithVars;
 }
 
 export type CSSPropertiesWithVars = CSSProperties & {

diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
@@ -25,7 +25,7 @@ type VarDeclaration = {
 const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
   syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
   inherits: inherits ? 'true' : 'false',
-  initialValue,
+  ...(initialValue != null && { initialValue }),
 })
 
 export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction

diff --git a/packages/dynamic/src/index.ts b/packages/dynamic/src/index.ts
@@ -1,4 +1,2 @@
-export { getVarName } from '@vanilla-extract/private';
-
 export { assignInlineVars } from './assignInlineVars';
 export { setElementVars } from './setElementVars';
diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
@@ -15,7 +15,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -27,7 +27,6 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -199,7 +198,7 @@ export { shadow };
     "src/styles.css.js",
     "import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
 import './../assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
-import './../assets/src/styles.css.ts.vanilla-BFtGQ1T7.css';
+import './../assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
 
 var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12";
 var container = "styles_container__jteyb11";
@@ -390,7 +389,6 @@ export { button, container, opacity };
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -521,7 +519,7 @@ exports[`rollup-plugin should build with sourcemaps 1`] = `
     "",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "",
   ],
   [
@@ -586,7 +584,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -598,7 +596,6 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -678,7 +675,7 @@ html .styles_opacity_1\\/4__jteyb17 {
     "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
 import './assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
 import './assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
-import './assets/src/styles.css.ts.vanilla-BFtGQ1T7.css';
+import './assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
 
 var altTheme = "themes_altTheme__cvta176";
 var responsiveTheme = "themes_responsiveTheme__cvta177";

diff --git a/site/docs/api/create-var.md b/site/docs/api/create-var.md
@@ -137,34 +137,6 @@ export const pink = style({
     [accentVar]: 'pink'
   }
 });
-``` 
-
-The main benefit of using `createVar` to create typed css properties is that they can be animated via `keyframes`.
-
-```ts compiled
-const angle = createVar({
-  syntax: '<angle>',
-  inherits: false,
-  initialValue: '0deg',
-});
-
-const angleKeyframes = keyframes({
-  '0%': {
-    [getVarName(angle)]: '0deg',
-  },
-  '100%': {
-    [getVarName(angle)]: '360deg',
-  },
-});
-
-export const root = style({
-  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
-  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
-
-  vars: {
-    // This will fallback to 180deg if the @property is not supported by the browser
-    [angle]: fallbackVar(angle, '180deg'),
-  }
-});
+```
 
-```
+The main benefit of using `createVar` to create typed css properties is that they can be [animated via keyframes](/documentation/api/keyframes#animating-variables).
diff --git a/site/docs/api/keyframes.md b/site/docs/api/keyframes.md
@@ -27,3 +27,38 @@ export const spinAgain = style({
   animation: `${rotate} 3s`
 });
 ```
+
+## Animating variables
+
+It is also possible to animate [typed CSS property](/documentation/api/create-var#css-property) using keyframes:
+
+```ts compiled
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg'
+});
+
+const angleKeyframes = keyframes({
+  '0%': {
+    vars: {
+      [angle]: '0deg'
+    }
+  },
+  '100%': {
+    vars: {
+      [angle]: '360deg'
+    }
+  }
+});
+
+export const root = style({
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+
+  vars: {
+    // This will fallback to 180deg if the @property is not supported by the browser
+    [angle]: fallbackVar(angle, '180deg')
+  }
+});
+```
diff --git a/site/docs/global-api/create-global-var.md b/site/docs/global-api/create-global-var.md
@@ -0,0 +1,27 @@
+---
+title: createGlobalVar
+parent: global-api
+---
+
+# createGlobalVar
+
+Similar to `createVar`, `createGlobalVar` creates a single global CSS Variable reference.
+
+```ts compiled
+// vars.css.ts
+
+import {
+  createGlobalVar,
+  style
+} from '@vanilla-extract/css';
+
+const opacityVar = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5'
+});
+
+export const content = style({
+  opacity: opacityVar
+});
+```
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__blj6yb1 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+}
 .blj6yb1 {
   display: flex;
   flex-direction: column;

diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;