Fix: CSS - Support for styles that return CSSRule #114

Author: black7375

packages/transform-to-vanilla/src/transform.ts

@@ -6,6 +6,7 @@ import {
 } from "./transform-object/index";
 import type { ComplexStyleRule, StyleRule } from "@vanilla-extract/css";
 import type {
+  CSSRule,
   ComplexCSSRule,
   ComplexCSSItem,
   ClassNames
@@ -19,15 +20,15 @@ export function transform(
   if (Array.isArray(style)) {
     const contexts: TransformContext[] = [];
     const results = style.map((eachStyle) => {
-      if (isClassNames(eachStyle)) {
-        return eachStyle;
-      }
-      if (typeof eachStyle === "function") {
-        return eachStyle();
+      const styleValue =
+        typeof eachStyle === "function" ? eachStyle() : eachStyle;
+
+      if (isClassNames(styleValue)) {
+        return styleValue;
       }
 
       const tempContext = structuredClone(context);
-      const result = transformStyle(eachStyle, tempContext);
+      const result = transformStyle(styleValue, tempContext);
       contexts.push(tempContext);
       return result;
     });
@@ -72,10 +73,16 @@ if (import.meta.vitest) {
     it("Functions", () => {
       const classNameFunctions = [
         () => "myClassName1",
-        (_arg: number) => "myClassName2"
+        (_arg: number) => "myClassName2",
+        (size = 10) =>
+          ({ padding: size, margin: size, border: "none" }) satisfies CSSRule
       ];
       const result = transform(classNameFunctions);
-      expect(result).toStrictEqual(["myClassName1", "myClassName2"]);
+      expect(result).toStrictEqual([
+        "myClassName1",
+        "myClassName2",
+        { padding: 10, margin: 10, border: "none" } satisfies CSSRule
+      ]);
     });
 
     it("Style", () => {

packages/transform-to-vanilla/src/types/style-rule.ts

@@ -28,7 +28,7 @@ export type ComplexCSSItem =
   | CSSRule
   | ClassNames
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  | ((...args: any[]) => ClassNames);
+  | ((...args: any[]) => ClassNames | CSSRule);
 
 export interface CSSRule
   extends CSSPropertiesWithConditions,
@@ -546,7 +546,8 @@ if (import.meta.vitest) {
       assertType<ComplexCSSRule>([
         () => "className1",
         (_arg: number) => "className2",
-        (_arg: CSSRule, _debugId: string) => "className3"
+        (_arg: CSSRule, _debugId: string) => "className3",
+        (_arg: CSSRule, _debugId: string) => ({ padding: 10 }) satisfies CSSRule
       ]);
     });
 
@@ -576,10 +577,8 @@ if (import.meta.vitest) {
         () => "className3",
         (_arg: number) => "className4",
         (_arg: CSSRule, _debugId: string) => "className5",
-        {
-          padding: 10,
-          marginTop: 25
-        },
+        (_arg: CSSRule, _debugId: string) =>
+          ({ padding: 10, marginTop: 25 }) satisfies CSSRule,
         {
           color: "red",
           _hover: {