@tokenami/css 0.0.81 → 0.0.82--canary.431.14137117559.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.
- package/dist/index.cjs +27 -37
- package/dist/index.js +27 -37
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -24,25 +24,26 @@ var Tokenami__namespace = /*#__PURE__*/_interopNamespace(Tokenami);
|
|
|
24
24
|
|
|
25
25
|
// src/index.ts
|
|
26
26
|
var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
|
|
27
|
-
var
|
|
27
|
+
var composeStylesMap = /* @__PURE__ */ new WeakMap();
|
|
28
28
|
function createCss(config, options = { escapeSpecialChars: true }) {
|
|
29
29
|
globalThis[_TOKENAMI_CSS] = options;
|
|
30
30
|
function css2(...allStyles) {
|
|
31
31
|
const cacheId = generateCacheId(allStyles);
|
|
32
32
|
const cached = lruCache.get(cacheId);
|
|
33
|
-
if (cached)
|
|
34
|
-
return cached;
|
|
33
|
+
if (cached) return cached;
|
|
35
34
|
const opts = globalThis[_TOKENAMI_CSS];
|
|
36
|
-
const overriddenStyles = {
|
|
35
|
+
const overriddenStyles = {};
|
|
36
|
+
const overriddenComposeStyles = {};
|
|
37
|
+
composeStylesMap.set(overriddenStyles, overriddenComposeStyles);
|
|
37
38
|
for (const styles of allStyles) {
|
|
38
|
-
if (!styles)
|
|
39
|
-
|
|
40
|
-
const composeEntries = Object.entries(
|
|
39
|
+
if (!styles) continue;
|
|
40
|
+
const composeStyles = composeStylesMap.get(styles) ?? {};
|
|
41
|
+
const composeEntries = Object.entries(composeStyles);
|
|
41
42
|
const entries = [...composeEntries, ...Object.entries(styles)];
|
|
42
43
|
const aliasProperties = Tokenami__namespace.iterateAliasProperties(entries, config);
|
|
43
44
|
for (const [key, value, propertyConfig] of aliasProperties) {
|
|
44
45
|
const tokenProperty = Tokenami__namespace.TokenProperty.safeParse(key);
|
|
45
|
-
const isComposedProperty =
|
|
46
|
+
const isComposedProperty = composeStyles[key] != null;
|
|
46
47
|
if (!tokenProperty.success) {
|
|
47
48
|
overriddenStyles[key] = value;
|
|
48
49
|
continue;
|
|
@@ -52,14 +53,11 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
52
53
|
const parsedProperty = Tokenami__namespace.parseProperty(longProperty, opts);
|
|
53
54
|
const calcToggle = Tokenami__namespace.calcProperty(parsedProperty);
|
|
54
55
|
overrideLonghands(overriddenStyles, parsedProperty);
|
|
55
|
-
const target = isComposedProperty &&
|
|
56
|
+
const target = isComposedProperty && overriddenComposeStyles[parsedProperty] == null ? overriddenComposeStyles : overriddenStyles;
|
|
56
57
|
target[parsedProperty] = value;
|
|
57
|
-
if (isComposedProperty)
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
overriddenStyles[calcToggle] = "/*on*/";
|
|
61
|
-
else
|
|
62
|
-
delete overriddenStyles[calcToggle];
|
|
58
|
+
if (isComposedProperty) continue;
|
|
59
|
+
if (propertyConfig.isCalc) overriddenStyles[calcToggle] = "/*on*/";
|
|
60
|
+
else delete overriddenStyles[calcToggle];
|
|
63
61
|
}
|
|
64
62
|
}
|
|
65
63
|
}
|
|
@@ -70,10 +68,9 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
70
68
|
const { includes = [], variants, ...baseStyles } = styleConfig;
|
|
71
69
|
const className = Tokenami__namespace.generateClassName(baseStyles);
|
|
72
70
|
return function generate(selectedVariants = {}) {
|
|
73
|
-
const cacheId = generateCacheId(
|
|
71
|
+
const cacheId = generateCacheId([baseStyles, variants, selectedVariants, ...includes]);
|
|
74
72
|
const cached = lruCache.get(cacheId);
|
|
75
|
-
if (cached)
|
|
76
|
-
return cached;
|
|
73
|
+
if (cached) return cached;
|
|
77
74
|
const selectedVariantsEntries = Object.entries(selectedVariants);
|
|
78
75
|
let variantStyles = [];
|
|
79
76
|
let includeStyles = [];
|
|
@@ -89,13 +86,13 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
89
86
|
}
|
|
90
87
|
for (const [key, variant] of selectedVariantsEntries) {
|
|
91
88
|
const variantValue = variants?.[key]?.[variant];
|
|
92
|
-
if (variantValue)
|
|
93
|
-
variantStyles.push(variantValue);
|
|
89
|
+
if (variantValue) variantStyles.push(variantValue);
|
|
94
90
|
}
|
|
95
91
|
const result = [
|
|
96
92
|
cn.bind(null, ...includeClassNames, className),
|
|
97
93
|
(...overrides) => {
|
|
98
|
-
const styles = {
|
|
94
|
+
const styles = {};
|
|
95
|
+
composeStylesMap.set(styles, baseStyles);
|
|
99
96
|
const base = css2(styles, ...variantStyles, ...overrides);
|
|
100
97
|
return css2.apply(null, [...includeStyles, base]);
|
|
101
98
|
}
|
|
@@ -106,15 +103,10 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
106
103
|
};
|
|
107
104
|
return css2;
|
|
108
105
|
}
|
|
109
|
-
function generateCacheId(
|
|
110
|
-
return JSON.stringify(
|
|
111
|
-
if (typeof value === "object" && value !== null) {
|
|
112
|
-
|
|
113
|
-
const symbols = Object.getOwnPropertySymbols(value);
|
|
114
|
-
for (const sym of symbols) {
|
|
115
|
-
newValue[sym.toString()] = value[sym];
|
|
116
|
-
}
|
|
117
|
-
return newValue;
|
|
106
|
+
function generateCacheId(objs) {
|
|
107
|
+
return JSON.stringify(objs, (_, value) => {
|
|
108
|
+
if (typeof value === "object" && value !== null && composeStylesMap.has(value)) {
|
|
109
|
+
return { ...value, ...composeStylesMap.get(value) };
|
|
118
110
|
}
|
|
119
111
|
return value;
|
|
120
112
|
});
|
|
@@ -124,16 +116,14 @@ var lruCache = {
|
|
|
124
116
|
cache: /* @__PURE__ */ new Map(),
|
|
125
117
|
get(key) {
|
|
126
118
|
const value = this.cache.get(key);
|
|
127
|
-
if (!value)
|
|
128
|
-
return;
|
|
119
|
+
if (!value) return;
|
|
129
120
|
this.cache.delete(key);
|
|
130
121
|
this.cache.set(key, value);
|
|
131
122
|
return value;
|
|
132
123
|
},
|
|
133
124
|
set(key, value) {
|
|
134
125
|
this.cache.delete(key);
|
|
135
|
-
if (this.cache.size === this.limit)
|
|
136
|
-
this.cache.delete(this.cache.keys().next().value);
|
|
126
|
+
if (this.cache.size === this.limit) this.cache.delete(this.cache.keys().next().value);
|
|
137
127
|
this.cache.set(key, value);
|
|
138
128
|
}
|
|
139
129
|
};
|
|
@@ -146,11 +136,11 @@ function overrideLonghands(style, tokenProperty) {
|
|
|
146
136
|
for (const longhand of longhands) {
|
|
147
137
|
const tokenPropertyLong = Tokenami__namespace.createLonghandProperty(tokenProperty, longhand);
|
|
148
138
|
const calcProp = Tokenami__namespace.calcProperty(tokenPropertyLong);
|
|
149
|
-
const
|
|
139
|
+
const composeStyles = composeStylesMap.get(style);
|
|
140
|
+
const composedValue = composeStyles?.[tokenPropertyLong];
|
|
150
141
|
if (composedValue) {
|
|
151
142
|
const value = composedValue ?? style[tokenPropertyLong];
|
|
152
|
-
if (typeof value === "number")
|
|
153
|
-
style[calcProp] = "initial";
|
|
143
|
+
if (typeof value === "number") style[calcProp] = "initial";
|
|
154
144
|
style[tokenPropertyLong] = "initial";
|
|
155
145
|
} else {
|
|
156
146
|
delete style[tokenPropertyLong];
|
package/dist/index.js
CHANGED
|
@@ -3,25 +3,26 @@ export { createConfig } from '@tokenami/config';
|
|
|
3
3
|
|
|
4
4
|
// src/index.ts
|
|
5
5
|
var _TOKENAMI_CSS = Symbol.for("@tokenami/css");
|
|
6
|
-
var
|
|
6
|
+
var composeStylesMap = /* @__PURE__ */ new WeakMap();
|
|
7
7
|
function createCss(config, options = { escapeSpecialChars: true }) {
|
|
8
8
|
globalThis[_TOKENAMI_CSS] = options;
|
|
9
9
|
function css2(...allStyles) {
|
|
10
10
|
const cacheId = generateCacheId(allStyles);
|
|
11
11
|
const cached = lruCache.get(cacheId);
|
|
12
|
-
if (cached)
|
|
13
|
-
return cached;
|
|
12
|
+
if (cached) return cached;
|
|
14
13
|
const opts = globalThis[_TOKENAMI_CSS];
|
|
15
|
-
const overriddenStyles = {
|
|
14
|
+
const overriddenStyles = {};
|
|
15
|
+
const overriddenComposeStyles = {};
|
|
16
|
+
composeStylesMap.set(overriddenStyles, overriddenComposeStyles);
|
|
16
17
|
for (const styles of allStyles) {
|
|
17
|
-
if (!styles)
|
|
18
|
-
|
|
19
|
-
const composeEntries = Object.entries(
|
|
18
|
+
if (!styles) continue;
|
|
19
|
+
const composeStyles = composeStylesMap.get(styles) ?? {};
|
|
20
|
+
const composeEntries = Object.entries(composeStyles);
|
|
20
21
|
const entries = [...composeEntries, ...Object.entries(styles)];
|
|
21
22
|
const aliasProperties = Tokenami.iterateAliasProperties(entries, config);
|
|
22
23
|
for (const [key, value, propertyConfig] of aliasProperties) {
|
|
23
24
|
const tokenProperty = Tokenami.TokenProperty.safeParse(key);
|
|
24
|
-
const isComposedProperty =
|
|
25
|
+
const isComposedProperty = composeStyles[key] != null;
|
|
25
26
|
if (!tokenProperty.success) {
|
|
26
27
|
overriddenStyles[key] = value;
|
|
27
28
|
continue;
|
|
@@ -31,14 +32,11 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
31
32
|
const parsedProperty = Tokenami.parseProperty(longProperty, opts);
|
|
32
33
|
const calcToggle = Tokenami.calcProperty(parsedProperty);
|
|
33
34
|
overrideLonghands(overriddenStyles, parsedProperty);
|
|
34
|
-
const target = isComposedProperty &&
|
|
35
|
+
const target = isComposedProperty && overriddenComposeStyles[parsedProperty] == null ? overriddenComposeStyles : overriddenStyles;
|
|
35
36
|
target[parsedProperty] = value;
|
|
36
|
-
if (isComposedProperty)
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
overriddenStyles[calcToggle] = "/*on*/";
|
|
40
|
-
else
|
|
41
|
-
delete overriddenStyles[calcToggle];
|
|
37
|
+
if (isComposedProperty) continue;
|
|
38
|
+
if (propertyConfig.isCalc) overriddenStyles[calcToggle] = "/*on*/";
|
|
39
|
+
else delete overriddenStyles[calcToggle];
|
|
42
40
|
}
|
|
43
41
|
}
|
|
44
42
|
}
|
|
@@ -49,10 +47,9 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
49
47
|
const { includes = [], variants, ...baseStyles } = styleConfig;
|
|
50
48
|
const className = Tokenami.generateClassName(baseStyles);
|
|
51
49
|
return function generate(selectedVariants = {}) {
|
|
52
|
-
const cacheId = generateCacheId(
|
|
50
|
+
const cacheId = generateCacheId([baseStyles, variants, selectedVariants, ...includes]);
|
|
53
51
|
const cached = lruCache.get(cacheId);
|
|
54
|
-
if (cached)
|
|
55
|
-
return cached;
|
|
52
|
+
if (cached) return cached;
|
|
56
53
|
const selectedVariantsEntries = Object.entries(selectedVariants);
|
|
57
54
|
let variantStyles = [];
|
|
58
55
|
let includeStyles = [];
|
|
@@ -68,13 +65,13 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
68
65
|
}
|
|
69
66
|
for (const [key, variant] of selectedVariantsEntries) {
|
|
70
67
|
const variantValue = variants?.[key]?.[variant];
|
|
71
|
-
if (variantValue)
|
|
72
|
-
variantStyles.push(variantValue);
|
|
68
|
+
if (variantValue) variantStyles.push(variantValue);
|
|
73
69
|
}
|
|
74
70
|
const result = [
|
|
75
71
|
cn.bind(null, ...includeClassNames, className),
|
|
76
72
|
(...overrides) => {
|
|
77
|
-
const styles = {
|
|
73
|
+
const styles = {};
|
|
74
|
+
composeStylesMap.set(styles, baseStyles);
|
|
78
75
|
const base = css2(styles, ...variantStyles, ...overrides);
|
|
79
76
|
return css2.apply(null, [...includeStyles, base]);
|
|
80
77
|
}
|
|
@@ -85,15 +82,10 @@ function createCss(config, options = { escapeSpecialChars: true }) {
|
|
|
85
82
|
};
|
|
86
83
|
return css2;
|
|
87
84
|
}
|
|
88
|
-
function generateCacheId(
|
|
89
|
-
return JSON.stringify(
|
|
90
|
-
if (typeof value === "object" && value !== null) {
|
|
91
|
-
|
|
92
|
-
const symbols = Object.getOwnPropertySymbols(value);
|
|
93
|
-
for (const sym of symbols) {
|
|
94
|
-
newValue[sym.toString()] = value[sym];
|
|
95
|
-
}
|
|
96
|
-
return newValue;
|
|
85
|
+
function generateCacheId(objs) {
|
|
86
|
+
return JSON.stringify(objs, (_, value) => {
|
|
87
|
+
if (typeof value === "object" && value !== null && composeStylesMap.has(value)) {
|
|
88
|
+
return { ...value, ...composeStylesMap.get(value) };
|
|
97
89
|
}
|
|
98
90
|
return value;
|
|
99
91
|
});
|
|
@@ -103,16 +95,14 @@ var lruCache = {
|
|
|
103
95
|
cache: /* @__PURE__ */ new Map(),
|
|
104
96
|
get(key) {
|
|
105
97
|
const value = this.cache.get(key);
|
|
106
|
-
if (!value)
|
|
107
|
-
return;
|
|
98
|
+
if (!value) return;
|
|
108
99
|
this.cache.delete(key);
|
|
109
100
|
this.cache.set(key, value);
|
|
110
101
|
return value;
|
|
111
102
|
},
|
|
112
103
|
set(key, value) {
|
|
113
104
|
this.cache.delete(key);
|
|
114
|
-
if (this.cache.size === this.limit)
|
|
115
|
-
this.cache.delete(this.cache.keys().next().value);
|
|
105
|
+
if (this.cache.size === this.limit) this.cache.delete(this.cache.keys().next().value);
|
|
116
106
|
this.cache.set(key, value);
|
|
117
107
|
}
|
|
118
108
|
};
|
|
@@ -125,11 +115,11 @@ function overrideLonghands(style, tokenProperty) {
|
|
|
125
115
|
for (const longhand of longhands) {
|
|
126
116
|
const tokenPropertyLong = Tokenami.createLonghandProperty(tokenProperty, longhand);
|
|
127
117
|
const calcProp = Tokenami.calcProperty(tokenPropertyLong);
|
|
128
|
-
const
|
|
118
|
+
const composeStyles = composeStylesMap.get(style);
|
|
119
|
+
const composedValue = composeStyles?.[tokenPropertyLong];
|
|
129
120
|
if (composedValue) {
|
|
130
121
|
const value = composedValue ?? style[tokenPropertyLong];
|
|
131
|
-
if (typeof value === "number")
|
|
132
|
-
style[calcProp] = "initial";
|
|
122
|
+
if (typeof value === "number") style[calcProp] = "initial";
|
|
133
123
|
style[tokenPropertyLong] = "initial";
|
|
134
124
|
} else {
|
|
135
125
|
delete style[tokenPropertyLong];
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tokenami/css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.82--canary.431.14137117559.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
-
"repository": "
|
|
9
|
+
"repository": "tokenami/tokenami",
|
|
10
10
|
"sideEffects": false,
|
|
11
11
|
"publishConfig": {
|
|
12
12
|
"access": "public"
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
"test:watch": "vitest"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@tokenami/config": "0.0.
|
|
37
|
+
"@tokenami/config": "0.0.82--canary.431.14137117559.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"tokenami": "0.0.
|
|
41
|
-
"tsup": "^
|
|
40
|
+
"tokenami": "0.0.82--canary.431.14137117559.0",
|
|
41
|
+
"tsup": "^8.4.0",
|
|
42
42
|
"typescript": "^5.1.3",
|
|
43
43
|
"vitest": "^0.34.6"
|
|
44
44
|
},
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"tokenami": ">= 0",
|
|
47
47
|
"typescript": ">= 5"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "b79cde9b67d6b9eecfc010f49bbe3c92f905dfb6"
|
|
50
50
|
}
|