address feedback

examples/next/components/HelloWorld.css.ts

@@ -1,11 +1,34 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+
+const color = createVar();
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+});
+
+const angleKeyframes = keyframes({
+  '100%': {
+    [getVarName(angle)]: '360deg',
+  },
+});
 
 export const root = style({
   background: 'pink',
   color: 'blue',
   padding: '16px',
-  transition: 'opacity .1s ease', // Testing autoprefixer
+  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
+  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`,
+
+
   ':hover': {
     opacity: 0.8,
+    color: color,
   },
+
+  vars: {
+    [color]: '#fef',
+    [angle]: fallbackVar(angle, '138deg'),
+  }
 });

packages/css/src/index.ts

@@ -1,3 +1,5 @@
+export { getVarName } from '@vanilla-extract/private';
+
 import './runtimeAdapter';
 
 export type {
@@ -14,4 +16,3 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
-export * from './properties';

packages/css/src/vars.ts

@@ -1,3 +1,6 @@
+import type { AtRule } from 'csstype';
+
+
 import {
   get,
   walkObject,
@@ -9,20 +12,52 @@ import cssesc from 'cssesc';
 
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';
+import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
-
-export function createVar(debugId?: string): CSSVarFunction {
+import { PropertySyntax } from './types';
+import { appendCss } from './adapter';
+
+type VarDeclaration = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
+export function createVar(debugId?: string): CSSVarFunction
+export function createVar(debugIdOrDeclaration?: string | VarDeclaration, debugId?: string): CSSVarFunction {  
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId,
+      debugId: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
+  if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
+    appendCss({ type: 'property', name: `--${cssVarName}`, rule: buildPropertyRule(debugIdOrDeclaration) }, getFileScope());
+  }
+
   return `var(--${cssVarName})` as const;
 }
 
+export function createGlobalVar(name: string): CSSVarFunction
+export function createGlobalVar(name: string, declaration: VarDeclaration): CSSVarFunction
+export function createGlobalVar(name: string, declaration?: VarDeclaration): string {
+  if (declaration && typeof declaration === 'object') {
+    appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(declaration) }, getFileScope());
+  }
+
+
+  return `var(--${name})`;
+}
+
 export function assertVarName(value: unknown): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);

packages/dynamic/src/index.ts

@@ -1,2 +1,4 @@
+export { getVarName } from '@vanilla-extract/private';
+
 export { assignInlineVars } from './assignInlineVars';
 export { setElementVars } from './setElementVars';