@tokenami/css 0.0.21 → 0.0.23

package/dist/index.cjs

@@ -40,237 +40,75 @@ var import_config = require("@tokenami/config");
 
 // src/css.ts
 var Tokenami = __toESM(require("@tokenami/config"), 1);
-
-// src/shorthands.ts
-var mapShorthandToLonghands = {
-  animation: [
-    "animation-name",
-    "animation-duration",
-    "animation-timing-function",
-    "animation-delay",
-    "animation-iteration-count",
-    "animation-direction",
-    "animation-fill-mode",
-    "animation-play-state",
-    "animation-timeline"
-  ],
-  background: [
-    "background-attachment",
-    "background-clip",
-    "background-color",
-    "background-image",
-    "background-position",
-    "background-repeat",
-    "background-size"
-  ],
-  border: ["border-style", "border-color", "border-width"],
-  "border-top": ["border-top-width", "border-top-style", "border-top-color"],
-  "border-right": ["border-right-width", "border-right-style", "border-right-color"],
-  "border-bottom": ["border-bottom-width", "border-bottom-style", "border-bottom-color"],
-  "border-left": ["border-left-width", "border-left-style", "border-left-color"],
-  "border-color": [
-    "border-top-color",
-    "border-right-color",
-    "border-bottom-color",
-    "border-left-color"
-  ],
-  "border-style": [
-    "border-top-style",
-    "border-right-style",
-    "border-bottom-style",
-    "border-left-style"
-  ],
-  "border-width": [
-    "border-top-width",
-    "border-right-width",
-    "border-bottom-width",
-    "border-left-width"
-  ],
-  "border-image": [
-    "border-image-source",
-    "border-image-slice",
-    "border-image-width",
-    "border-image-outset",
-    "border-image-repeat"
-  ],
-  "border-radius": [
-    "border-top-left-radius",
-    "border-top-right-radius",
-    "border-bottom-right-radius",
-    "border-bottom-left-radius"
-  ],
-  "border-block": ["border-block-width", "border-block-style", "border-block-color"],
-  "border-block-width": ["border-block-start-width", "border-block-end-width"],
-  "border-block-style": ["border-block-start-style", "border-block-end-style"],
-  "border-block-color": ["border-block-start-color", "border-block-end-color"],
-  "border-block-start": [
-    "border-block-start-width",
-    "border-block-start-style",
-    "border-block-start-color"
-  ],
-  "border-block-end": [
-    "border-block-end-width",
-    "border-block-end-style",
-    "border-block-end-color"
-  ],
-  "border-inline": ["border-inline-width", "border-inline-style", "border-inline-color"],
-  "border-inline-width": ["border-inline-start-width", "border-inline-end-width"],
-  "border-inline-style": ["border-inline-start-style", "border-inline-end-style"],
-  "border-inline-color": ["border-inline-start-color", "border-inline-end-color"],
-  "border-inline-start": [
-    "border-inline-start-width",
-    "border-inline-start-style",
-    "border-inline-start-color"
-  ],
-  "border-inline-end": [
-    "border-inline-end-width",
-    "border-inline-end-style",
-    "border-inline-end-color"
-  ],
-  "column-rule": ["column-rule-width", "column-rule-style", "column-rule-color"],
-  columns: ["column-width", "column-count"],
-  container: ["container-name", "container-type"],
-  "contain-intrinsic-size": ["contain-intrinsic-width", "contain-intrinsic-height"],
-  flex: ["flex-grow", "flex-shrink", "flex-basis"],
-  "flex-flow": ["flex-direction", "flex-wrap"],
-  font: [
-    "font-style",
-    "font-variant",
-    "font-weight",
-    "font-stretch",
-    "font-size",
-    "line-height",
-    "font-family"
-  ],
-  "font-variant": [
-    "font-variant-ligatures",
-    "font-variant-caps",
-    "font-variant-numeric",
-    "font-variant-east-asian"
-  ],
-  gap: ["row-gap", "column-gap"],
-  grid: [
-    "grid-template-rows",
-    "grid-template-columns",
-    "grid-template-areas",
-    "grid-auto-rows",
-    "grid-auto-columns",
-    "grid-auto-flow"
-  ],
-  "grid-area": ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"],
-  "grid-column": ["grid-column-start", "grid-column-end"],
-  "grid-row": ["grid-row-start", "grid-row-end"],
-  "grid-template": ["grid-template-rows", "grid-template-columns", "grid-template-areas"],
-  inset: ["top", "right", "bottom", "left"],
-  "list-style": ["list-style-type", "list-style-position", "list-style-image"],
-  "inset-block": ["inset-block-start", "inset-block-end"],
-  "inset-inline": ["inset-inline-start", "inset-inline-end"],
-  margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
-  "margin-block": ["margin-block-start", "margin-block-end"],
-  "margin-inline": ["margin-inline-start", "margin-inline-end"],
-  mask: [
-    "mask-image",
-    "mask-mode",
-    "mask-position",
-    "mask-size",
-    "mask-repeat",
-    "mask-origin",
-    "mask-clip",
-    "mask-composite",
-    "mask-type"
-  ],
-  "mask-border": [
-    "mask-border-mode",
-    "mask-border-outset",
-    "mask-border-repeat",
-    "mask-border-slice",
-    "mask-border-source",
-    "mask-border-width"
-  ],
-  offset: ["offset-position", "offset-path", "offset-distance", "offset-anchor", "offset-rotate"],
-  outline: ["outline-color", "outline-style", "outline-width"],
-  overflow: ["overflow-x", "overflow-y"],
-  padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
-  "padding-block": ["padding-block-start", "padding-block-end"],
-  "padding-inline": ["padding-inline-start", "padding-inline-end"],
-  "place-content": ["align-content", "justify-content"],
-  "place-items": ["align-items", "justify-items"],
-  "place-self": ["align-self", "justify-self"],
-  "scroll-margin": [
-    "scroll-margin-top",
-    "scroll-margin-right",
-    "scroll-margin-bottom",
-    "scroll-margin-left"
-  ],
-  "scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
-  "scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
-  "scroll-padding": [
-    "scroll-padding-top",
-    "scroll-padding-right",
-    "scroll-padding-bottom",
-    "scroll-padding-left"
-  ],
-  "scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"],
-  "scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
-  "scroll-timeline": ["scroll-timeline-name", "scroll-timeline-axis"],
-  "text-decoration": [
-    "text-decoration-line",
-    "text-decoration-style",
-    "text-decoration-color",
-    "text-decoration-thickness"
-  ],
-  "text-emphasis": ["text-emphasis-style", "text-emphasis-color"],
-  transition: [
-    "transition-property",
-    "transition-duration",
-    "transition-timing-function",
-    "transition-delay"
-  ]
+var _LONGHANDS = Symbol();
+var cache = {};
+var css = (baseStyles, ...overrides) => {
+  const cacheId = JSON.stringify({ baseStyles, overrides });
+  const cached = cache[cacheId];
+  if (cached)
+    return cached;
+  let overriddenStyles = Object.assign({}, baseStyles);
+  overrides.forEach((overrideStyle) => {
+    if (!overrideStyle)
+      return;
+    for (let key in overrideStyle) {
+      const tokenProperty2 = key;
+      const property = Tokenami.getTokenPropertyName(tokenProperty2);
+      override(overriddenStyles, property);
+    }
+    Object.assign(overriddenStyles, overrideStyle);
+  });
+  Object.entries(overriddenStyles).forEach(([property, value]) => {
+    const tokenProperty2 = Tokenami.TokenProperty.safeParse(property);
+    if (tokenProperty2.success && typeof value === "number" && value > 0) {
+      const gridVar = Tokenami.gridProperty();
+      overriddenStyles[tokenProperty2.output] = `calc(var(${gridVar}) * ${value})`;
+    }
+  });
+  cache[cacheId] = overriddenStyles;
+  return overriddenStyles;
 };
-
-// src/css.ts
-var SHORTHANDS_TO_LONGHANDS = Symbol.for("tokenamiShorthandToLonghands");
-function css(baseStyles, variantsConfig, options) {
-  const cache = {};
-  return function generate(variants, ...overrides) {
-    const cacheId = JSON.stringify({ variants, overrides });
+css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
+css.compose = (config) => {
+  const { variants, responsiveVariants, ...baseStyles } = config;
+  return function generate(selectedVariants, ...overrides) {
+    const cacheId = JSON.stringify({
+      baseStyles,
+      variants,
+      responsiveVariants,
+      selectedVariants,
+      overrides
+    });
     const cached = cache[cacheId];
     if (cached)
       return cached;
-    const variantStyles = variants ? Object.entries(variants).flatMap(([key, variant]) => {
-      var _a;
+    const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
+      var _a, _b, _c;
       if (!variant)
         return [];
       const [type, bp] = key.split("_").reverse();
-      const styles = (_a = variantsConfig == null ? void 0 : variantsConfig[type]) == null ? void 0 : _a[variant];
-      const responsive = options == null ? void 0 : options.responsive;
-      const updated = responsive && bp && styles ? convertToMediaStyles(bp, styles) : styles;
-      return updated ? [updated] : [];
-    }) : [];
-    const overrideStyles = [...variantStyles, ...overrides];
-    let css2 = Object.assign({}, baseStyles);
-    overrideStyles.forEach((overrideStyle) => {
-      if (overrideStyle) {
-        for (let tokenProperty2 in overrideStyle) {
-          const property = Tokenami.getTokenPropertyName(tokenProperty2);
-          override(css2, property);
-        }
-        Object.assign(css2, overrideStyle);
+      if (bp) {
+        const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
+        return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
+      } else {
+        const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
+        return styles2 ? [styles2] : [];
       }
-    });
-    cache[cacheId] = css2;
-    return css2;
+    }) : [];
+    const styles = css(baseStyles, ...variantStyles, ...overrides);
+    cache[cacheId] = styles;
+    return styles;
   };
-}
-css[SHORTHANDS_TO_LONGHANDS] = mapShorthandToLonghands;
+};
+css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
 function createCss(config) {
   if (!config.aliases)
     return css;
-  css[SHORTHANDS_TO_LONGHANDS] = { ...css[SHORTHANDS_TO_LONGHANDS], ...config.aliases };
+  css[_LONGHANDS] = Object.assign({}, css[_LONGHANDS], config.aliases);
   return css;
 }
 function override(style, property) {
-  const longhands = css[SHORTHANDS_TO_LONGHANDS][property];
+  const longhands = css[_LONGHANDS][property];
   if (!longhands)
     return;
   for (let longhand of longhands) {

package/dist/index.d.cts

@@ -2,25 +2,31 @@ import * as Tokenami from '@tokenami/config';
 export { createConfig, defaultConfig } from '@tokenami/config';
 import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
 
+declare const _LONGHANDS: unique symbol;
 type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
 type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
 type ReponsiveKey = Extract<keyof TokenamiFinalConfig['responsive'], string>;
 type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
 type Override = TokenamiProperties | false | undefined;
-type Variants$1<C> = {
+type Variants$1<C> = undefined extends C ? {} : {
     [V in keyof C]?: VariantValue<keyof C[V]>;
 };
-type ResponsiveVariants<C> = {
+type ResponsiveVariants<C> = undefined extends C ? {} : {
     [V in keyof C]: {
         [M in ResponsiveValue<V>]?: VariantValue<keyof C[V]>;
     };
 }[keyof C];
-type SelectedVariants<V, R> = undefined extends V ? null : Variants$1<V> & (R extends true ? ResponsiveVariants<V> : {});
-declare function css<V extends VariantsConfig | undefined, R>(baseStyles: TokenamiProperties, variantsConfig?: V & VariantsConfig, options?: undefined extends V ? never : {
-    responsive: R & boolean;
-}): (variants?: SelectedVariants<V, R>, ...overrides: Override[]) => {};
-declare namespace css { }
-declare function createCss(config: Tokenami.Config): typeof css;
+type ComposeCSS<V, R> = TokenamiProperties & {
+    variants?: V & VariantsConfig;
+    responsiveVariants?: R & VariantsConfig;
+};
+interface CSS {
+    [_LONGHANDS]?: typeof Tokenami.mapShorthandToLonghands;
+    (baseStyles: TokenamiProperties, ...overrides: Override[]): {};
+    compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => {};
+}
+declare const css: CSS;
+declare function createCss(config: Tokenami.Config): CSS;
 
 type Variants<T extends () => {}> = Parameters<T>[0] extends undefined | null ? {} : NonNullable<Parameters<T>[0]>;
 

package/dist/index.d.ts

@@ -2,25 +2,31 @@ import * as Tokenami from '@tokenami/config';
 export { createConfig, defaultConfig } from '@tokenami/config';
 import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
 
+declare const _LONGHANDS: unique symbol;
 type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
 type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
 type ReponsiveKey = Extract<keyof TokenamiFinalConfig['responsive'], string>;
 type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
 type Override = TokenamiProperties | false | undefined;
-type Variants$1<C> = {
+type Variants$1<C> = undefined extends C ? {} : {
     [V in keyof C]?: VariantValue<keyof C[V]>;
 };
-type ResponsiveVariants<C> = {
+type ResponsiveVariants<C> = undefined extends C ? {} : {
     [V in keyof C]: {
         [M in ResponsiveValue<V>]?: VariantValue<keyof C[V]>;
     };
 }[keyof C];
-type SelectedVariants<V, R> = undefined extends V ? null : Variants$1<V> & (R extends true ? ResponsiveVariants<V> : {});
-declare function css<V extends VariantsConfig | undefined, R>(baseStyles: TokenamiProperties, variantsConfig?: V & VariantsConfig, options?: undefined extends V ? never : {
-    responsive: R & boolean;
-}): (variants?: SelectedVariants<V, R>, ...overrides: Override[]) => {};
-declare namespace css { }
-declare function createCss(config: Tokenami.Config): typeof css;
+type ComposeCSS<V, R> = TokenamiProperties & {
+    variants?: V & VariantsConfig;
+    responsiveVariants?: R & VariantsConfig;
+};
+interface CSS {
+    [_LONGHANDS]?: typeof Tokenami.mapShorthandToLonghands;
+    (baseStyles: TokenamiProperties, ...overrides: Override[]): {};
+    compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => {};
+}
+declare const css: CSS;
+declare function createCss(config: Tokenami.Config): CSS;
 
 type Variants<T extends () => {}> = Parameters<T>[0] extends undefined | null ? {} : NonNullable<Parameters<T>[0]>;
 

package/dist/index.js

@@ -3,237 +3,75 @@ import { createConfig, defaultConfig } from "@tokenami/config";
 
 // src/css.ts
 import * as Tokenami from "@tokenami/config";
-
-// src/shorthands.ts
-var mapShorthandToLonghands = {
-  animation: [
-    "animation-name",
-    "animation-duration",
-    "animation-timing-function",
-    "animation-delay",
-    "animation-iteration-count",
-    "animation-direction",
-    "animation-fill-mode",
-    "animation-play-state",
-    "animation-timeline"
-  ],
-  background: [
-    "background-attachment",
-    "background-clip",
-    "background-color",
-    "background-image",
-    "background-position",
-    "background-repeat",
-    "background-size"
-  ],
-  border: ["border-style", "border-color", "border-width"],
-  "border-top": ["border-top-width", "border-top-style", "border-top-color"],
-  "border-right": ["border-right-width", "border-right-style", "border-right-color"],
-  "border-bottom": ["border-bottom-width", "border-bottom-style", "border-bottom-color"],
-  "border-left": ["border-left-width", "border-left-style", "border-left-color"],
-  "border-color": [
-    "border-top-color",
-    "border-right-color",
-    "border-bottom-color",
-    "border-left-color"
-  ],
-  "border-style": [
-    "border-top-style",
-    "border-right-style",
-    "border-bottom-style",
-    "border-left-style"
-  ],
-  "border-width": [
-    "border-top-width",
-    "border-right-width",
-    "border-bottom-width",
-    "border-left-width"
-  ],
-  "border-image": [
-    "border-image-source",
-    "border-image-slice",
-    "border-image-width",
-    "border-image-outset",
-    "border-image-repeat"
-  ],
-  "border-radius": [
-    "border-top-left-radius",
-    "border-top-right-radius",
-    "border-bottom-right-radius",
-    "border-bottom-left-radius"
-  ],
-  "border-block": ["border-block-width", "border-block-style", "border-block-color"],
-  "border-block-width": ["border-block-start-width", "border-block-end-width"],
-  "border-block-style": ["border-block-start-style", "border-block-end-style"],
-  "border-block-color": ["border-block-start-color", "border-block-end-color"],
-  "border-block-start": [
-    "border-block-start-width",
-    "border-block-start-style",
-    "border-block-start-color"
-  ],
-  "border-block-end": [
-    "border-block-end-width",
-    "border-block-end-style",
-    "border-block-end-color"
-  ],
-  "border-inline": ["border-inline-width", "border-inline-style", "border-inline-color"],
-  "border-inline-width": ["border-inline-start-width", "border-inline-end-width"],
-  "border-inline-style": ["border-inline-start-style", "border-inline-end-style"],
-  "border-inline-color": ["border-inline-start-color", "border-inline-end-color"],
-  "border-inline-start": [
-    "border-inline-start-width",
-    "border-inline-start-style",
-    "border-inline-start-color"
-  ],
-  "border-inline-end": [
-    "border-inline-end-width",
-    "border-inline-end-style",
-    "border-inline-end-color"
-  ],
-  "column-rule": ["column-rule-width", "column-rule-style", "column-rule-color"],
-  columns: ["column-width", "column-count"],
-  container: ["container-name", "container-type"],
-  "contain-intrinsic-size": ["contain-intrinsic-width", "contain-intrinsic-height"],
-  flex: ["flex-grow", "flex-shrink", "flex-basis"],
-  "flex-flow": ["flex-direction", "flex-wrap"],
-  font: [
-    "font-style",
-    "font-variant",
-    "font-weight",
-    "font-stretch",
-    "font-size",
-    "line-height",
-    "font-family"
-  ],
-  "font-variant": [
-    "font-variant-ligatures",
-    "font-variant-caps",
-    "font-variant-numeric",
-    "font-variant-east-asian"
-  ],
-  gap: ["row-gap", "column-gap"],
-  grid: [
-    "grid-template-rows",
-    "grid-template-columns",
-    "grid-template-areas",
-    "grid-auto-rows",
-    "grid-auto-columns",
-    "grid-auto-flow"
-  ],
-  "grid-area": ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"],
-  "grid-column": ["grid-column-start", "grid-column-end"],
-  "grid-row": ["grid-row-start", "grid-row-end"],
-  "grid-template": ["grid-template-rows", "grid-template-columns", "grid-template-areas"],
-  inset: ["top", "right", "bottom", "left"],
-  "list-style": ["list-style-type", "list-style-position", "list-style-image"],
-  "inset-block": ["inset-block-start", "inset-block-end"],
-  "inset-inline": ["inset-inline-start", "inset-inline-end"],
-  margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
-  "margin-block": ["margin-block-start", "margin-block-end"],
-  "margin-inline": ["margin-inline-start", "margin-inline-end"],
-  mask: [
-    "mask-image",
-    "mask-mode",
-    "mask-position",
-    "mask-size",
-    "mask-repeat",
-    "mask-origin",
-    "mask-clip",
-    "mask-composite",
-    "mask-type"
-  ],
-  "mask-border": [
-    "mask-border-mode",
-    "mask-border-outset",
-    "mask-border-repeat",
-    "mask-border-slice",
-    "mask-border-source",
-    "mask-border-width"
-  ],
-  offset: ["offset-position", "offset-path", "offset-distance", "offset-anchor", "offset-rotate"],
-  outline: ["outline-color", "outline-style", "outline-width"],
-  overflow: ["overflow-x", "overflow-y"],
-  padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
-  "padding-block": ["padding-block-start", "padding-block-end"],
-  "padding-inline": ["padding-inline-start", "padding-inline-end"],
-  "place-content": ["align-content", "justify-content"],
-  "place-items": ["align-items", "justify-items"],
-  "place-self": ["align-self", "justify-self"],
-  "scroll-margin": [
-    "scroll-margin-top",
-    "scroll-margin-right",
-    "scroll-margin-bottom",
-    "scroll-margin-left"
-  ],
-  "scroll-margin-block": ["scroll-margin-block-start", "scroll-margin-block-end"],
-  "scroll-margin-inline": ["scroll-margin-inline-start", "scroll-margin-inline-end"],
-  "scroll-padding": [
-    "scroll-padding-top",
-    "scroll-padding-right",
-    "scroll-padding-bottom",
-    "scroll-padding-left"
-  ],
-  "scroll-padding-block": ["scroll-padding-block-start", "scroll-padding-block-end"],
-  "scroll-padding-inline": ["scroll-padding-inline-start", "scroll-padding-inline-end"],
-  "scroll-timeline": ["scroll-timeline-name", "scroll-timeline-axis"],
-  "text-decoration": [
-    "text-decoration-line",
-    "text-decoration-style",
-    "text-decoration-color",
-    "text-decoration-thickness"
-  ],
-  "text-emphasis": ["text-emphasis-style", "text-emphasis-color"],
-  transition: [
-    "transition-property",
-    "transition-duration",
-    "transition-timing-function",
-    "transition-delay"
-  ]
+var _LONGHANDS = Symbol();
+var cache = {};
+var css = (baseStyles, ...overrides) => {
+  const cacheId = JSON.stringify({ baseStyles, overrides });
+  const cached = cache[cacheId];
+  if (cached)
+    return cached;
+  let overriddenStyles = Object.assign({}, baseStyles);
+  overrides.forEach((overrideStyle) => {
+    if (!overrideStyle)
+      return;
+    for (let key in overrideStyle) {
+      const tokenProperty2 = key;
+      const property = Tokenami.getTokenPropertyName(tokenProperty2);
+      override(overriddenStyles, property);
+    }
+    Object.assign(overriddenStyles, overrideStyle);
+  });
+  Object.entries(overriddenStyles).forEach(([property, value]) => {
+    const tokenProperty2 = Tokenami.TokenProperty.safeParse(property);
+    if (tokenProperty2.success && typeof value === "number" && value > 0) {
+      const gridVar = Tokenami.gridProperty();
+      overriddenStyles[tokenProperty2.output] = `calc(var(${gridVar}) * ${value})`;
+    }
+  });
+  cache[cacheId] = overriddenStyles;
+  return overriddenStyles;
 };
-
-// src/css.ts
-var SHORTHANDS_TO_LONGHANDS = Symbol.for("tokenamiShorthandToLonghands");
-function css(baseStyles, variantsConfig, options) {
-  const cache = {};
-  return function generate(variants, ...overrides) {
-    const cacheId = JSON.stringify({ variants, overrides });
+css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
+css.compose = (config) => {
+  const { variants, responsiveVariants, ...baseStyles } = config;
+  return function generate(selectedVariants, ...overrides) {
+    const cacheId = JSON.stringify({
+      baseStyles,
+      variants,
+      responsiveVariants,
+      selectedVariants,
+      overrides
+    });
     const cached = cache[cacheId];
     if (cached)
       return cached;
-    const variantStyles = variants ? Object.entries(variants).flatMap(([key, variant]) => {
-      var _a;
+    const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
+      var _a, _b, _c;
       if (!variant)
         return [];
       const [type, bp] = key.split("_").reverse();
-      const styles = (_a = variantsConfig == null ? void 0 : variantsConfig[type]) == null ? void 0 : _a[variant];
-      const responsive = options == null ? void 0 : options.responsive;
-      const updated = responsive && bp && styles ? convertToMediaStyles(bp, styles) : styles;
-      return updated ? [updated] : [];
-    }) : [];
-    const overrideStyles = [...variantStyles, ...overrides];
-    let css2 = Object.assign({}, baseStyles);
-    overrideStyles.forEach((overrideStyle) => {
-      if (overrideStyle) {
-        for (let tokenProperty2 in overrideStyle) {
-          const property = Tokenami.getTokenPropertyName(tokenProperty2);
-          override(css2, property);
-        }
-        Object.assign(css2, overrideStyle);
+      if (bp) {
+        const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
+        return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
+      } else {
+        const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
+        return styles2 ? [styles2] : [];
       }
-    });
-    cache[cacheId] = css2;
-    return css2;
+    }) : [];
+    const styles = css(baseStyles, ...variantStyles, ...overrides);
+    cache[cacheId] = styles;
+    return styles;
   };
-}
-css[SHORTHANDS_TO_LONGHANDS] = mapShorthandToLonghands;
+};
+css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
 function createCss(config) {
   if (!config.aliases)
     return css;
-  css[SHORTHANDS_TO_LONGHANDS] = { ...css[SHORTHANDS_TO_LONGHANDS], ...config.aliases };
+  css[_LONGHANDS] = Object.assign({}, css[_LONGHANDS], config.aliases);
   return css;
 }
 function override(style, property) {
-  const longhands = css[SHORTHANDS_TO_LONGHANDS][property];
+  const longhands = css[_LONGHANDS][property];
   if (!longhands)
     return;
   for (let longhand of longhands) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenami/css",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,17 +12,17 @@
     "dist"
   ],
   "dependencies": {
-    "@tokenami/config": "0.0.21"
+    "@tokenami/config": "0.0.23"
   },
   "devDependencies": {
     "tsup": "^7.0.0",
     "typescript": "^5.1.3",
     "vitest": "^0.34.6",
-    "@tokenami/dev": "0.0.21"
+    "@tokenami/dev": "0.0.23"
   },
   "peerDependencies": {
     "typescript": ">= 5",
-    "@tokenami/dev": "0.0.21"
+    "@tokenami/dev": "0.0.23"
   },
   "scripts": {
     "build": "tsup",