fix formatting

vanilla-extract-css · Nov 8, 2023 · d94dd88 · d94dd88
1 parent 6b153ae
commit d94dd88
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
 
-export type PropertySyntax = 
-    | '<length>'
-    | '<number>' 
-    | '<percentage>' 
-    | '<length-percentage>' 
-    | '<color>' 
-    | '<image>' 
-    | '<url>' 
-    | '<integer>' 
-    | '<angle>' 
-    | '<time>' 
-    | '<resolution>' 
-    | '<transform-function>' 
-    | '<custom-ident>' 
-    | '<transform-list>' 
-    | '*'
-    // needs this to make TS suggestions work
-    | (string & Record<never, never>);
+export type PropertySyntax =
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>'
+  | '*'
+  // needs this to make TS suggestions work
+  | (string & Record<never, never>);
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
@@ -1,6 +1,5 @@
 import type { AtRule } from 'csstype';
 
-
 import {
   get,
   walkObject,
@@ -20,45 +19,79 @@ import { appendCss } from './adapter';
 type VarDeclaration = {
   syntax: PropertySyntax | Array<PropertySyntax>;
   inherits: boolean;
-  initialValue?: string
+  initialValue?: string;
 };
 
-const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+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 {  
+});
+
+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: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : 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());
+    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 {
+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());
+    appendCss(
+      {
+        type: 'property',
+        name: `--${name}`,
+        rule: buildPropertyRule(declaration),
+      },
+      getFileScope(),
+    );
   }
 
-
   return `var(--${name})`;
 }
 
-export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+export function assertVarName(
+  value: unknown,
+): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);
   }
@@ -73,7 +106,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      assertVarName(value)
+      assertVarName(value);
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }