@tokenami/css 0.0.24 → 0.0.26
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 +38 -29
- package/dist/index.d.cts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +38 -29
- package/package.json +5 -4
package/dist/index.cjs
CHANGED
|
@@ -40,35 +40,42 @@ var import_config = require("@tokenami/config");
|
|
|
40
40
|
|
|
41
41
|
// src/css.ts
|
|
42
42
|
var Tokenami = __toESM(require("@tokenami/config"), 1);
|
|
43
|
-
var
|
|
43
|
+
var _ALIASES = Symbol();
|
|
44
44
|
var cache = {};
|
|
45
45
|
var css = (baseStyles, ...overrides) => {
|
|
46
|
+
let overriddenStyles = {};
|
|
46
47
|
const cacheId = JSON.stringify({ baseStyles, overrides });
|
|
47
48
|
const cached = cache[cacheId];
|
|
48
49
|
if (cached)
|
|
49
50
|
return cached;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
if (!overrideStyle)
|
|
51
|
+
[baseStyles, ...overrides].forEach((originalOverrideStyle) => {
|
|
52
|
+
if (!originalOverrideStyle)
|
|
53
53
|
return;
|
|
54
|
-
|
|
54
|
+
let overrideStyle = Object.assign({}, originalOverrideStyle);
|
|
55
|
+
Object.entries(overrideStyle).forEach(([key, value]) => {
|
|
56
|
+
if (!Tokenami.TokenProperty.safeParse(key).success)
|
|
57
|
+
return;
|
|
55
58
|
const tokenProperty2 = key;
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
60
|
+
const cssProperties = Tokenami.getCSSPropertiesForAlias(parts.alias, css[_ALIASES]);
|
|
61
|
+
cssProperties.forEach((cssProperty) => {
|
|
62
|
+
const tokenPropertyLong = createTokenProperty(tokenProperty2, cssProperty);
|
|
63
|
+
delete overrideStyle[tokenProperty2];
|
|
64
|
+
overrideLonghands(overriddenStyles, tokenPropertyLong);
|
|
65
|
+
if (typeof value === "number" && value > 0) {
|
|
66
|
+
const gridVar = Tokenami.gridProperty();
|
|
67
|
+
overrideStyle[tokenPropertyLong] = `calc(var(${gridVar}) * ${value})`;
|
|
68
|
+
} else {
|
|
69
|
+
overrideStyle[tokenPropertyLong] = value;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
59
73
|
Object.assign(overriddenStyles, overrideStyle);
|
|
60
74
|
});
|
|
61
|
-
Object.entries(overriddenStyles).forEach(([property, value]) => {
|
|
62
|
-
const tokenProperty2 = Tokenami.TokenProperty.safeParse(property);
|
|
63
|
-
if (tokenProperty2.success && typeof value === "number" && value > 0) {
|
|
64
|
-
const gridVar = Tokenami.gridProperty();
|
|
65
|
-
overriddenStyles[tokenProperty2.output] = `calc(var(${gridVar}) * ${value})`;
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
75
|
cache[cacheId] = overriddenStyles;
|
|
69
76
|
return overriddenStyles;
|
|
70
77
|
};
|
|
71
|
-
css[
|
|
78
|
+
css[_ALIASES] = {};
|
|
72
79
|
css.compose = (config) => {
|
|
73
80
|
const { variants, responsiveVariants, ...baseStyles } = config;
|
|
74
81
|
return function generate(selectedVariants, ...overrides) {
|
|
@@ -100,24 +107,26 @@ css.compose = (config) => {
|
|
|
100
107
|
return styles;
|
|
101
108
|
};
|
|
102
109
|
};
|
|
103
|
-
css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
|
|
104
110
|
function createCss(config) {
|
|
105
111
|
if (!config.aliases)
|
|
106
112
|
return css;
|
|
107
|
-
css[
|
|
113
|
+
css[_ALIASES] = config.aliases;
|
|
108
114
|
return css;
|
|
109
115
|
}
|
|
110
|
-
function
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
function overrideLonghands(style, tokenProperty2) {
|
|
117
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
118
|
+
const longhands = Tokenami.mapShorthandToLonghands[parts.alias] || [];
|
|
119
|
+
longhands.forEach((longhand) => {
|
|
120
|
+
const tokenPropertyLong = createTokenProperty(tokenProperty2, longhand);
|
|
121
|
+
if (style[tokenPropertyLong])
|
|
122
|
+
delete style[tokenPropertyLong];
|
|
123
|
+
overrideLonghands(style, tokenPropertyLong);
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function createTokenProperty(tokenProperty2, cssProperty) {
|
|
127
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
128
|
+
const aliasRegex = new RegExp(`${parts.alias}$`);
|
|
129
|
+
return tokenProperty2.replace(aliasRegex, cssProperty);
|
|
121
130
|
}
|
|
122
131
|
function convertToMediaStyles(bp, styles) {
|
|
123
132
|
const updatedEntries = Object.entries(styles).map(([property, value]) => {
|
package/dist/index.d.cts
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import * as Tokenami from '@tokenami/config';
|
|
2
2
|
export { createConfig, defaultConfig } from '@tokenami/config';
|
|
3
|
+
import * as CSSType from 'csstype';
|
|
3
4
|
import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
|
|
4
5
|
|
|
5
|
-
declare const
|
|
6
|
+
declare const _ALIASES: unique symbol;
|
|
7
|
+
type Properties = {
|
|
8
|
+
[K in keyof CSSType.Properties]: any;
|
|
9
|
+
} & {
|
|
10
|
+
[K in keyof CSSType.PropertiesHyphen]: any;
|
|
11
|
+
};
|
|
6
12
|
type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
|
|
7
13
|
type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
|
|
8
14
|
type ReponsiveKey = Extract<keyof TokenamiFinalConfig['responsive'], string>;
|
|
9
15
|
type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
|
|
10
|
-
type Override = TokenamiProperties | false | undefined;
|
|
16
|
+
type Override = TokenamiProperties | Properties | false | undefined;
|
|
11
17
|
type Variants$1<C> = undefined extends C ? {} : {
|
|
12
18
|
[V in keyof C]?: VariantValue<keyof C[V]>;
|
|
13
19
|
};
|
|
@@ -21,7 +27,7 @@ type ComposeCSS<V, R> = TokenamiProperties & {
|
|
|
21
27
|
responsiveVariants?: R & VariantsConfig;
|
|
22
28
|
};
|
|
23
29
|
interface CSS {
|
|
24
|
-
[
|
|
30
|
+
[_ALIASES]?: Tokenami.Aliases;
|
|
25
31
|
(baseStyles: TokenamiProperties, ...overrides: Override[]): {};
|
|
26
32
|
compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => {};
|
|
27
33
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import * as Tokenami from '@tokenami/config';
|
|
2
2
|
export { createConfig, defaultConfig } from '@tokenami/config';
|
|
3
|
+
import * as CSSType from 'csstype';
|
|
3
4
|
import { TokenamiProperties, TokenamiFinalConfig } from '@tokenami/dev';
|
|
4
5
|
|
|
5
|
-
declare const
|
|
6
|
+
declare const _ALIASES: unique symbol;
|
|
7
|
+
type Properties = {
|
|
8
|
+
[K in keyof CSSType.Properties]: any;
|
|
9
|
+
} & {
|
|
10
|
+
[K in keyof CSSType.PropertiesHyphen]: any;
|
|
11
|
+
};
|
|
6
12
|
type VariantsConfig = Record<string, Record<string, TokenamiProperties>>;
|
|
7
13
|
type VariantValue<T> = T extends 'true' | 'false' ? boolean : T;
|
|
8
14
|
type ReponsiveKey = Extract<keyof TokenamiFinalConfig['responsive'], string>;
|
|
9
15
|
type ResponsiveValue<T> = T extends string ? `${ReponsiveKey}_${T}` : never;
|
|
10
|
-
type Override = TokenamiProperties | false | undefined;
|
|
16
|
+
type Override = TokenamiProperties | Properties | false | undefined;
|
|
11
17
|
type Variants$1<C> = undefined extends C ? {} : {
|
|
12
18
|
[V in keyof C]?: VariantValue<keyof C[V]>;
|
|
13
19
|
};
|
|
@@ -21,7 +27,7 @@ type ComposeCSS<V, R> = TokenamiProperties & {
|
|
|
21
27
|
responsiveVariants?: R & VariantsConfig;
|
|
22
28
|
};
|
|
23
29
|
interface CSS {
|
|
24
|
-
[
|
|
30
|
+
[_ALIASES]?: Tokenami.Aliases;
|
|
25
31
|
(baseStyles: TokenamiProperties, ...overrides: Override[]): {};
|
|
26
32
|
compose: <V extends VariantsConfig | undefined, R extends VariantsConfig | undefined>(config: ComposeCSS<V, R>) => (selectedVariants?: Variants$1<V> & Variants$1<R> & ResponsiveVariants<R>, ...overrides: Override[]) => {};
|
|
27
33
|
}
|
package/dist/index.js
CHANGED
|
@@ -3,35 +3,42 @@ import { createConfig, defaultConfig } from "@tokenami/config";
|
|
|
3
3
|
|
|
4
4
|
// src/css.ts
|
|
5
5
|
import * as Tokenami from "@tokenami/config";
|
|
6
|
-
var
|
|
6
|
+
var _ALIASES = Symbol();
|
|
7
7
|
var cache = {};
|
|
8
8
|
var css = (baseStyles, ...overrides) => {
|
|
9
|
+
let overriddenStyles = {};
|
|
9
10
|
const cacheId = JSON.stringify({ baseStyles, overrides });
|
|
10
11
|
const cached = cache[cacheId];
|
|
11
12
|
if (cached)
|
|
12
13
|
return cached;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (!overrideStyle)
|
|
14
|
+
[baseStyles, ...overrides].forEach((originalOverrideStyle) => {
|
|
15
|
+
if (!originalOverrideStyle)
|
|
16
16
|
return;
|
|
17
|
-
|
|
17
|
+
let overrideStyle = Object.assign({}, originalOverrideStyle);
|
|
18
|
+
Object.entries(overrideStyle).forEach(([key, value]) => {
|
|
19
|
+
if (!Tokenami.TokenProperty.safeParse(key).success)
|
|
20
|
+
return;
|
|
18
21
|
const tokenProperty2 = key;
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
23
|
+
const cssProperties = Tokenami.getCSSPropertiesForAlias(parts.alias, css[_ALIASES]);
|
|
24
|
+
cssProperties.forEach((cssProperty) => {
|
|
25
|
+
const tokenPropertyLong = createTokenProperty(tokenProperty2, cssProperty);
|
|
26
|
+
delete overrideStyle[tokenProperty2];
|
|
27
|
+
overrideLonghands(overriddenStyles, tokenPropertyLong);
|
|
28
|
+
if (typeof value === "number" && value > 0) {
|
|
29
|
+
const gridVar = Tokenami.gridProperty();
|
|
30
|
+
overrideStyle[tokenPropertyLong] = `calc(var(${gridVar}) * ${value})`;
|
|
31
|
+
} else {
|
|
32
|
+
overrideStyle[tokenPropertyLong] = value;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
});
|
|
22
36
|
Object.assign(overriddenStyles, overrideStyle);
|
|
23
37
|
});
|
|
24
|
-
Object.entries(overriddenStyles).forEach(([property, value]) => {
|
|
25
|
-
const tokenProperty2 = Tokenami.TokenProperty.safeParse(property);
|
|
26
|
-
if (tokenProperty2.success && typeof value === "number" && value > 0) {
|
|
27
|
-
const gridVar = Tokenami.gridProperty();
|
|
28
|
-
overriddenStyles[tokenProperty2.output] = `calc(var(${gridVar}) * ${value})`;
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
38
|
cache[cacheId] = overriddenStyles;
|
|
32
39
|
return overriddenStyles;
|
|
33
40
|
};
|
|
34
|
-
css[
|
|
41
|
+
css[_ALIASES] = {};
|
|
35
42
|
css.compose = (config) => {
|
|
36
43
|
const { variants, responsiveVariants, ...baseStyles } = config;
|
|
37
44
|
return function generate(selectedVariants, ...overrides) {
|
|
@@ -63,24 +70,26 @@ css.compose = (config) => {
|
|
|
63
70
|
return styles;
|
|
64
71
|
};
|
|
65
72
|
};
|
|
66
|
-
css[_LONGHANDS] = Tokenami.mapShorthandToLonghands;
|
|
67
73
|
function createCss(config) {
|
|
68
74
|
if (!config.aliases)
|
|
69
75
|
return css;
|
|
70
|
-
css[
|
|
76
|
+
css[_ALIASES] = config.aliases;
|
|
71
77
|
return css;
|
|
72
78
|
}
|
|
73
|
-
function
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
function overrideLonghands(style, tokenProperty2) {
|
|
80
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
81
|
+
const longhands = Tokenami.mapShorthandToLonghands[parts.alias] || [];
|
|
82
|
+
longhands.forEach((longhand) => {
|
|
83
|
+
const tokenPropertyLong = createTokenProperty(tokenProperty2, longhand);
|
|
84
|
+
if (style[tokenPropertyLong])
|
|
85
|
+
delete style[tokenPropertyLong];
|
|
86
|
+
overrideLonghands(style, tokenPropertyLong);
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function createTokenProperty(tokenProperty2, cssProperty) {
|
|
90
|
+
const parts = Tokenami.getTokenPropertySplit(tokenProperty2);
|
|
91
|
+
const aliasRegex = new RegExp(`${parts.alias}$`);
|
|
92
|
+
return tokenProperty2.replace(aliasRegex, cssProperty);
|
|
84
93
|
}
|
|
85
94
|
function convertToMediaStyles(bp, styles) {
|
|
86
95
|
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.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -12,17 +12,18 @@
|
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"
|
|
15
|
+
"csstype": "^3.1.3",
|
|
16
|
+
"@tokenami/config": "0.0.26"
|
|
16
17
|
},
|
|
17
18
|
"devDependencies": {
|
|
18
19
|
"tsup": "^7.0.0",
|
|
19
20
|
"typescript": "^5.1.3",
|
|
20
21
|
"vitest": "^0.34.6",
|
|
21
|
-
"@tokenami/dev": "0.0.
|
|
22
|
+
"@tokenami/dev": "0.0.26"
|
|
22
23
|
},
|
|
23
24
|
"peerDependencies": {
|
|
24
25
|
"typescript": ">= 5",
|
|
25
|
-
"@tokenami/dev": "0.0.
|
|
26
|
+
"@tokenami/dev": "0.0.26"
|
|
26
27
|
},
|
|
27
28
|
"scripts": {
|
|
28
29
|
"build": "tsup",
|