@tokenami/css 0.0.77 → 0.0.78--canary.391.13467326933.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +105 -63
  2. package/dist/index.d.cts +15 -10
  3. package/dist/index.d.ts +15 -10
  4. package/dist/index.js +105 -63
  5. package/package.json +4 -4
package/dist/index.cjs CHANGED
@@ -24,101 +24,143 @@ var Tokenami__namespace = /*#__PURE__*/_interopNamespace(Tokenami);
24
24
 
25
25
  // src/index.ts
26
26
  var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
27
- var cache = {
28
- limit: 500,
29
- cache: /* @__PURE__ */ new Map(),
30
- get(key) {
31
- const value = this.cache.get(key);
32
- if (!value)
33
- return;
34
- this.cache.delete(key);
35
- this.cache.set(key, value);
36
- return value;
37
- },
38
- set(key, value) {
39
- this.cache.delete(key);
40
- if (this.cache.size === this.limit)
41
- this.cache.delete(this.cache.keys().next().value);
42
- this.cache.set(key, value);
43
- }
44
- };
27
+ var _COMPOSE = Symbol();
45
28
  function createCss(config, options = { escapeSpecialChars: true }) {
46
29
  globalThis[_TOKENAMI_CSS] = options;
47
- const css2 = (baseStyles, ...overrides) => {
48
- let overriddenStyles = {};
49
- const globalOptions = globalThis[_TOKENAMI_CSS];
50
- const cacheId = JSON.stringify({ baseStyles, overrides });
51
- const cached = cache.get(cacheId);
30
+ function css2(...allStyles) {
31
+ const cacheId = generateCacheId(allStyles);
32
+ const cached = lruCache.get(cacheId);
52
33
  if (cached)
53
34
  return cached;
54
- const allStyles = [baseStyles, ...overrides];
55
- for (const originalStyles of allStyles) {
56
- if (!originalStyles)
35
+ const opts = globalThis[_TOKENAMI_CSS];
36
+ const overriddenStyles = { [_COMPOSE]: {} };
37
+ for (const styles of allStyles) {
38
+ if (!styles)
57
39
  continue;
58
- for (let [key, value] of Object.entries(originalStyles)) {
59
- if (!key.startsWith("--")) {
40
+ const composeEntries = Object.entries(styles[_COMPOSE] ?? {});
41
+ const entries = [...composeEntries, ...Object.entries(styles)];
42
+ const aliasProperties = Tokenami__namespace.iterateAliasProperties(entries, config);
43
+ for (const [key, value, propertyConfig] of aliasProperties) {
44
+ const tokenProperty2 = Tokenami__namespace.TokenProperty.safeParse(key);
45
+ const isComposedProperty = styles[_COMPOSE]?.[key] != null;
46
+ if (!tokenProperty2.success) {
60
47
  overriddenStyles[key] = value;
61
48
  continue;
62
49
  }
63
- const tokenProperty2 = key;
64
- const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2);
65
- const cssProperties = Tokenami__namespace.getCSSPropertiesForAlias(parts.alias, config.aliases);
66
- for (const cssProperty of cssProperties) {
67
- const longProperty = createLonghandProperty(tokenProperty2, cssProperty);
68
- const isNumber = typeof value === "number" && value !== 0;
69
- const parsedProperty = Tokenami__namespace.parseProperty(longProperty, globalOptions);
50
+ for (const cssProperty of propertyConfig.cssProperties) {
51
+ const longProperty = Tokenami__namespace.createLonghandProperty(tokenProperty2.output, cssProperty);
52
+ const parsedProperty = Tokenami__namespace.parseProperty(longProperty, opts);
53
+ const calcToggle = Tokenami__namespace.calcProperty(parsedProperty);
70
54
  overrideLonghands(overriddenStyles, parsedProperty);
71
- overriddenStyles[parsedProperty] = value;
72
- overriddenStyles[calcProperty(parsedProperty)] = isNumber ? "/*on*/" : void 0;
55
+ const target = isComposedProperty && !overriddenStyles[_COMPOSE][parsedProperty] ? overriddenStyles[_COMPOSE] : overriddenStyles;
56
+ target[parsedProperty] = value;
57
+ if (isComposedProperty)
58
+ continue;
59
+ if (propertyConfig.isCalc)
60
+ overriddenStyles[calcToggle] = "/*on*/";
61
+ else
62
+ delete overriddenStyles[calcToggle];
73
63
  }
74
64
  }
75
65
  }
76
- cache.set(cacheId, overriddenStyles);
66
+ lruCache.set(cacheId, overriddenStyles);
77
67
  return overriddenStyles;
78
- };
79
- css2.compose = (config2) => {
80
- const { variants, responsiveVariants, ...baseStyles } = config2;
81
- return function generate(selectedVariants = {}, ...overrides) {
82
- const cacheId = JSON.stringify({ config: config2, selectedVariants, overrides });
83
- const cached = cache.get(cacheId);
68
+ }
69
+ css2.compose = (styleConfig) => {
70
+ const { includes = [], variants, responsiveVariants, ...baseStyles } = styleConfig;
71
+ const className = Tokenami__namespace.generateClassName(baseStyles);
72
+ return function generate(selectedVariants = {}) {
73
+ const cacheId = generateCacheId({ styleConfig, selectedVariants });
74
+ const cached = lruCache.get(cacheId);
84
75
  if (cached)
85
76
  return cached;
77
+ const variantEntries = Object.entries(selectedVariants);
86
78
  let variantStyles = [];
87
- for (const [key, variant] of Object.entries(selectedVariants)) {
79
+ let includeStyles = [];
80
+ let includeClassNames = [];
81
+ for (const include of includes) {
82
+ if (typeof include === "function") {
83
+ const [cn2, styles] = include(selectedVariants);
84
+ includeClassNames.push(cn2());
85
+ includeStyles.push(styles());
86
+ } else {
87
+ includeStyles.push(include);
88
+ }
89
+ }
90
+ for (const [key, variant] of variantEntries) {
88
91
  if (!variant)
89
92
  continue;
90
93
  const [type, bp] = key.split("_").reverse();
91
94
  const responsive = responsiveVariants?.[type]?.[variant];
95
+ const variantValue = variants?.[type]?.[variant] ?? responsive;
92
96
  if (bp && responsive) {
93
97
  variantStyles.push(convertToMediaStyles(bp, responsive));
94
- } else {
95
- variantStyles.push(variants?.[type]?.[variant] ?? responsive);
98
+ } else if (variantValue) {
99
+ variantStyles.push(variantValue);
96
100
  }
97
101
  }
98
- const styles = css2(baseStyles, ...variantStyles, ...overrides);
99
- cache.set(cacheId, styles);
100
- return styles;
102
+ const result = [
103
+ cn.bind(null, ...includeClassNames, className),
104
+ (...overrides) => {
105
+ const styles = { [_COMPOSE]: baseStyles };
106
+ const base = css2(styles, ...variantStyles, ...overrides);
107
+ return css2.apply(null, [...includeStyles, base]);
108
+ }
109
+ ];
110
+ lruCache.set(cacheId, result);
111
+ return result;
101
112
  };
102
113
  };
103
114
  return css2;
104
115
  }
105
- function overrideLonghands(style, tokenProperty2) {
106
- const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2);
107
- const longhands = Tokenami__namespace.mapShorthandToLonghands.get(parts.alias) || [];
108
- longhands.forEach((longhand) => {
109
- const tokenPropertyLong = createLonghandProperty(tokenProperty2, longhand);
110
- if (style[tokenPropertyLong]) {
111
- delete style[tokenPropertyLong];
112
- delete style[calcProperty(tokenPropertyLong)];
116
+ function generateCacheId(obj) {
117
+ return JSON.stringify(obj, (_, value) => {
118
+ if (typeof value === "object" && value !== null) {
119
+ const newValue = { ...value };
120
+ const symbols = Object.getOwnPropertySymbols(value);
121
+ for (const sym of symbols) {
122
+ newValue[sym.toString()] = value[sym];
123
+ }
124
+ return newValue;
113
125
  }
114
- overrideLonghands(style, tokenPropertyLong);
126
+ return value;
115
127
  });
116
128
  }
117
- var calcProperty = (property) => property + "__calc";
118
- function createLonghandProperty(tokenProperty2, cssProperty) {
129
+ var lruCache = {
130
+ limit: 1500,
131
+ cache: /* @__PURE__ */ new Map(),
132
+ get(key) {
133
+ const value = this.cache.get(key);
134
+ if (!value)
135
+ return;
136
+ this.cache.delete(key);
137
+ this.cache.set(key, value);
138
+ return value;
139
+ },
140
+ set(key, value) {
141
+ this.cache.delete(key);
142
+ if (this.cache.size === this.limit)
143
+ this.cache.delete(this.cache.keys().next().value);
144
+ this.cache.set(key, value);
145
+ }
146
+ };
147
+ function cn(...classNames) {
148
+ return classNames.filter(Boolean).join(" ");
149
+ }
150
+ function overrideLonghands(style, tokenProperty2) {
119
151
  const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2);
120
- const aliasRegex = new RegExp(`${parts.alias}$`);
121
- return tokenProperty2.replace(aliasRegex, cssProperty);
152
+ const longhands = Tokenami__namespace.mapShorthandToLonghands.get(parts.alias) || [];
153
+ for (const longhand of longhands) {
154
+ const tokenPropertyLong = Tokenami__namespace.createLonghandProperty(tokenProperty2, longhand);
155
+ const calcProp = Tokenami__namespace.calcProperty(tokenPropertyLong);
156
+ const composedValue = style[_COMPOSE]?.[tokenPropertyLong];
157
+ const value = composedValue ?? style[tokenPropertyLong];
158
+ const isNumber = typeof value === "number";
159
+ composedValue ? style[tokenPropertyLong] = "initial" : delete style[tokenPropertyLong];
160
+ if (isNumber)
161
+ composedValue ? style[calcProp] = "initial" : delete style[calcProp];
162
+ overrideLonghands(style, tokenPropertyLong);
163
+ }
122
164
  }
123
165
  function convertToMediaStyles(bp, styles) {
124
166
  const updatedEntries = Object.entries(styles).map(([property, value]) => {
package/dist/index.d.cts CHANGED
@@ -4,13 +4,14 @@ import * as Tokenami from '@tokenami/config';
4
4
  export { Config, createConfig } from '@tokenami/config';
5
5
 
6
6
  type TokenamiCSS = {
7
- [_: symbol]: 'TokenamiCSS';
7
+ [_: symbol]: TokenamiProperties;
8
8
  };
9
9
  type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
10
10
  type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
11
11
  type ReponsiveKey = Extract<keyof NonNullable<TokenamiFinalConfig['responsive']>, string>;
12
12
  type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
13
13
  type Override = TokenamiProperties | TokenamiCSS | false | undefined;
14
+ type ClassName = string | undefined | null | false;
14
15
  type Variants$1<C> = undefined extends C ? {} : {
15
16
  [V in keyof C]?: VariantValue<keyof C[V]>;
16
17
  };
@@ -19,30 +20,34 @@ type ResponsiveVariants<C> = undefined extends C ? {} : {
19
20
  [M in ResponsiveValue<V>]?: VariantValue<keyof C[V]>;
20
21
  };
21
22
  }[keyof C];
22
- type ComposeCSS<V, R> = TokenamiProperties & {
23
+ type TokenamiComposeInput<V, R> = TokenamiProperties & {
24
+ includes?: (TokenamiComposeResult<any, any> | TokenamiCSS)[];
23
25
  variants?: V & VariantsConfig;
24
26
  responsiveVariants?: R & VariantsConfig;
25
27
  };
26
- interface CSS {
27
- (baseStyles: TokenamiProperties, ...overrides: Override[]): TokenamiCSS;
28
- compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => TokenamiCSS;
29
- }
28
+ type TokenamiComposeResult<V, R> = (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>) => [cn: (...classNames: ClassName[]) => string, style: (...overrides: Override[]) => TokenamiCSS];
30
29
  type CreateCssOptions = {
31
30
  /**
32
31
  * When using arbitrary values, Tokenami will escape special characters. Some frameworks
33
32
  * automatically escape so this would result in double-escaping. In that case, switch this
34
- * off to hand-off to your framework.
33
+ * off to hand over to your framework.
35
34
  *
36
35
  * @default true
37
36
  */
38
37
  escapeSpecialChars?: boolean;
39
38
  };
40
- declare function createCss(config: Pick<Tokenami.Config, 'aliases'>, options?: CreateCssOptions): CSS;
41
- declare const css: CSS;
39
+ declare function createCss(config: Pick<Tokenami.Config, 'aliases'>, options?: CreateCssOptions): {
40
+ (allStyles_0: TokenamiProperties, ...allStyles_1: Override[]): TokenamiCSS;
41
+ compose<V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(styleConfig: TokenamiComposeInput<V, R>): TokenamiComposeResult<V, R>;
42
+ };
43
+ declare const css: {
44
+ (allStyles_0: TokenamiProperties, ...allStyles_1: Override[]): TokenamiCSS;
45
+ compose<V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(styleConfig: TokenamiComposeInput<V, R>): TokenamiComposeResult<V, R>;
46
+ };
42
47
 
43
48
  type TokenamiStyle<P> = Omit<P, 'style'> & {
44
49
  style?: (TokenamiProperties | TokenamiCSS) & ('style' extends keyof P ? P['style'] : {});
45
50
  };
46
51
  type Variants<T extends (...args: any) => any> = Parameters<T>[0] extends undefined | null ? {} : NonNullable<Parameters<T>[0]>;
47
52
 
48
- export { type CSS, type TokenamiCSS, type TokenamiStyle, type Variants, createCss, css };
53
+ export { type TokenamiCSS, type TokenamiStyle, type Variants, createCss, css };
package/dist/index.d.ts CHANGED
@@ -4,13 +4,14 @@ import * as Tokenami from '@tokenami/config';
4
4
  export { Config, createConfig } from '@tokenami/config';
5
5
 
6
6
  type TokenamiCSS = {
7
- [_: symbol]: 'TokenamiCSS';
7
+ [_: symbol]: TokenamiProperties;
8
8
  };
9
9
  type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
10
10
  type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
11
11
  type ReponsiveKey = Extract<keyof NonNullable<TokenamiFinalConfig['responsive']>, string>;
12
12
  type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
13
13
  type Override = TokenamiProperties | TokenamiCSS | false | undefined;
14
+ type ClassName = string | undefined | null | false;
14
15
  type Variants$1<C> = undefined extends C ? {} : {
15
16
  [V in keyof C]?: VariantValue<keyof C[V]>;
16
17
  };
@@ -19,30 +20,34 @@ type ResponsiveVariants<C> = undefined extends C ? {} : {
19
20
  [M in ResponsiveValue<V>]?: VariantValue<keyof C[V]>;
20
21
  };
21
22
  }[keyof C];
22
- type ComposeCSS<V, R> = TokenamiProperties & {
23
+ type TokenamiComposeInput<V, R> = TokenamiProperties & {
24
+ includes?: (TokenamiComposeResult<any, any> | TokenamiCSS)[];
23
25
  variants?: V & VariantsConfig;
24
26
  responsiveVariants?: R & VariantsConfig;
25
27
  };
26
- interface CSS {
27
- (baseStyles: TokenamiProperties, ...overrides: Override[]): TokenamiCSS;
28
- compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => TokenamiCSS;
29
- }
28
+ type TokenamiComposeResult<V, R> = (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>) => [cn: (...classNames: ClassName[]) => string, style: (...overrides: Override[]) => TokenamiCSS];
30
29
  type CreateCssOptions = {
31
30
  /**
32
31
  * When using arbitrary values, Tokenami will escape special characters. Some frameworks
33
32
  * automatically escape so this would result in double-escaping. In that case, switch this
34
- * off to hand-off to your framework.
33
+ * off to hand over to your framework.
35
34
  *
36
35
  * @default true
37
36
  */
38
37
  escapeSpecialChars?: boolean;
39
38
  };
40
- declare function createCss(config: Pick<Tokenami.Config, 'aliases'>, options?: CreateCssOptions): CSS;
41
- declare const css: CSS;
39
+ declare function createCss(config: Pick<Tokenami.Config, 'aliases'>, options?: CreateCssOptions): {
40
+ (allStyles_0: TokenamiProperties, ...allStyles_1: Override[]): TokenamiCSS;
41
+ compose<V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(styleConfig: TokenamiComposeInput<V, R>): TokenamiComposeResult<V, R>;
42
+ };
43
+ declare const css: {
44
+ (allStyles_0: TokenamiProperties, ...allStyles_1: Override[]): TokenamiCSS;
45
+ compose<V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(styleConfig: TokenamiComposeInput<V, R>): TokenamiComposeResult<V, R>;
46
+ };
42
47
 
43
48
  type TokenamiStyle<P> = Omit<P, 'style'> & {
44
49
  style?: (TokenamiProperties | TokenamiCSS) & ('style' extends keyof P ? P['style'] : {});
45
50
  };
46
51
  type Variants<T extends (...args: any) => any> = Parameters<T>[0] extends undefined | null ? {} : NonNullable<Parameters<T>[0]>;
47
52
 
48
- export { type CSS, type TokenamiCSS, type TokenamiStyle, type Variants, createCss, css };
53
+ export { type TokenamiCSS, type TokenamiStyle, type Variants, createCss, css };
package/dist/index.js CHANGED
@@ -3,101 +3,143 @@ export { createConfig } from '@tokenami/config';
3
3
 
4
4
  // src/index.ts
5
5
  var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
6
- var cache = {
7
- limit: 500,
8
- cache: /* @__PURE__ */ new Map(),
9
- get(key) {
10
- const value = this.cache.get(key);
11
- if (!value)
12
- return;
13
- this.cache.delete(key);
14
- this.cache.set(key, value);
15
- return value;
16
- },
17
- set(key, value) {
18
- this.cache.delete(key);
19
- if (this.cache.size === this.limit)
20
- this.cache.delete(this.cache.keys().next().value);
21
- this.cache.set(key, value);
22
- }
23
- };
6
+ var _COMPOSE = Symbol();
24
7
  function createCss(config, options = { escapeSpecialChars: true }) {
25
8
  globalThis[_TOKENAMI_CSS] = options;
26
- const css2 = (baseStyles, ...overrides) => {
27
- let overriddenStyles = {};
28
- const globalOptions = globalThis[_TOKENAMI_CSS];
29
- const cacheId = JSON.stringify({ baseStyles, overrides });
30
- const cached = cache.get(cacheId);
9
+ function css2(...allStyles) {
10
+ const cacheId = generateCacheId(allStyles);
11
+ const cached = lruCache.get(cacheId);
31
12
  if (cached)
32
13
  return cached;
33
- const allStyles = [baseStyles, ...overrides];
34
- for (const originalStyles of allStyles) {
35
- if (!originalStyles)
14
+ const opts = globalThis[_TOKENAMI_CSS];
15
+ const overriddenStyles = { [_COMPOSE]: {} };
16
+ for (const styles of allStyles) {
17
+ if (!styles)
36
18
  continue;
37
- for (let [key, value] of Object.entries(originalStyles)) {
38
- if (!key.startsWith("--")) {
19
+ const composeEntries = Object.entries(styles[_COMPOSE] ?? {});
20
+ const entries = [...composeEntries, ...Object.entries(styles)];
21
+ const aliasProperties = Tokenami.iterateAliasProperties(entries, config);
22
+ for (const [key, value, propertyConfig] of aliasProperties) {
23
+ const tokenProperty2 = Tokenami.TokenProperty.safeParse(key);
24
+ const isComposedProperty = styles[_COMPOSE]?.[key] != null;
25
+ if (!tokenProperty2.success) {
39
26
  overriddenStyles[key] = value;
40
27
  continue;
41
28
  }
42
- const tokenProperty2 = key;
43
- const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
44
- const cssProperties = Tokenami.getCSSPropertiesForAlias(parts.alias, config.aliases);
45
- for (const cssProperty of cssProperties) {
46
- const longProperty = createLonghandProperty(tokenProperty2, cssProperty);
47
- const isNumber = typeof value === "number" && value !== 0;
48
- const parsedProperty = Tokenami.parseProperty(longProperty, globalOptions);
29
+ for (const cssProperty of propertyConfig.cssProperties) {
30
+ const longProperty = Tokenami.createLonghandProperty(tokenProperty2.output, cssProperty);
31
+ const parsedProperty = Tokenami.parseProperty(longProperty, opts);
32
+ const calcToggle = Tokenami.calcProperty(parsedProperty);
49
33
  overrideLonghands(overriddenStyles, parsedProperty);
50
- overriddenStyles[parsedProperty] = value;
51
- overriddenStyles[calcProperty(parsedProperty)] = isNumber ? "/*on*/" : void 0;
34
+ const target = isComposedProperty && !overriddenStyles[_COMPOSE][parsedProperty] ? overriddenStyles[_COMPOSE] : overriddenStyles;
35
+ target[parsedProperty] = value;
36
+ if (isComposedProperty)
37
+ continue;
38
+ if (propertyConfig.isCalc)
39
+ overriddenStyles[calcToggle] = "/*on*/";
40
+ else
41
+ delete overriddenStyles[calcToggle];
52
42
  }
53
43
  }
54
44
  }
55
- cache.set(cacheId, overriddenStyles);
45
+ lruCache.set(cacheId, overriddenStyles);
56
46
  return overriddenStyles;
57
- };
58
- css2.compose = (config2) => {
59
- const { variants, responsiveVariants, ...baseStyles } = config2;
60
- return function generate(selectedVariants = {}, ...overrides) {
61
- const cacheId = JSON.stringify({ config: config2, selectedVariants, overrides });
62
- const cached = cache.get(cacheId);
47
+ }
48
+ css2.compose = (styleConfig) => {
49
+ const { includes = [], variants, responsiveVariants, ...baseStyles } = styleConfig;
50
+ const className = Tokenami.generateClassName(baseStyles);
51
+ return function generate(selectedVariants = {}) {
52
+ const cacheId = generateCacheId({ styleConfig, selectedVariants });
53
+ const cached = lruCache.get(cacheId);
63
54
  if (cached)
64
55
  return cached;
56
+ const variantEntries = Object.entries(selectedVariants);
65
57
  let variantStyles = [];
66
- for (const [key, variant] of Object.entries(selectedVariants)) {
58
+ let includeStyles = [];
59
+ let includeClassNames = [];
60
+ for (const include of includes) {
61
+ if (typeof include === "function") {
62
+ const [cn2, styles] = include(selectedVariants);
63
+ includeClassNames.push(cn2());
64
+ includeStyles.push(styles());
65
+ } else {
66
+ includeStyles.push(include);
67
+ }
68
+ }
69
+ for (const [key, variant] of variantEntries) {
67
70
  if (!variant)
68
71
  continue;
69
72
  const [type, bp] = key.split("_").reverse();
70
73
  const responsive = responsiveVariants?.[type]?.[variant];
74
+ const variantValue = variants?.[type]?.[variant] ?? responsive;
71
75
  if (bp && responsive) {
72
76
  variantStyles.push(convertToMediaStyles(bp, responsive));
73
- } else {
74
- variantStyles.push(variants?.[type]?.[variant] ?? responsive);
77
+ } else if (variantValue) {
78
+ variantStyles.push(variantValue);
75
79
  }
76
80
  }
77
- const styles = css2(baseStyles, ...variantStyles, ...overrides);
78
- cache.set(cacheId, styles);
79
- return styles;
81
+ const result = [
82
+ cn.bind(null, ...includeClassNames, className),
83
+ (...overrides) => {
84
+ const styles = { [_COMPOSE]: baseStyles };
85
+ const base = css2(styles, ...variantStyles, ...overrides);
86
+ return css2.apply(null, [...includeStyles, base]);
87
+ }
88
+ ];
89
+ lruCache.set(cacheId, result);
90
+ return result;
80
91
  };
81
92
  };
82
93
  return css2;
83
94
  }
84
- function overrideLonghands(style, tokenProperty2) {
85
- const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
86
- const longhands = Tokenami.mapShorthandToLonghands.get(parts.alias) || [];
87
- longhands.forEach((longhand) => {
88
- const tokenPropertyLong = createLonghandProperty(tokenProperty2, longhand);
89
- if (style[tokenPropertyLong]) {
90
- delete style[tokenPropertyLong];
91
- delete style[calcProperty(tokenPropertyLong)];
95
+ function generateCacheId(obj) {
96
+ return JSON.stringify(obj, (_, value) => {
97
+ if (typeof value === "object" && value !== null) {
98
+ const newValue = { ...value };
99
+ const symbols = Object.getOwnPropertySymbols(value);
100
+ for (const sym of symbols) {
101
+ newValue[sym.toString()] = value[sym];
102
+ }
103
+ return newValue;
92
104
  }
93
- overrideLonghands(style, tokenPropertyLong);
105
+ return value;
94
106
  });
95
107
  }
96
- var calcProperty = (property) => property + "__calc";
97
- function createLonghandProperty(tokenProperty2, cssProperty) {
108
+ var lruCache = {
109
+ limit: 1500,
110
+ cache: /* @__PURE__ */ new Map(),
111
+ get(key) {
112
+ const value = this.cache.get(key);
113
+ if (!value)
114
+ return;
115
+ this.cache.delete(key);
116
+ this.cache.set(key, value);
117
+ return value;
118
+ },
119
+ set(key, value) {
120
+ this.cache.delete(key);
121
+ if (this.cache.size === this.limit)
122
+ this.cache.delete(this.cache.keys().next().value);
123
+ this.cache.set(key, value);
124
+ }
125
+ };
126
+ function cn(...classNames) {
127
+ return classNames.filter(Boolean).join(" ");
128
+ }
129
+ function overrideLonghands(style, tokenProperty2) {
98
130
  const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
99
- const aliasRegex = new RegExp(`${parts.alias}$`);
100
- return tokenProperty2.replace(aliasRegex, cssProperty);
131
+ const longhands = Tokenami.mapShorthandToLonghands.get(parts.alias) || [];
132
+ for (const longhand of longhands) {
133
+ const tokenPropertyLong = Tokenami.createLonghandProperty(tokenProperty2, longhand);
134
+ const calcProp = Tokenami.calcProperty(tokenPropertyLong);
135
+ const composedValue = style[_COMPOSE]?.[tokenPropertyLong];
136
+ const value = composedValue ?? style[tokenPropertyLong];
137
+ const isNumber = typeof value === "number";
138
+ composedValue ? style[tokenPropertyLong] = "initial" : delete style[tokenPropertyLong];
139
+ if (isNumber)
140
+ composedValue ? style[calcProp] = "initial" : delete style[calcProp];
141
+ overrideLonghands(style, tokenPropertyLong);
142
+ }
101
143
  }
102
144
  function convertToMediaStyles(bp, styles) {
103
145
  const updatedEntries = Object.entries(styles).map(([property, value]) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tokenami/css",
3
- "version": "0.0.77",
3
+ "version": "0.0.78--canary.391.13467326933.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -34,10 +34,10 @@
34
34
  "test:watch": "vitest"
35
35
  },
36
36
  "dependencies": {
37
- "@tokenami/config": "0.0.77"
37
+ "@tokenami/config": "0.0.78--canary.391.13467326933.0"
38
38
  },
39
39
  "devDependencies": {
40
- "tokenami": "0.0.77",
40
+ "tokenami": "0.0.78--canary.391.13467326933.0",
41
41
  "tsup": "^7.0.0",
42
42
  "typescript": "^5.1.3",
43
43
  "vitest": "^0.34.6"
@@ -46,5 +46,5 @@
46
46
  "tokenami": ">= 0",
47
47
  "typescript": ">= 5"
48
48
  },
49
- "gitHead": "bab5d0c16edf10d173a93bc80e274e3e34cbe33d"
49
+ "gitHead": "3a94df9615df16ae83234c3cc9d153255167c5f2"
50
50
  }