Feat: rules.with() API implement #234

Author: black7375

.changeset/eager-lemons-wink.md

@@ -0,0 +1,8 @@
+---
+"@mincho-js/css": minor
+---
+
+**css**
+
+## New
+- Add `rules.with()` API

packages/css/src/css/index.ts

@@ -134,8 +134,7 @@ function cssWith<const T extends CSSRule>(
   >(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;
   function cssWithMultiple<
     Data extends Record<string | number, RestrictedCSSRule>,
-    Key extends keyof Data,
-    MapData extends (value: Data[Key], key: Key) => ComplexCSSRule
+    MapData extends (value: Data[keyof Data], key: keyof Data) => ComplexCSSRule
   >(data: Data, mapData: MapData, debugId?: string): Record<keyof Data, string>;
   function cssWithMultiple<
     Data extends Record<string | number, RestrictedCSSRule>,

packages/css/src/rules/index.ts

@@ -9,6 +9,7 @@ import type {
 } from "@mincho-js/transform-to-vanilla";
 
 import { css } from "../css/index.js";
+import type { CSSRuleWith } from "../css/types.js";
 import { className, getDebugName, getVarName } from "../utils.js";
 import { createRuntimeFn } from "./createRuntimeFn.js";
 import type {
@@ -39,7 +40,8 @@ import {
 // == Rules ====================================================================
 export const rules = Object.assign(rulesImpl, {
   multiple: rulesMultiple,
-  raw: rulesRaw
+  raw: rulesRaw,
+  with: rulesWith
 });
 
 function rulesRaw<
@@ -50,6 +52,93 @@ function rulesRaw<
   return options;
 }
 
+function rulesWith<
+  const T extends CSSRule,
+  Variants extends VariantGroups | undefined = undefined,
+  ToggleVariants extends VariantDefinitions | undefined = undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
+>(
+  callback: (
+    style: CSSRuleWith<T>
+  ) => PatternOptions<Variants, ToggleVariants, Props>
+) {
+  type RestrictedCSSRule = CSSRuleWith<T>;
+  type RulePattern = PatternOptions<Variants, ToggleVariants, Props>;
+  type RuntimeFnType = RuntimeFn<
+    ConditionalVariants<Variants, ToggleVariants>,
+    Exclude<Props, undefined>
+  >;
+  type TransformRuleMap<T extends Record<string | number, RestrictedCSSRule>> =
+    {
+      [K in keyof T]: RuntimeFnType;
+    };
+
+  function rulesWithImpl(style: RestrictedCSSRule, debugId?: string) {
+    return rulesImpl(callback(style), debugId) as RuntimeFnType;
+  }
+  function rulesWithRaw(style: RestrictedCSSRule) {
+    return rulesRaw(callback(style)) as RulePattern;
+  }
+
+  function rulesWithMultiple<
+    RuleMap extends Record<string | number, RestrictedCSSRule>
+  >(ruleMap: RuleMap, debugId?: string): TransformRuleMap<RuleMap>;
+  function rulesWithMultiple<
+    Data extends Record<string | number, RestrictedCSSRule>,
+    MapData extends (
+      value: Data[keyof Data],
+      key: keyof Data
+    ) => PatternOptions<
+      VariantGroups | undefined,
+      VariantDefinitions | undefined,
+      ComplexPropDefinitions<PropTarget> | undefined
+    >
+  >(
+    data: Data,
+    mapData: MapData,
+    debugId?: string
+  ): TransformDataMapping<Data, MapData>;
+  function rulesWithMultiple<
+    Data extends Record<string | number, RestrictedCSSRule>,
+    MapData extends (
+      value: unknown,
+      key: string | number | symbol
+    ) => PatternOptions<
+      VariantGroups | undefined,
+      VariantDefinitions | undefined,
+      ComplexPropDefinitions<PropTarget> | undefined
+    >
+  >(
+    ruleMapOrData: Data,
+    mapDataOrDebugId?: MapData | string,
+    debugId?: string
+  ): TransformRuleMap<Data> | TransformDataMapping<Data, MapData> {
+    if (isMapDataFunction(mapDataOrDebugId)) {
+      const data = ruleMapOrData as Data;
+      const mapData = mapDataOrDebugId;
+      return rulesMultiple(
+        data,
+        (value: Parameters<typeof callback>[0], key: keyof Data) =>
+          mapData(callback(value) as Parameters<MapData>[0], key),
+        debugId
+      ) as TransformDataMapping<Data, MapData>;
+    } else {
+      const ruleMap = ruleMapOrData as Data;
+      const debugId = mapDataOrDebugId;
+      return rulesMultiple(
+        ruleMap,
+        callback as unknown as MapData,
+        debugId
+      ) as TransformRuleMap<Data>;
+    }
+  }
+
+  return Object.assign(rulesWithImpl, {
+    raw: rulesWithRaw,
+    multiple: rulesWithMultiple
+  });
+}
+
 // == Rules Impl ===============================================================
 const mergeObject = deepmerge();