Fix: CSS Rules - Lint and type at recipe #94

https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/css/src/recipe.ts

packages/css/src/rules/createRuntimeFn.ts

@@ -3,14 +3,14 @@ import type {
   RecipeClassNames,
   RuntimeFn,
   VariantGroups,
-  VariantSelection,
-} from './types';
-import { mapValues } from './utils';
+  VariantSelection
+} from "./types";
+import { mapValues } from "./utils";
 
 const shouldApplyCompound = <Variants extends VariantGroups>(
   compoundCheck: VariantSelection<Variants>,
   selections: VariantSelection<Variants>,
-  defaultVariants: VariantSelection<Variants>,
+  defaultVariants: VariantSelection<Variants>
 ) => {
   for (const key of Object.keys(compoundCheck)) {
     if (compoundCheck[key] !== (selections[key] ?? defaultVariants[key])) {
@@ -22,14 +22,14 @@ const shouldApplyCompound = <Variants extends VariantGroups>(
 };
 
 export const createRuntimeFn = <Variants extends VariantGroups>(
-  config: PatternResult<Variants>,
+  config: PatternResult<Variants>
 ): RuntimeFn<Variants> => {
   const runtimeFn: RuntimeFn<Variants> = (options) => {
     let className = config.defaultClassName;
 
     const selections: VariantSelection<Variants> = {
       ...config.defaultVariants,
-      ...options,
+      ...options
     };
     for (const variantName in selections) {
       const variantSelection =
@@ -38,17 +38,18 @@ export const createRuntimeFn = <Variants extends VariantGroups>(
       if (variantSelection != null) {
         let selection = variantSelection;
 
-        if (typeof selection === 'boolean') {
-          // @ts-expect-error
-          selection = selection === true ? 'true' : 'false';
+        if (typeof selection === "boolean") {
+          // @ts-expect-error - Needed to convert boolean to string
+          selection = selection === true ? "true" : "false";
         }
 
         const selectionClassName =
-          // @ts-expect-error
-          config.variantClassNames[variantName][selection];
+          config.variantClassNames[variantName]?.[
+            selection as keyof (typeof config.variantClassNames)[typeof variantName]
+          ];
 
         if (selectionClassName) {
-          className += ' ' + selectionClassName;
+          className += " " + selectionClassName;
         }
       }
     }
@@ -57,7 +58,7 @@ export const createRuntimeFn = <Variants extends VariantGroups>(
       if (
         shouldApplyCompound(compoundCheck, selections, config.defaultVariants)
       ) {
-        className += ' ' + compoundClassName;
+        className += " " + compoundClassName;
       }
     }
 
@@ -68,14 +69,14 @@ export const createRuntimeFn = <Variants extends VariantGroups>(
 
   runtimeFn.classNames = {
     get base() {
-      return config.defaultClassName.split(' ')[0];
+      return config.defaultClassName.split(" ")[0];
     },
 
     get variants() {
       return mapValues(config.variantClassNames, (classNames) =>
-        mapValues(classNames, (className) => className.split(' ')[0]),
-      ) as RecipeClassNames<Variants>['variants'];
-    },
+        mapValues(classNames, (className) => className.split(" ")[0])
+      ) as RecipeClassNames<Variants>["variants"];
+    }
   };
 
   return runtimeFn;

packages/css/src/rules/index.ts

@@ -1,71 +1,71 @@
-import { addRecipe } from '@vanilla-extract/css/recipe';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { addFunctionSerializer } from "@vanilla-extract/css/functionSerializer";
+import { style, styleVariants } from "@vanilla-extract/css";
 
-import { createRuntimeFn } from './createRuntimeFn';
+import { createRuntimeFn } from "./createRuntimeFn";
 import type {
   PatternOptions,
   PatternResult,
   RuntimeFn,
   VariantGroups,
-  VariantSelection,
-} from './types';
-import { mapValues } from './utils';
+  VariantSelection
+} from "./types";
+import { mapValues } from "./utils";
 
-export type { RecipeVariants, RuntimeFn } from './types';
+export type { RecipeVariants, RuntimeFn } from "./types";
 
 export function recipe<Variants extends VariantGroups>(
   options: PatternOptions<Variants>,
-  debugId?: string,
+  debugId?: string
 ): RuntimeFn<Variants> {
   const {
     variants = {},
     defaultVariants = {},
     compoundVariants = [],
-    base,
+    base
   } = options;
 
   let defaultClassName;
 
-  if (!base || typeof base === 'string') {
+  if (!base || typeof base === "string") {
     const baseClassName = style({});
     defaultClassName = base ? `${baseClassName} ${base}` : baseClassName;
   } else {
     defaultClassName = style(base, debugId);
   }
 
-  // @ts-expect-error
-  const variantClassNames: PatternResult<Variants>['variantClassNames'] =
+  // @ts-expect-error - Temporarily ignoring the error as the PatternResult type is not fully defined
+  const variantClassNames: PatternResult<Variants>["variantClassNames"] =
     mapValues(variants, (variantGroup, variantGroupName) =>
       styleVariants(
         variantGroup,
         (styleRule) =>
-          typeof styleRule === 'string' ? [styleRule] : styleRule,
-        debugId ? `${debugId}_${variantGroupName}` : variantGroupName,
-      ),
+          typeof styleRule === "string" ? [styleRule] : styleRule,
+        debugId ? `${debugId}_${variantGroupName}` : variantGroupName
+      )
     );
 
   const compounds: Array<[VariantSelection<Variants>, string]> = [];
 
   for (const { style: theStyle, variants } of compoundVariants) {
     compounds.push([
       variants,
-      typeof theStyle === 'string'
+      typeof theStyle === "string"
         ? theStyle
-        : style(theStyle, `${debugId}_compound_${compounds.length}`),
+        : style(theStyle, `${debugId}_compound_${compounds.length}`)
     ]);
   }
 
   const config: PatternResult<Variants> = {
     defaultClassName,
     variantClassNames,
     defaultVariants,
-    compoundVariants: compounds,
+    compoundVariants: compounds
   };
 
-  return addRecipe(createRuntimeFn(config), {
-    importPath: '@vanilla-extract/recipes/createRuntimeFn',
-    importName: 'createRuntimeFn',
-    // @ts-expect-error
-    args: [config],
+  return addFunctionSerializer(createRuntimeFn(config), {
+    importPath: "@vanilla-extract/recipes/createRuntimeFn",
+    importName: "createRuntimeFn",
+    // @ts-expect-error - Mismatch between return type of createRuntimeFn and argument type of addFunctionSerializer
+    args: [config]
   });
 }

packages/css/src/rules/types.ts

@@ -1,4 +1,4 @@
-import type { ComplexStyleRule } from '@vanilla-extract/css';
+import type { ComplexStyleRule } from "@vanilla-extract/css";
 
 type Resolve<T> = {
   [Key in keyof T]: T[Key];
@@ -8,7 +8,7 @@ type RecipeStyleRule = ComplexStyleRule | string;
 
 export type VariantDefinitions = Record<string, RecipeStyleRule>;
 
-type BooleanMap<T> = T extends 'true' | 'false' ? boolean : T;
+type BooleanMap<T> = T extends "true" | "false" ? boolean : T;
 
 export type VariantGroups = Record<string, VariantDefinitions>;
 export type VariantSelection<Variants extends VariantGroups> = {
@@ -48,7 +48,7 @@ export type RecipeClassNames<Variants extends VariantGroups> = {
 };
 
 export type RuntimeFn<Variants extends VariantGroups> = ((
-  options?: Resolve<VariantSelection<Variants>>,
+  options?: Resolve<VariantSelection<Variants>>
 ) => string) & {
   variants: () => (keyof Variants)[];
   classNames: RecipeClassNames<Variants>;

packages/css/src/rules/utils.ts

@@ -1,8 +1,8 @@
-export function mapValues<Input extends Record<string, any>, OutputValue>(
+export function mapValues<Input extends Record<string, unknown>, OutputValue>(
   input: Input,
-  fn: (value: Input[keyof Input], key: keyof Input) => OutputValue,
+  fn: (value: Input[keyof Input], key: keyof Input) => OutputValue
 ): Record<keyof Input, OutputValue> {
-  const result: any = {};
+  const result = {} as Record<keyof Input, OutputValue>;
 
   for (const key in input) {
     result[key] = fn(input[key], key);