@mekari/pixel3-styled-system 0.0.1-alpha.0 → 0.0.2

package/types/jsx.d.ts

@@ -14,7 +14,7 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-export interface StyledComponent<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
+export interface PixelComponent<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
   JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
 > {}
 
@@ -30,12 +30,12 @@ export interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
 
-export type JsxElement<T extends ElementType, P> = T extends StyledComponent<infer A, infer B>
-  ? StyledComponent<A, Pretty<DistributiveUnion<P, B>>>
-  : StyledComponent<T, P>
+export type JsxElement<T extends ElementType, P> = T extends PixelComponent<infer A, infer B>
+  ? PixelComponent<A, Pretty<DistributiveUnion<P, B>>>
+  : PixelComponent<T, P>
 
 export interface JsxFactory {
-  <T extends ElementType>(component: T): StyledComponent<T, {}>
+  <T extends ElementType>(component: T): PixelComponent<T, {}>
   <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
@@ -44,11 +44,11 @@ export interface JsxFactory {
 }
 
 export type JsxElements = {
-  [K in IntrinsicElement]: StyledComponent<K, {}>
+  [K in IntrinsicElement]: PixelComponent<K, {}>
 }
 
-export type Styled = JsxFactory & JsxElements
+export type Pixel = JsxFactory & JsxElements
 
-export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLPixelProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
 
-export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never
+export type PixelVariantProps<T extends PixelComponent<any, any>> = T extends PixelComponent<any, infer Props> ? Props : never

package/types/prop-type.d.ts

@@ -209,7 +209,7 @@ interface PropertyValueTypes {
 	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
-	colorPalette: "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash";
+	colorPalette: "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAplpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash";
 	textStyle: "overline" | "body.sm" | "body.md" | "label.sm" | "label.md" | "h3" | "h2" | "h1";
 }
 
@@ -310,8 +310,18 @@ interface PropertyValueTypes {
 }
 
 
-export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-  ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
-  : T extends keyof CssProperties
-  ? ConditionalValue<CssProperties[T] | (string & {})>
-  : ConditionalValue<string | number>
+
+  type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+    ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
+    : never;
+
+  type CssPropertyValue<T extends string> = T extends keyof CssProperties
+    ? ConditionalValue<CssProperties[T] | (string & {})>
+    : never;
+
+  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+    ? PropertyTypeValue<T>
+    : T extends keyof CssProperties
+      ? CssPropertyValue<T>
+      : ConditionalValue<string | number>
+  

package/types/recipe.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import type {  RecipeRule  } from './static-css';
 import type {  SystemStyleObject, DistributiveOmit, Pretty  } from './system-types';
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
@@ -63,6 +64,10 @@ export interface RecipeDefinition<T extends RecipeVariantRecord> {
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
@@ -134,6 +139,10 @@ export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVari
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(

package/types/static-css.d.ts

@@ -0,0 +1,45 @@
+/* eslint-disable */
+interface WithConditions {
+  /**
+   * The css conditions to generate for the rule.
+   * @example ['hover', 'focus']
+   */
+  conditions?: string[]
+  responsive?: boolean
+}
+
+export interface CssRule extends WithConditions {
+  /**
+   * The css properties to generate utilities for.
+   * @example ['margin', 'padding']
+   */
+  properties: {
+    [property: string]: Array<string | number>
+  }
+}
+
+interface RecipeRuleVariants {
+  [variant: string]: boolean | string[]
+}
+
+export type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)
+export type PatternRule = '*' | CssRule
+
+export interface StaticCssOptions {
+  /**
+   * The css utility classes to generate.
+   */
+  css?: CssRule[]
+  /**
+   * The css recipes to generate.
+   */
+  recipes?: {
+    [recipe: string]: RecipeRule[]
+  }
+  /**
+   * The css patterns to generate.
+   */
+  patterns?: {
+    [pattern: string]: PatternRule[]
+  }
+}