Feat: Rules - Props type #131

packages/css/src/rules/index.ts

@@ -14,6 +14,8 @@ import type {
   VariantDefinitions,
   VariantSelection,
   VariantObjectSelection,
+  ComplexPropDefinitions,
+  PropTarget,
   ConditionalVariants,
   Serializable
 } from "./types";
@@ -27,9 +29,10 @@ const mergeObject = deepmerge();
 
 export function rules<
   Variants extends VariantGroups | undefined = undefined,
-  ToggleVariants extends VariantDefinitions | undefined = undefined
+  ToggleVariants extends VariantDefinitions | undefined = undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
 >(
-  options: PatternOptions<Variants, ToggleVariants>,
+  options: PatternOptions<Variants, ToggleVariants, Props>,
   debugId?: string
 ): RuntimeFn<ConditionalVariants<Variants, ToggleVariants>> {
   const {

packages/css/src/rules/types.ts

@@ -1,4 +1,9 @@
-import type { ComplexCSSRule, CSSRule } from "@mincho-js/transform-to-vanilla";
+import type {
+  ComplexCSSRule,
+  CSSRule,
+  ResolvedProperties,
+  NonNullableString
+} from "@mincho-js/transform-to-vanilla";
 
 type Resolve<T> = {
   [Key in keyof T]: T[Key];
@@ -10,6 +15,12 @@ export type RemoveUndefinedFromIntersection<T> = {
   [K in keyof T]: RemoveUndefined<T[K]>;
 }[keyof T];
 
+type UnionToIntersection<U> = (
+  U extends unknown ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
 type Primitive = string | number | boolean | null | undefined;
 export type Serializable =
   | {
@@ -51,6 +62,55 @@ export type VariantsClassNames<Variants extends VariantGroups> = {
   };
 };
 
+export type PropTarget = keyof ResolvedProperties;
+
+export type ComplexPropDefinitions<PropKeys extends PropTarget | undefined> =
+  | PropDefinition<PropKeys>
+  | Array<PropKeys | PropDefinition<PropKeys>>;
+type PropDefinition<PropKeys extends PropTarget | undefined> = {
+  [Key in NonNullableString | PropTarget]?: {
+    base?: ResolvedProperties[Exclude<PropKeys, undefined>];
+    targets: PropKeys[];
+  };
+};
+
+export type PropDefinitionOutput<
+  T extends ComplexPropDefinitions<PropTarget | undefined>
+> = UnionToIntersection<
+  T extends unknown[]
+    ? PropDefinitionOutputElement<T[number]>
+    : PropDefinitionOutputElement<T>
+>;
+type PropDefinitionOutputElement<DefinitionElement> =
+  DefinitionElement extends string
+    ? HandlePropTarget<DefinitionElement>
+    : DefinitionElement extends { [key: string]: unknown }
+      ? HandlePropDefinition<DefinitionElement>
+      : never;
+
+type HandlePropTarget<PropKeys extends string> = PropKeys extends PropTarget
+  ? { [Key in PropKeys]: ResolvedProperties[Key] }
+  : never;
+type HandlePropDefinition<PropObject extends { [key: string]: unknown }> =
+  UnionToIntersection<
+    {
+      [Key in keyof PropObject & string]: HandlePropDefinitionEntry<
+        Key,
+        PropObject[Key]
+      >;
+    }[keyof PropObject & string]
+  >;
+type HandlePropDefinitionEntry<
+  Key extends string,
+  PropValue
+> = PropValue extends {
+  targets: infer T;
+}
+  ? T extends unknown[]
+    ? { [P in Key]: ResolvedProperties[Extract<T[number], PropTarget>] }
+    : never
+  : never;
+
 export type PatternResult<Variants extends VariantGroups> = {
   defaultClassName: string;
   variantClassNames: VariantsClassNames<Variants>;
@@ -76,9 +136,11 @@ export type ConditionalVariants<
 
 export type PatternOptions<
   Variants extends VariantGroups | undefined,
-  ToggleVariants extends VariantDefinitions | undefined
+  ToggleVariants extends VariantDefinitions | undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined
 > = CSSRule & {
   base?: RecipeStyleRule;
+  props?: Props;
   toggles?: ToggleVariants;
   variants?: Variants;
   defaultVariants?: VariantSelection<
@@ -295,9 +357,10 @@ if (import.meta.vitest) {
   describe.concurrent("Types related to Rules", () => {
     function assertValidOptions<
       Variants extends VariantGroups | undefined = undefined,
-      ToggleVariants extends VariantDefinitions | undefined = undefined
-    >(options: PatternOptions<Variants, ToggleVariants>) {
-      assertType<PatternOptions<Variants, ToggleVariants>>(options);
+      ToggleVariants extends VariantDefinitions | undefined = undefined,
+      Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
+    >(options: PatternOptions<Variants, ToggleVariants, Props>) {
+      assertType<PatternOptions<Variants, ToggleVariants, Props>>(options);
       return options;
     }
 
@@ -537,6 +600,34 @@ if (import.meta.vitest) {
       });
     });
 
+    it("Props PatternOptions", () => {
+      // Property Array
+      assertValidOptions({
+        props: ["color", "background"]
+      });
+
+      // Property object
+      assertValidOptions({
+        props: {
+          size: { targets: ["padding", "margin"] }
+        }
+      });
+      assertValidOptions({
+        props: {
+          size: { base: "3px", targets: ["padding", "margin"] }
+        }
+      });
+
+      // Complex Props
+      assertValidOptions({
+        props: [
+          "color",
+          "background",
+          { size: { targets: ["padding", "margin"] } }
+        ]
+      });
+    });
+
     it("Complex Style PatternOptions", () => {
       assertValidOptions({
         backgroundColor: "gray",

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

@@ -5,3 +5,4 @@ export {
 } from "@/transform-object";
 export { replaceVariantReference } from "@/transform-object/variant-reference";
 export type * from "./types/style-rule";
+export type { NonNullableString } from "./types/string";

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

@@ -244,7 +244,8 @@ export interface AnonymousProperty {
 }
 export type AnonymousPropertyKey = keyof AnonymousProperty;
 
-interface ResolvedProperties extends Properties<number | NonNullableString> {}
+export interface ResolvedProperties
+  extends Properties<number | NonNullableString> {}
 
 type CSSKeyframeFromTo =
   | "from"