change primitive api and fix types

packages/brandeur-plugin-debug/index.d.ts

@@ -0,0 +1,17 @@
+declare module 'brandeur-plugin-debug' {
+  import { Style } from 'brandeur'
+
+  type Config = {
+    enabled?: boolean
+    position?: 1 | 2 | 3 | 4
+    color?: string
+    debugWith?: 'border' | 'background'
+    borderSize?: number
+    showText?: boolean
+    styles?: Style
+  }
+  export default function debug(
+    autoActive?: boolean,
+    config?: Config
+  ): (style: Style) => Style
+}

packages/brandeur-plugin-enforce-longhand/index.d.ts

@@ -1,10 +1,7 @@
 declare module 'brandeur-plugin-enforce-longhand' {
   import { Style } from 'brandeur'
 
-  type Config = {
-    borderMode: 'none' | 'directional' | 'longhand'
-  }
   export default function enforceLonghand(
-    config?: Config
+    borderMode?: 'none' | 'directional' | 'longhand'
   ): (style: Style) => Style
 }

packages/brandeur-plugin-sort-property/index.d.ts

@@ -1,11 +1,11 @@
 declare module 'brandeur-plugin-sort-property' {
   import { Style } from 'brandeur'
 
-  type Config = {
+  type PropertyPriority = {
     [Property in keyof Style]: number
   }
 
   export default function enforceLonghand(
-    config?: Config
+    propertyPriority?: PropertyPriority
   ): (style: Style) => Style
 }

packages/brandeur-primitives/index.d.ts

@@ -1,10 +1,9 @@
 declare module 'brandeur-primitives' {
-  import { Config, Style, Rules, PluginProperties, Properties } from 'brandeur'
+  import { Style } from 'brandeur'
   import {
     ComponentProps,
-    ComponentPropsWithRef,
-    PropsWithChildren,
     ComponentType,
+    ComponentPropsWithRef,
     ElementType,
     RefAttributes,
     JSX,
@@ -14,60 +13,29 @@ declare module 'brandeur-primitives' {
     ? Omit<T, E>
     : never
 
-  type Options<Hooks extends string, Theme, Plugins> = Config<
-    Hooks,
-    Theme,
-    Plugins
-  > & {
-    baselineGrid?: number
-  }
-
-  type ElProps<E, Hooks, Theme, Plugins = []> = {
-    style?: Rules<Theme, Properties<Hooks, Plugins>>
+  type ElProps<E, Style> = {
+    style?: Style
     as?: E | undefined
   } & DistributiveOmit<
     ComponentPropsWithRef<ElementType extends E ? 'div' : E>,
     'as' | 'style'
   > &
     RefAttributes<any>
 
-  export function createSystem<Hooks extends string, Theme = {}, Plugins = []>(
-    config: Options<Hooks, Theme, Plugins>
-  ): {
+  type Options<T> = {
+    css: T
+    baselineGrid?: number
+  }
+
+  export function createSystem<T>(config: Options<T>): {
     El: <E extends ElementType>(
-      props: ElProps<E, Hooks, Theme, Plugins>
+      props: ElProps<E, Parameters<T>[0]>
     ) => JSX.Element
     styleSheet: string
-    baselineGrid: number
-    plugins: Plugins
-    theme: Theme
-    hooks: Hooks
-  }
-
-  type System<Hooks extends string, Theme, Plugins = []> = ReturnType<
-    typeof createSystem<Hooks, Theme, Plugins>
-  >
-
-  type UnionToIntersection<T> = (
-    T extends any ? (x: T) => any : never
-  ) extends (x: infer R) => any
-    ? R
-    : never
-
-  type MergeProperties<T, U> = {
-    [K in keyof T | keyof U]: K extends keyof T
-      ? K extends keyof U
-        ? T[K] | U[K]
-        : T[K]
-      : K extends keyof U
-        ? U[K]
-        : never
+    css: T
   }
 
-  type Props<T = []> = MergeProperties<
-    Style,
-    UnionToIntersection<PluginProperties<T[number]>>
-  >
+  type SystemStyle<T> = ComponentProps<T['El']>['style']
 
   type BoxProps<T> = {
     bg?: T['backgroundColor']
@@ -116,45 +84,37 @@ declare module 'brandeur-primitives' {
     marginBottom?: T['marginBottom']
     marginLeft?: T['marginLeft']
   }
-
-  export function createBox<Hooks extends string, Theme = {}, Plugins = []>(
-    system: System<Hooks, Theme, Plugins>
+  export function createBox<S = Style, System>(
+    system: System
   ): <E extends ElementType>(
-    props: ElProps<E, Hooks, Theme, Plugins> & BoxProps<Props<Plugins>>
+    props: ElProps<E, SystemStyle<System>> & BoxProps<S>
   ) => JSX.Element
 
   type GridProps<T> = {
     columns?: T['gridTemplateColumns']
     gap?: T['gap']
     areas?: T['gridTemplateAreas']
   }
-  export function createGrid<Hooks extends string, Theme = {}, Plugins = []>(
-    system: System<Hooks, Theme, Plugins>
+  export function createGrid<S = Style, System>(
+    system: System
   ): <E extends ElementType>(
-    props: ElProps<E, Hooks, Theme, Plugins> & GridProps<Props<Plugins>>
+    props: ElProps<E, SystemStyle<System>> & GridProps<S>
   ) => JSX.Element
 
   type ClickButtonProps = {
     disabled?: HTMLButtonElement['disabled']
     type?: HTMLButtonElement['type']
   }
-
   type ClickLinkProps<T extends ElementType> = {
     action: ComponentProps<T>['href']
     target?: HTMLAnchorElement['target']
   }
   type ClickProps<T extends ElementType> = ClickButtonProps | ClickLinkProps<T>
-
-  export function createClick<
-    Hooks extends string,
-    Theme = {},
-    Plugins = [],
-    T extends ElementType = 'a',
-  >(
-    system: System<Hooks, Theme, Plugins>,
-    linkComponent?: T
+  export function createClick<System, L extends ElementType = 'a'>(
+    system: System,
+    linkComponent?: L
   ): <E extends ElementType>(
-    props: ElProps<E, Hooks, Theme, Plugins> & ClickProps<T>
+    props: ElProps<E, SystemStyle<System>> & ClickProps<L>
   ) => JSX.Element
 
   type OverlayProps<T> = {
@@ -166,16 +126,15 @@ declare module 'brandeur-primitives' {
     left?: T['left']
     inset?: T['inset']
   }
-  export function createOverlay<Hooks extends string, Theme = {}, Plugins = []>(
-    system: System<Hooks, Theme, Plugins>
+  export function createOverlay<S = Style, System>(
+    system: System
   ): <E extends ElementType>(
-    props: ElProps<E, Hooks, Theme, Plugins> & OverlayProps<Props<Plugins>>
+    props: ElProps<E, SystemStyle<System>> & OverlayProps<S>
   ) => JSX.Element
 
   type Typography = {
     [variant: string]: Style
   }
-
   type TextProps<T, Typography> = {
     variant?: keyof Typography
     color?: T['color']
@@ -185,30 +144,23 @@ declare module 'brandeur-primitives' {
     size?: T['fontSize']
     height?: T['lineHeight']
   }
-
-  export function createText<
-    Typography,
-    Hooks extends string,
-    Theme = {},
-    Plugins = [],
-  >(
-    system: System<Hooks, Theme, Plugins>,
+  export function createText<S = Style, System, Typography>(
+    system: System,
     typography: Typography
   ): <E extends ElementType>(
-    props: ElProps<E, Hooks, Theme, Plugins> &
-      TextProps<Props<Plugins>, Typography>
+    props: ElProps<E, SystemStyle<System>> & TextProps<S, Typography>
   ) => JSX.Element
 
   type SpacerProps<T> = {
     size: T['width']
   }
-  export function createSpacer<Hooks extends string, Theme = {}, Plugins = []>(
-    system: System<Hooks, Theme, Plugins>
-  ): ComponentType<SpacerProps<Props<Plugins>>>
+  export function createSpacer<S = Style, System>(
+    system: System
+  ): <E extends ElementType>(
+    props: ElProps<E, SystemStyle<System>> & SpacerProps<S>
+  ) => JSX.Element
 
-  export function createVisuallyHidden<
-    Hooks extends string,
-    Theme = {},
-    Plugins = [],
-  >(system: System<Hooks, Theme, Plugins>): ComponentType<PropsWithChildren>
+  export function createVisuallyHidden<System>(
+    system: System
+  ): ComponentType<PropsWithChildren>
 }

packages/brandeur-primitives/src/createSystem.js

@@ -2,32 +2,12 @@ import { createHooks } from 'brandeur'
 
 import createEl from './components/createEl.js'
 
-export default function createSystem({
-  hooks,
-  config,
-  theme,
-  keyframes,
-  fallbacks,
-  plugins = [],
-  baselineGrid = 1,
-} = {}) {
-  const [styleSheet, css] = createHooks({
-    hooks,
-    config,
-    theme,
-    keyframes,
-    fallbacks,
-    plugins,
-  })
-
+export default function createSystem({ css, baselineGrid = 1 } = {}) {
   const El = createEl(css)
 
   return {
     El,
     baselineGrid,
-    styleSheet,
-    hooks,
-    plugins,
-    theme,
+    css,
   }
 }

packages/brandeur/index.d.ts

@@ -4,9 +4,6 @@ declare module 'brandeur' {
   import { WithHooks } from '@css-hooks/core'
 
   export type Style = CSSProperties
-  export type PluginProperties<T> = T extends (_: infer Arg) => unknown
-    ? Arg
-    : Style
 
   export type Fallback = {
     property: string | Array<string>
@@ -18,18 +15,17 @@ declare module 'brandeur' {
     typeof createBaseHooks<Hooks>
   >[0]
 
-  export type Config<Hooks extends string, Theme, Plugins> = {
+  type Plugin<T = any> = (style: T) => T
+
+  export type Config<Hooks extends string, Theme> = {
     hooks: HookOptions<Hooks>
     config?: Object
     theme?: Theme
-    plugins?: Plugins
+    plugins?: Array<Plugin>
     fallbacks?: Array<Fallback>
   }
 
-  export type Properties<Hooks, Plugins = []> = WithHooks<
-    Hooks,
-    Style | PluginProperties<Plugins[number]>
-  >
+  export type Properties<Hooks, Style> = WithHooks<Hooks, Style>
 
   export type Rule<Theme, Props> = (theme: Theme) => Props
   export type Rules<Theme, Props> =
@@ -38,14 +34,24 @@ declare module 'brandeur' {
     | Rule<Theme, Props>
     | Array<Rules<Theme, Props>>
 
-  type CSSFunction<Theme, Props> = (
-    properties_0: Rules<Theme, Props>,
-    ...properties_1: (Rules<Theme, Props> | undefined)[]
+  type CSSFunction<Theme, Hooks, Style> = (
+    properties_0: Rules<Theme, Properties<Hooks, Style>>,
+    ...properties_1: (Rules<Theme, Properties<Hooks, Style>> | undefined)[]
   ) => CSSProperties
 
-  export function createHooks<Hooks extends string, Theme = {}, Plugins = []>(
-    config: Config<Hooks, Theme, Plugins>
-  ): [string, CSSFunction<Theme, Properties<Hooks, Plugins>>]
+  export function createHooks<
+    T = Style,
+    Hooks extends Record<string, string>,
+    Theme = {},
+  >(
+    config: Config<keyof Hooks, Theme>
+  ): [string, CSSFunction<Theme, keyof Hooks, T>]
+
+  export function fallbackValue(
+    property: Fallback['property'],
+    value: Fallback['value'],
+    match?: Fallback['match']
+  ): Fallback
 }
 
 declare module 'fela-plugin-bidi' {
@@ -83,12 +89,12 @@ declare module 'fela-plugin-extend' {
     style: ExtendStyle<T, Hooks>
   }
 
-  type ExtendStyle<T, Hooks> = WithHooks<Hooks, T> & {
+  export type ExtendStyle<T, Hooks> = WithHooks<keyof Hooks, T> & {
     extend?: Extension<T, Hooks> | Array<Extension<T, Hooks>>
   }
 
   export default function extend<Hooks, T = Style>(): (
-    style: ExtendStyle<T, keyof Hooks>
+    style: ExtendStyle<T, Hooks>
   ) => Style
 }