From 11d4fa73df45eb08c48cb7e9604ce06915dceb2d Mon Sep 17 00:00:00 2001 From: Yauheni Date: Wed, 31 May 2023 12:14:36 +0200 Subject: [PATCH] address feedback --- examples/next/components/HelloWorld.css.ts | 27 ++++++++++++- packages/css/src/index.ts | 3 +- packages/css/src/properties.ts | 46 ---------------------- packages/css/src/vars.ts | 41 +++++++++++++++++-- packages/dynamic/src/index.ts | 2 + 5 files changed, 67 insertions(+), 52 deletions(-) delete mode 100644 packages/css/src/properties.ts diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts index ec3a899ac..6fcc13e57 100644 --- a/examples/next/components/HelloWorld.css.ts +++ b/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: '', + 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'), + } }); diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index 824099e8b..dfb422ec1 100644 --- a/packages/css/src/index.ts +++ b/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'; diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts deleted file mode 100644 index 482648905..000000000 --- a/packages/css/src/properties.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { AtRule } from 'csstype'; - -import { appendCss } from './adapter'; -import { PropertySyntax } from './types'; -import { getFileScope } from './fileScope'; -import { generateIdentifier } from './identifier'; -import cssesc from 'cssesc'; -import {assertVarName} from './vars' - -type PropertyOptions = { - syntax: PropertySyntax | Array; - inherits: boolean; - initialValue?: string -}; - -const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({ - syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`, - inherits: inherits ? 'true' : 'false', - initialValue, -}) - -export function createProperty(options: PropertyOptions, debugId?: string): string { - const cssPropertyName = cssesc( - generateIdentifier({ - debugId, - debugFileName: false, - }), - { isIdentifier: true }, - ); - - appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope()); - - return `var(--${cssPropertyName})`; -} - -export function createGlobalProperty(name: string, options: PropertyOptions): string { - appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope()); - - return `var(--${name})`; -} - -export function property(varName: string): string { - assertVarName(varName); - - return varName.replace(/^var\((--.*)\)$/, '$1'); -} diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts index ad8f651ba..ae3b37b71 100644 --- a/packages/css/src/vars.ts +++ b/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; + 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}`); diff --git a/packages/dynamic/src/index.ts b/packages/dynamic/src/index.ts index 8540ac2d2..cc60fc185 100644 --- a/packages/dynamic/src/index.ts +++ b/packages/dynamic/src/index.ts @@ -1,2 +1,4 @@ +export { getVarName } from '@vanilla-extract/private'; + export { assignInlineVars } from './assignInlineVars'; export { setElementVars } from './setElementVars';