Skip to content

Commit

Permalink
Feat: Rules - Basic porting for CSS rules with vanilla extract recipe #…
Browse files Browse the repository at this point in the history
  • Loading branch information
black7375 committed Sep 2, 2024
1 parent 6728939 commit ef27468
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 12 deletions.
2 changes: 2 additions & 0 deletions packages/css/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export {
keyframes,
layer
} from "@vanilla-extract/css";
export { rules } from "./rules";
export type { RulesVariants, RecipeVariants, RuntimeFn } from "./rules/types";

export type { CSSProperties, ComplexCSSRule, GlobalCSSRule, CSSRule };
export type ComplexStyleRule = ComplexCSSRule;
Expand Down
14 changes: 6 additions & 8 deletions packages/css/src/rules/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { addFunctionSerializer } from "@vanilla-extract/css/functionSerializer";
import { style, styleVariants } from "@vanilla-extract/css";
import { css, cssVariants } from "../index";

import { createRuntimeFn } from "./createRuntimeFn";
import type {
Expand All @@ -11,9 +11,7 @@ import type {
} from "./types";
import { mapValues } from "./utils";

export type { RecipeVariants, RuntimeFn } from "./types";

export function recipe<Variants extends VariantGroups>(
export function rules<Variants extends VariantGroups>(
options: PatternOptions<Variants>,
debugId?: string
): RuntimeFn<Variants> {
Expand All @@ -27,16 +25,16 @@ export function recipe<Variants extends VariantGroups>(
let defaultClassName;

if (!base || typeof base === "string") {
const baseClassName = style({});
const baseClassName = css({});
defaultClassName = base ? `${baseClassName} ${base}` : baseClassName;
} else {
defaultClassName = style(base, debugId);
defaultClassName = css(base, debugId);
}

// @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(
cssVariants(
variantGroup,
(styleRule) =>
typeof styleRule === "string" ? [styleRule] : styleRule,
Expand All @@ -51,7 +49,7 @@ export function recipe<Variants extends VariantGroups>(
variants,
typeof theStyle === "string"
? theStyle
: style(theStyle, `${debugId}_compound_${compounds.length}`)
: css(theStyle, `${debugId}_compound_${compounds.length}`)
]);
}

Expand Down
10 changes: 6 additions & 4 deletions packages/css/src/rules/types.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { ComplexStyleRule } from "@vanilla-extract/css";
import type { ComplexCSSRule } from "@mincho-js/transform-to-vanilla";

type Resolve<T> = {
[Key in keyof T]: T[Key];
} & {};

type RecipeStyleRule = ComplexStyleRule | string;
type RecipeStyleRule = ComplexCSSRule | string;

export type VariantDefinitions = Record<string, RecipeStyleRule>;

Expand Down Expand Up @@ -54,6 +54,8 @@ export type RuntimeFn<Variants extends VariantGroups> = ((
classNames: RecipeClassNames<Variants>;
};

export type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> = Resolve<
Parameters<RecipeFn>[0]
export type RulesVariants<RuleFn extends RuntimeFn<VariantGroups>> = Resolve<
Parameters<RuleFn>[0]
>;
export type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> =
RulesVariants<RecipeFn>;

0 comments on commit ef27468

Please sign in to comment.