diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts index 6fcc13e57..fd887d309 100644 --- a/examples/next/components/HelloWorld.css.ts +++ b/examples/next/components/HelloWorld.css.ts @@ -1,4 +1,10 @@ -import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css'; +import { + style, + createVar, + keyframes, + getVarName, + fallbackVar, +} from '@vanilla-extract/css'; const color = createVar(); const angle = createVar({ @@ -21,14 +27,13 @@ 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`, - ':hover': { opacity: 0.8, color: color, }, - + vars: { [color]: '#fef', [angle]: fallbackVar(angle, '138deg'), - } + }, }); diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts index 541aea00b..1a99f945d 100644 --- a/packages/css/src/transformCss.ts +++ b/packages/css/src/transformCss.ts @@ -155,11 +155,11 @@ class Stylesheet { } if (root.type === 'property') { - this.propertyRules.push(root) + this.propertyRules.push(root); return; } - + if (root.type === 'keyframes') { root.rule = Object.fromEntries( Object.entries(root.rule).map(([keyframe, rule]) => { diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index a4f76767e..f89e4266b 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -106,7 +106,7 @@ export type CSSLayerDeclaration = { export type CSSPropertyBlock = { type: 'property'; name: string; - rule: AtRule.Property + rule: AtRule.Property; }; export type CSS = @@ -163,21 +163,21 @@ export type ClassNames = string | Array; export type ComplexStyleRule = StyleRule | Array; -export type PropertySyntax = - | '' - | '' - | '' - | '' - | '' - | '' - | '' - | '' - | '' - | '