@tokenami/css 0.0.51 → 0.0.53
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.
- package/dist/index.cjs +105 -114
- package/dist/index.d.cts +11 -3
- package/dist/index.d.ts +11 -3
- package/dist/index.js +75 -76
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -1,46 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Tokenami = require('@tokenami/config');
|
|
4
|
+
|
|
5
|
+
function _interopNamespace(e) {
|
|
6
|
+
if (e && e.__esModule) return e;
|
|
7
|
+
var n = Object.create(null);
|
|
8
|
+
if (e) {
|
|
9
|
+
Object.keys(e).forEach(function (k) {
|
|
10
|
+
if (k !== 'default') {
|
|
11
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
12
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () { return e[k]; }
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
});
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
n.default = e;
|
|
20
|
+
return Object.freeze(n);
|
|
21
|
+
}
|
|
29
22
|
|
|
30
|
-
|
|
31
|
-
var src_exports = {};
|
|
32
|
-
__export(src_exports, {
|
|
33
|
-
createConfig: () => import_config.createConfig,
|
|
34
|
-
createCss: () => createCss,
|
|
35
|
-
css: () => css,
|
|
36
|
-
defaultConfig: () => import_config.defaultConfig
|
|
37
|
-
});
|
|
38
|
-
module.exports = __toCommonJS(src_exports);
|
|
39
|
-
var import_config = require("@tokenami/config");
|
|
23
|
+
var Tokenami__namespace = /*#__PURE__*/_interopNamespace(Tokenami);
|
|
40
24
|
|
|
41
|
-
// src/
|
|
42
|
-
var
|
|
43
|
-
var _ALIASES = Symbol();
|
|
25
|
+
// src/index.ts
|
|
26
|
+
var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
|
|
44
27
|
var cache = {
|
|
45
28
|
limit: 500,
|
|
46
29
|
cache: /* @__PURE__ */ new Map(),
|
|
@@ -62,101 +45,109 @@ var cache = {
|
|
|
62
45
|
this.cache.set(key, value);
|
|
63
46
|
}
|
|
64
47
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
if (
|
|
73
|
-
return;
|
|
74
|
-
|
|
75
|
-
if (!
|
|
48
|
+
function createCss(config, options) {
|
|
49
|
+
globalThis[_TOKENAMI_CSS] = options || {};
|
|
50
|
+
const globalOptions = globalThis[_TOKENAMI_CSS];
|
|
51
|
+
const css2 = (baseStyles, ...overrides) => {
|
|
52
|
+
let overriddenStyles = {};
|
|
53
|
+
const cacheId = JSON.stringify({ baseStyles, overrides });
|
|
54
|
+
const cached = cache.get(cacheId);
|
|
55
|
+
if (cached)
|
|
56
|
+
return cached;
|
|
57
|
+
[baseStyles, ...overrides].forEach((originalStyles) => {
|
|
58
|
+
if (!originalStyles)
|
|
76
59
|
return;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
if (typeof value === "number" && value > 0) {
|
|
83
|
-
const gridVar = Tokenami.gridProperty();
|
|
84
|
-
value = `calc(var(${gridVar}) * ${value})`;
|
|
60
|
+
Object.entries(originalStyles).forEach(([key, value]) => {
|
|
61
|
+
const tokenProperty2 = Tokenami__namespace.TokenProperty.safeParse(key);
|
|
62
|
+
if (!tokenProperty2.success) {
|
|
63
|
+
Object.assign(overriddenStyles, { [key]: value });
|
|
64
|
+
return;
|
|
85
65
|
}
|
|
86
|
-
|
|
87
|
-
|
|
66
|
+
const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2.output);
|
|
67
|
+
const cssProperties = Tokenami__namespace.getCSSPropertiesForAlias(parts.alias, config.aliases);
|
|
68
|
+
cssProperties.forEach((cssProperty) => {
|
|
69
|
+
const long = createLonghandProperty(tokenProperty2.output, cssProperty);
|
|
70
|
+
const tokenPropertyLong = Tokenami__namespace.parseProperty(long, {
|
|
71
|
+
escapeSpecialChars: globalOptions == null ? void 0 : globalOptions.escapeSpecialChars
|
|
72
|
+
});
|
|
73
|
+
if (typeof value === "number" && value > 0) {
|
|
74
|
+
const gridVar = Tokenami__namespace.gridProperty();
|
|
75
|
+
value = `calc(var(${gridVar}) * ${value})`;
|
|
76
|
+
}
|
|
77
|
+
overrideLonghands(overriddenStyles, tokenPropertyLong);
|
|
78
|
+
Object.assign(overriddenStyles, { [tokenPropertyLong]: value });
|
|
79
|
+
});
|
|
88
80
|
});
|
|
89
81
|
});
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
return overriddenStyles;
|
|
93
|
-
};
|
|
94
|
-
css[_ALIASES] = {};
|
|
95
|
-
css.compose = (config) => {
|
|
96
|
-
const { variants, responsiveVariants, ...baseStyles } = config;
|
|
97
|
-
return function generate(selectedVariants, ...overrides) {
|
|
98
|
-
const cacheId = JSON.stringify({
|
|
99
|
-
baseStyles,
|
|
100
|
-
variants,
|
|
101
|
-
responsiveVariants,
|
|
102
|
-
selectedVariants,
|
|
103
|
-
overrides
|
|
104
|
-
});
|
|
105
|
-
const cached = cache.get(cacheId);
|
|
106
|
-
if (cached)
|
|
107
|
-
return cached;
|
|
108
|
-
const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
|
|
109
|
-
var _a, _b, _c;
|
|
110
|
-
if (!variant)
|
|
111
|
-
return [];
|
|
112
|
-
const [type, bp] = key.split("_").reverse();
|
|
113
|
-
if (bp) {
|
|
114
|
-
const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
|
|
115
|
-
return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
|
|
116
|
-
} else {
|
|
117
|
-
const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
|
|
118
|
-
return styles2 ? [styles2] : [];
|
|
119
|
-
}
|
|
120
|
-
}) : [];
|
|
121
|
-
const styles = css(baseStyles, ...variantStyles, ...overrides);
|
|
122
|
-
cache.set(cacheId, styles);
|
|
123
|
-
return styles;
|
|
82
|
+
cache.set(cacheId, overriddenStyles);
|
|
83
|
+
return overriddenStyles;
|
|
124
84
|
};
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
85
|
+
css2.compose = (config2) => {
|
|
86
|
+
const { variants, responsiveVariants, ...baseStyles } = config2;
|
|
87
|
+
return function generate(selectedVariants, ...overrides) {
|
|
88
|
+
const cacheId = JSON.stringify({
|
|
89
|
+
baseStyles,
|
|
90
|
+
variants,
|
|
91
|
+
responsiveVariants,
|
|
92
|
+
selectedVariants,
|
|
93
|
+
overrides
|
|
94
|
+
});
|
|
95
|
+
const cached = cache.get(cacheId);
|
|
96
|
+
if (cached)
|
|
97
|
+
return cached;
|
|
98
|
+
const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
|
|
99
|
+
var _a, _b, _c;
|
|
100
|
+
if (!variant)
|
|
101
|
+
return [];
|
|
102
|
+
const [type, bp] = key.split("_").reverse();
|
|
103
|
+
if (bp) {
|
|
104
|
+
const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
|
|
105
|
+
return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
|
|
106
|
+
} else {
|
|
107
|
+
const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
|
|
108
|
+
return styles2 ? [styles2] : [];
|
|
109
|
+
}
|
|
110
|
+
}) : [];
|
|
111
|
+
const styles = css2(baseStyles, ...variantStyles, ...overrides);
|
|
112
|
+
cache.set(cacheId, styles);
|
|
113
|
+
return styles;
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
return css2;
|
|
131
117
|
}
|
|
132
118
|
function overrideLonghands(style, tokenProperty2) {
|
|
133
|
-
const parts =
|
|
134
|
-
const longhands =
|
|
119
|
+
const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2);
|
|
120
|
+
const longhands = Tokenami__namespace.mapShorthandToLonghands.get(parts.alias) || [];
|
|
135
121
|
longhands.forEach((longhand) => {
|
|
136
|
-
const tokenPropertyLong =
|
|
122
|
+
const tokenPropertyLong = createLonghandProperty(tokenProperty2, longhand);
|
|
137
123
|
if (style[tokenPropertyLong])
|
|
138
124
|
delete style[tokenPropertyLong];
|
|
139
125
|
overrideLonghands(style, tokenPropertyLong);
|
|
140
126
|
});
|
|
141
127
|
}
|
|
142
|
-
function
|
|
143
|
-
const parts =
|
|
128
|
+
function createLonghandProperty(tokenProperty2, cssProperty) {
|
|
129
|
+
const parts = Tokenami__namespace.getTokenPropertySplit(tokenProperty2);
|
|
144
130
|
const aliasRegex = new RegExp(`${parts.alias}$`);
|
|
145
131
|
return tokenProperty2.replace(aliasRegex, cssProperty);
|
|
146
132
|
}
|
|
147
133
|
function convertToMediaStyles(bp, styles) {
|
|
148
134
|
const updatedEntries = Object.entries(styles).map(([property, value]) => {
|
|
149
|
-
const tokenPrefix =
|
|
150
|
-
const bpPrefix =
|
|
135
|
+
const tokenPrefix = Tokenami__namespace.tokenProperty("");
|
|
136
|
+
const bpPrefix = Tokenami__namespace.parsedVariantProperty(bp, "");
|
|
151
137
|
const bpProperty = property.replace(tokenPrefix, bpPrefix);
|
|
152
138
|
return [bpProperty, value];
|
|
153
139
|
});
|
|
154
140
|
return Object.fromEntries(updatedEntries);
|
|
155
141
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
142
|
+
var css = createCss(Tokenami__namespace.defaultConfig, { escapeSpecialChars: true });
|
|
143
|
+
|
|
144
|
+
Object.defineProperty(exports, "createConfig", {
|
|
145
|
+
enumerable: true,
|
|
146
|
+
get: function () { return Tokenami.createConfig; }
|
|
147
|
+
});
|
|
148
|
+
Object.defineProperty(exports, "defaultConfig", {
|
|
149
|
+
enumerable: true,
|
|
150
|
+
get: function () { return Tokenami.defaultConfig; }
|
|
162
151
|
});
|
|
152
|
+
exports.createCss = createCss;
|
|
153
|
+
exports.css = css;
|
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,6 @@ import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
|
|
|
2
2
|
import * as Tokenami from '@tokenami/config';
|
|
3
3
|
export { createConfig, defaultConfig } from '@tokenami/config';
|
|
4
4
|
|
|
5
|
-
declare const _ALIASES: unique symbol;
|
|
6
5
|
type TokenamiCSS = {
|
|
7
6
|
[_: symbol]: 'TokenamiCSS';
|
|
8
7
|
};
|
|
@@ -24,12 +23,21 @@ type ComposeCSS<V, R> = TokenamiProperties & {
|
|
|
24
23
|
responsiveVariants?: R & VariantsConfig;
|
|
25
24
|
};
|
|
26
25
|
interface CSS {
|
|
27
|
-
[_ALIASES]?: Tokenami.Aliases;
|
|
28
26
|
(baseStyles: TokenamiProperties, ...overrides: Override[]): TokenamiCSS;
|
|
29
27
|
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;
|
|
30
28
|
}
|
|
29
|
+
type CreateCssOptions = {
|
|
30
|
+
/**
|
|
31
|
+
* When using arbitrary values, Tokenami will escape special characters. Some frameworks
|
|
32
|
+
* automatically escape so this would result in double-escaping. In that case, switch this
|
|
33
|
+
* off to hand-off to your framework.
|
|
34
|
+
*
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
escapeSpecialChars?: boolean;
|
|
38
|
+
};
|
|
39
|
+
declare function createCss(config: Tokenami.Config, options?: CreateCssOptions): CSS;
|
|
31
40
|
declare const css: CSS;
|
|
32
|
-
declare function createCss(config: Tokenami.Config): CSS;
|
|
33
41
|
|
|
34
42
|
type TokenamiStyle<P> = {
|
|
35
43
|
[K in keyof P]: K extends 'style' ? TokenamiCSS & P[K] : P[K];
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
|
|
|
2
2
|
import * as Tokenami from '@tokenami/config';
|
|
3
3
|
export { createConfig, defaultConfig } from '@tokenami/config';
|
|
4
4
|
|
|
5
|
-
declare const _ALIASES: unique symbol;
|
|
6
5
|
type TokenamiCSS = {
|
|
7
6
|
[_: symbol]: 'TokenamiCSS';
|
|
8
7
|
};
|
|
@@ -24,12 +23,21 @@ type ComposeCSS<V, R> = TokenamiProperties & {
|
|
|
24
23
|
responsiveVariants?: R & VariantsConfig;
|
|
25
24
|
};
|
|
26
25
|
interface CSS {
|
|
27
|
-
[_ALIASES]?: Tokenami.Aliases;
|
|
28
26
|
(baseStyles: TokenamiProperties, ...overrides: Override[]): TokenamiCSS;
|
|
29
27
|
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;
|
|
30
28
|
}
|
|
29
|
+
type CreateCssOptions = {
|
|
30
|
+
/**
|
|
31
|
+
* When using arbitrary values, Tokenami will escape special characters. Some frameworks
|
|
32
|
+
* automatically escape so this would result in double-escaping. In that case, switch this
|
|
33
|
+
* off to hand-off to your framework.
|
|
34
|
+
*
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
escapeSpecialChars?: boolean;
|
|
38
|
+
};
|
|
39
|
+
declare function createCss(config: Tokenami.Config, options?: CreateCssOptions): CSS;
|
|
31
40
|
declare const css: CSS;
|
|
32
|
-
declare function createCss(config: Tokenami.Config): CSS;
|
|
33
41
|
|
|
34
42
|
type TokenamiStyle<P> = {
|
|
35
43
|
[K in keyof P]: K extends 'style' ? TokenamiCSS & P[K] : P[K];
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as Tokenami from '@tokenami/config';
|
|
2
|
+
export { createConfig, defaultConfig } from '@tokenami/config';
|
|
3
3
|
|
|
4
|
-
// src/
|
|
5
|
-
|
|
6
|
-
var _ALIASES = Symbol();
|
|
4
|
+
// src/index.ts
|
|
5
|
+
var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
|
|
7
6
|
var cache = {
|
|
8
7
|
limit: 500,
|
|
9
8
|
cache: /* @__PURE__ */ new Map(),
|
|
@@ -25,84 +24,87 @@ var cache = {
|
|
|
25
24
|
this.cache.set(key, value);
|
|
26
25
|
}
|
|
27
26
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (
|
|
36
|
-
return;
|
|
37
|
-
|
|
38
|
-
if (!
|
|
27
|
+
function createCss(config, options) {
|
|
28
|
+
globalThis[_TOKENAMI_CSS] = options || {};
|
|
29
|
+
const globalOptions = globalThis[_TOKENAMI_CSS];
|
|
30
|
+
const css2 = (baseStyles, ...overrides) => {
|
|
31
|
+
let overriddenStyles = {};
|
|
32
|
+
const cacheId = JSON.stringify({ baseStyles, overrides });
|
|
33
|
+
const cached = cache.get(cacheId);
|
|
34
|
+
if (cached)
|
|
35
|
+
return cached;
|
|
36
|
+
[baseStyles, ...overrides].forEach((originalStyles) => {
|
|
37
|
+
if (!originalStyles)
|
|
39
38
|
return;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
if (typeof value === "number" && value > 0) {
|
|
46
|
-
const gridVar = Tokenami.gridProperty();
|
|
47
|
-
value = `calc(var(${gridVar}) * ${value})`;
|
|
39
|
+
Object.entries(originalStyles).forEach(([key, value]) => {
|
|
40
|
+
const tokenProperty2 = Tokenami.TokenProperty.safeParse(key);
|
|
41
|
+
if (!tokenProperty2.success) {
|
|
42
|
+
Object.assign(overriddenStyles, { [key]: value });
|
|
43
|
+
return;
|
|
48
44
|
}
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2.output);
|
|
46
|
+
const cssProperties = Tokenami.getCSSPropertiesForAlias(parts.alias, config.aliases);
|
|
47
|
+
cssProperties.forEach((cssProperty) => {
|
|
48
|
+
const long = createLonghandProperty(tokenProperty2.output, cssProperty);
|
|
49
|
+
const tokenPropertyLong = Tokenami.parseProperty(long, {
|
|
50
|
+
escapeSpecialChars: globalOptions == null ? void 0 : globalOptions.escapeSpecialChars
|
|
51
|
+
});
|
|
52
|
+
if (typeof value === "number" && value > 0) {
|
|
53
|
+
const gridVar = Tokenami.gridProperty();
|
|
54
|
+
value = `calc(var(${gridVar}) * ${value})`;
|
|
55
|
+
}
|
|
56
|
+
overrideLonghands(overriddenStyles, tokenPropertyLong);
|
|
57
|
+
Object.assign(overriddenStyles, { [tokenPropertyLong]: value });
|
|
58
|
+
});
|
|
51
59
|
});
|
|
52
60
|
});
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return overriddenStyles;
|
|
56
|
-
};
|
|
57
|
-
css[_ALIASES] = {};
|
|
58
|
-
css.compose = (config) => {
|
|
59
|
-
const { variants, responsiveVariants, ...baseStyles } = config;
|
|
60
|
-
return function generate(selectedVariants, ...overrides) {
|
|
61
|
-
const cacheId = JSON.stringify({
|
|
62
|
-
baseStyles,
|
|
63
|
-
variants,
|
|
64
|
-
responsiveVariants,
|
|
65
|
-
selectedVariants,
|
|
66
|
-
overrides
|
|
67
|
-
});
|
|
68
|
-
const cached = cache.get(cacheId);
|
|
69
|
-
if (cached)
|
|
70
|
-
return cached;
|
|
71
|
-
const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
|
|
72
|
-
var _a, _b, _c;
|
|
73
|
-
if (!variant)
|
|
74
|
-
return [];
|
|
75
|
-
const [type, bp] = key.split("_").reverse();
|
|
76
|
-
if (bp) {
|
|
77
|
-
const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
|
|
78
|
-
return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
|
|
79
|
-
} else {
|
|
80
|
-
const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
|
|
81
|
-
return styles2 ? [styles2] : [];
|
|
82
|
-
}
|
|
83
|
-
}) : [];
|
|
84
|
-
const styles = css(baseStyles, ...variantStyles, ...overrides);
|
|
85
|
-
cache.set(cacheId, styles);
|
|
86
|
-
return styles;
|
|
61
|
+
cache.set(cacheId, overriddenStyles);
|
|
62
|
+
return overriddenStyles;
|
|
87
63
|
};
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
64
|
+
css2.compose = (config2) => {
|
|
65
|
+
const { variants, responsiveVariants, ...baseStyles } = config2;
|
|
66
|
+
return function generate(selectedVariants, ...overrides) {
|
|
67
|
+
const cacheId = JSON.stringify({
|
|
68
|
+
baseStyles,
|
|
69
|
+
variants,
|
|
70
|
+
responsiveVariants,
|
|
71
|
+
selectedVariants,
|
|
72
|
+
overrides
|
|
73
|
+
});
|
|
74
|
+
const cached = cache.get(cacheId);
|
|
75
|
+
if (cached)
|
|
76
|
+
return cached;
|
|
77
|
+
const variantStyles = selectedVariants ? Object.entries(selectedVariants).flatMap(([key, variant]) => {
|
|
78
|
+
var _a, _b, _c;
|
|
79
|
+
if (!variant)
|
|
80
|
+
return [];
|
|
81
|
+
const [type, bp] = key.split("_").reverse();
|
|
82
|
+
if (bp) {
|
|
83
|
+
const styles2 = (_a = responsiveVariants == null ? void 0 : responsiveVariants[type]) == null ? void 0 : _a[variant];
|
|
84
|
+
return styles2 ? [convertToMediaStyles(bp, styles2)] : [];
|
|
85
|
+
} else {
|
|
86
|
+
const styles2 = (_c = (_b = variants || responsiveVariants) == null ? void 0 : _b[type]) == null ? void 0 : _c[variant];
|
|
87
|
+
return styles2 ? [styles2] : [];
|
|
88
|
+
}
|
|
89
|
+
}) : [];
|
|
90
|
+
const styles = css2(baseStyles, ...variantStyles, ...overrides);
|
|
91
|
+
cache.set(cacheId, styles);
|
|
92
|
+
return styles;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
return css2;
|
|
94
96
|
}
|
|
95
97
|
function overrideLonghands(style, tokenProperty2) {
|
|
96
98
|
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
97
|
-
const longhands = Tokenami.mapShorthandToLonghands
|
|
99
|
+
const longhands = Tokenami.mapShorthandToLonghands.get(parts.alias) || [];
|
|
98
100
|
longhands.forEach((longhand) => {
|
|
99
|
-
const tokenPropertyLong =
|
|
101
|
+
const tokenPropertyLong = createLonghandProperty(tokenProperty2, longhand);
|
|
100
102
|
if (style[tokenPropertyLong])
|
|
101
103
|
delete style[tokenPropertyLong];
|
|
102
104
|
overrideLonghands(style, tokenPropertyLong);
|
|
103
105
|
});
|
|
104
106
|
}
|
|
105
|
-
function
|
|
107
|
+
function createLonghandProperty(tokenProperty2, cssProperty) {
|
|
106
108
|
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
107
109
|
const aliasRegex = new RegExp(`${parts.alias}$`);
|
|
108
110
|
return tokenProperty2.replace(aliasRegex, cssProperty);
|
|
@@ -110,15 +112,12 @@ function createTokenProperty(tokenProperty2, cssProperty) {
|
|
|
110
112
|
function convertToMediaStyles(bp, styles) {
|
|
111
113
|
const updatedEntries = Object.entries(styles).map(([property, value]) => {
|
|
112
114
|
const tokenPrefix = Tokenami.tokenProperty("");
|
|
113
|
-
const bpPrefix = Tokenami.
|
|
115
|
+
const bpPrefix = Tokenami.parsedVariantProperty(bp, "");
|
|
114
116
|
const bpProperty = property.replace(tokenPrefix, bpPrefix);
|
|
115
117
|
return [bpProperty, value];
|
|
116
118
|
});
|
|
117
119
|
return Object.fromEntries(updatedEntries);
|
|
118
120
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
css,
|
|
123
|
-
defaultConfig
|
|
124
|
-
};
|
|
121
|
+
var css = createCss(Tokenami.defaultConfig, { escapeSpecialChars: true });
|
|
122
|
+
|
|
123
|
+
export { createCss, css };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tokenami/css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.53",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -25,17 +25,17 @@
|
|
|
25
25
|
],
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "tsup",
|
|
28
|
-
"dev": "
|
|
28
|
+
"dev": "tsup --watch src",
|
|
29
29
|
"typecheck": "tsc --noEmit",
|
|
30
|
-
"typecheck:ci": "
|
|
30
|
+
"typecheck:ci": "tsc --noEmit",
|
|
31
31
|
"test": "vitest --run",
|
|
32
32
|
"test:watch": "vitest"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@tokenami/config": "0.0.
|
|
35
|
+
"@tokenami/config": "0.0.53"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tokenami/dev": "0.0.
|
|
38
|
+
"@tokenami/dev": "0.0.53",
|
|
39
39
|
"tsup": "^7.0.0",
|
|
40
40
|
"typescript": "^5.1.3",
|
|
41
41
|
"vitest": "^0.34.6"
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"@tokenami/dev": ">= 0",
|
|
45
45
|
"typescript": ">= 5"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "7b292164afcd54fe34906e099682ddc294d0f535"
|
|
48
48
|
}
|