Refactor: restrict rules() to function-style compoundVariants #245

Author: Jeong-jj

.changeset/fresh-rice-sip.md

@@ -0,0 +1,7 @@
+---
+"@mincho-js/css": minor
+---
+
+**rules - compat**
+- Add `recipe` in the compat layer.
+- Separate `rules` implementation to `compat-impl.ts` to support compound object variants in `recipe`.

examples/react-babel/src/App.tsx

@@ -36,15 +36,15 @@ const Container = styled(BaseComponent, {
       },
     },
   },
-  compoundVariants: [
+  compoundVariants: ({ size, color }) => [
     {
-      variants: { size: "small", color: "blue" },
+      condition: [size.small, color.blue],
       style: {
         color: "green",
       },
     },
     {
-      variants: { size: "large", color: "blue" },
+      condition: [size.large, color.blue],
       style: {
         color: "yellow",
       },

packages/css/src/compat.ts

@@ -43,7 +43,10 @@ export type {
   ResolveComplex,
   PropDefinitionOutput
 } from "./rules/types.js";
-export { rules as recipe } from "./rules/index.js";
+
+// Import recipe from compat-impl (supports variants-style compoundVariants)
+export { recipe } from "./rules/compat-impl.js";
+export type { CompatPatternOptions } from "./rules/compat-impl.js";
 
 export type {
   CSSProperties,

packages/css/src/css/index.ts

@@ -153,6 +153,7 @@ function cssWith<const T extends CSSRule>(
   function cssWithMultiple<
     StyleMap extends Record<string | number, RestrictedCSSRule>
   >(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string> {
+    // TODO: Use css.with supported data mapping when available
     // Transform each value using cssFunction
     type TransformedStyleMap = Record<keyof StyleMap, ComplexCSSRule>;
     const transformedStyleMap: TransformedStyleMap = {} as TransformedStyleMap;