@terrazzo/plugin-css 0.0.4 → 0.0.6
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/LICENSE +2 -2
- package/README.md +35 -3
- package/dist/build.js +2 -5
- package/dist/build.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +26 -8
- package/dist/index.js.map +1 -1
- package/dist/lib.d.ts +3 -0
- package/dist/lib.js.map +1 -1
- package/package.json +13 -15
- package/dist/transform.d.ts +0 -8
- package/dist/transform.js +0 -199
- package/dist/transform.js.map +0 -1
- package/src/build.ts +0 -108
- package/src/index.ts +0 -37
- package/src/lib.ts +0 -106
- package/src/transform.ts +0 -227
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2024 Drew Powers
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ⛋ @terrazzo/plugin-css
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Generate CSS from DTCG tokens.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
Requires [Node.js 18 or later](https://nodejs.org). With that installed, run:
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i -D @terrazzo/cli @terrazzo/plugin-css
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Add a `terrazzo.config.js` to the root of your project with:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { defineConfig } from "@terrazzo/cli";
|
|
17
|
+
import css from "@terrazzo/plugin-css";
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
outDir: "./tokens/",
|
|
21
|
+
plugins: [
|
|
22
|
+
css({
|
|
23
|
+
fileName: "tokens.css",
|
|
24
|
+
}),
|
|
25
|
+
],
|
|
26
|
+
});
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Lastly, run:
|
|
30
|
+
|
|
31
|
+
```sh
|
|
32
|
+
npx tz build
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
And you’ll see a `./tokens/tokens.css` file generated in your project.
|
|
36
|
+
|
|
37
|
+
[Full Documentation](https://terrazzo.app/docs/integrations/css)
|
package/dist/build.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { isTokenMatch } from '@terrazzo/token-tools';
|
|
2
2
|
import { generateShorthand } from '@terrazzo/token-tools/css';
|
|
3
|
-
import { printRules } from './lib.js';
|
|
3
|
+
import { printRules, FORMAT_ID } from './lib.js';
|
|
4
4
|
const P3_MQ = '@media (color-gamut: p3)';
|
|
5
5
|
const REC2020_MQ = '@media (color-gamut: rec2020)';
|
|
6
6
|
export default function buildFormat({ getTransforms, exclude, modeSelectors }) {
|
|
7
7
|
const rules = [];
|
|
8
8
|
// :root
|
|
9
|
-
const rootTokens = getTransforms({ format:
|
|
9
|
+
const rootTokens = getTransforms({ format: FORMAT_ID, mode: '.' });
|
|
10
10
|
if (rootTokens.length) {
|
|
11
11
|
const rootRule = { selectors: [':root'], declarations: {} };
|
|
12
12
|
// note: "nestedQuery" was designed specifically for higher-gamut colors to
|
|
@@ -61,9 +61,6 @@ export default function buildFormat({ getTransforms, exclude, modeSelectors }) {
|
|
|
61
61
|
const selectorRec2020Rule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
|
|
62
62
|
rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);
|
|
63
63
|
for (const token of selectorTokens) {
|
|
64
|
-
if (token.token.aliasOf) {
|
|
65
|
-
continue;
|
|
66
|
-
}
|
|
67
64
|
const localID = token.localID ?? token.token.id;
|
|
68
65
|
// single-value token
|
|
69
66
|
if (token.type === 'SINGLE_VALUE') {
|
package/dist/build.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAuC,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Plugin } from '@terrazzo/parser';
|
|
2
2
|
import { type CSSPluginOptions } from './lib.js';
|
|
3
|
+
export * from './build.js';
|
|
3
4
|
export * from './lib.js';
|
|
4
|
-
export default function cssPlugin({ filename, exclude, variableName, modeSelectors, }?: CSSPluginOptions): Plugin;
|
|
5
|
+
export default function cssPlugin({ filename, exclude, variableName, modeSelectors, transform: customTransform, }?: CSSPluginOptions): Plugin;
|
package/dist/index.js
CHANGED
|
@@ -22,22 +22,40 @@
|
|
|
22
22
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
23
23
|
* SOFTWARE.
|
|
24
24
|
*/
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import transformValue from './transform.js';
|
|
25
|
+
import { validateCustomTransform } from '@terrazzo/token-tools';
|
|
26
|
+
import { makeCSSVar, transformCSSValue } from '@terrazzo/token-tools/css';
|
|
28
27
|
import buildFormat from './build.js';
|
|
28
|
+
import { FILE_PREFIX, FORMAT_ID } from './lib.js';
|
|
29
|
+
export * from './build.js';
|
|
29
30
|
export * from './lib.js';
|
|
30
|
-
export default function cssPlugin({ filename = './index.css', exclude, variableName, modeSelectors, } = {}) {
|
|
31
|
+
export default function cssPlugin({ filename = './index.css', exclude, variableName, modeSelectors, transform: customTransform, } = {}) {
|
|
31
32
|
const transformName = (id) => variableName?.(id) || makeCSSVar(id);
|
|
32
33
|
const transformAlias = (id) => `var(${transformName(id)})`;
|
|
33
34
|
return {
|
|
34
35
|
name: '@terrazzo/plugin-css',
|
|
35
|
-
async transform({ tokens, setTransform }) {
|
|
36
|
+
async transform({ tokens, getTransforms, setTransform }) {
|
|
37
|
+
// skip work if another .css plugin has already run
|
|
38
|
+
const cssTokens = getTransforms({ format: FORMAT_ID, id: '*', mode: '*' });
|
|
39
|
+
if (cssTokens.length) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
36
42
|
for (const id in tokens) {
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
const token = tokens[id];
|
|
44
|
+
const localID = transformName(id);
|
|
45
|
+
for (const mode in token.mode) {
|
|
46
|
+
if (customTransform) {
|
|
47
|
+
const value = customTransform(token, mode);
|
|
48
|
+
if (value !== undefined && value !== null) {
|
|
49
|
+
validateCustomTransform(value, { $type: token.$type });
|
|
50
|
+
setTransform(id, { format: FORMAT_ID, localID, value, mode });
|
|
51
|
+
continue;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
const transformedValue = transformCSSValue(token, { mode, transformAlias });
|
|
55
|
+
if (transformedValue !== undefined) {
|
|
56
|
+
setTransform(id, { format: FORMAT_ID, localID, value: transformedValue, mode });
|
|
57
|
+
}
|
|
39
58
|
}
|
|
40
|
-
transformValue(tokens[id], { id, localID: transformName(id), setTransform, transformAlias });
|
|
41
59
|
}
|
|
42
60
|
},
|
|
43
61
|
async build({ getTransforms, outputFile }) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,WAAW,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAyB,MAAM,UAAU,CAAC;AAEzE,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,GAAG,aAAa,EACxB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,SAAS,EAAE,eAAe,MACN,EAAE;IACtB,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,IAAI,UAAU,CAAC,EAAE,CAAC,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,OAAO,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC;IAEnE,OAAO;QACL,IAAI,EAAE,sBAAsB;QAC5B,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE;YACrD,mDAAmD;YACnD,MAAM,SAAS,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;YAC3E,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,KAAK,MAAM,EAAE,IAAI,MAAM,EAAE,CAAC;gBACxB,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAE,CAAC;gBAC1B,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;gBAClC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;oBAC9B,IAAI,eAAe,EAAE,CAAC;wBACpB,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBAC3C,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;4BAC1C,uBAAuB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;4BACvD,YAAY,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;4BAC9D,SAAS;wBACX,CAAC;oBACH,CAAC;oBAED,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;oBAC5E,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;wBACnC,YAAY,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;oBAClF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QACD,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE;YACvC,MAAM,MAAM,GAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YAC3C,MAAM,CAAC,IAAI,CACT,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,EACtD,IAAI,CACL,CAAC;YACF,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1C,CAAC;KACF,CAAC;AACJ,CAAC"}
|
package/dist/lib.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { TokenNormalized, TokenTransformed } from '@terrazzo/parser';
|
|
1
2
|
export declare const FORMAT_ID = "css";
|
|
2
3
|
export declare const FILE_PREFIX = "/* -------------------------------------------\n * Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
|
|
3
4
|
export interface CSSPluginOptions {
|
|
@@ -9,6 +10,8 @@ export interface CSSPluginOptions {
|
|
|
9
10
|
modeSelectors?: ModeSelector[];
|
|
10
11
|
/** Control the final CSS variable name */
|
|
11
12
|
variableName?: (name: string) => string;
|
|
13
|
+
/** Override certain token values */
|
|
14
|
+
transform?: (token: TokenNormalized, mode: string) => TokenTransformed['value'];
|
|
12
15
|
}
|
|
13
16
|
export interface ModeSelector {
|
|
14
17
|
/** The name of the mode to match */
|
package/dist/lib.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,38 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@terrazzo/plugin-css",
|
|
3
|
+
"version": "0.0.6",
|
|
3
4
|
"description": "Generate CSS from your design tokens schema (requires @terrazzo/cli)",
|
|
4
|
-
"
|
|
5
|
+
"type": "module",
|
|
5
6
|
"author": {
|
|
6
7
|
"name": "Drew Powers",
|
|
7
8
|
"email": "drew@pow.rs"
|
|
8
9
|
},
|
|
9
10
|
"keywords": [
|
|
10
11
|
"design tokens",
|
|
11
|
-
"design tokens community group",
|
|
12
|
-
"design tokens format module",
|
|
13
12
|
"design system",
|
|
14
13
|
"dtcg",
|
|
15
|
-
"w3c
|
|
14
|
+
"w3c",
|
|
16
15
|
"css"
|
|
17
16
|
],
|
|
18
|
-
"license": "MIT",
|
|
19
|
-
"type": "module",
|
|
20
17
|
"main": "./dist/index.js",
|
|
18
|
+
"homepage": "https://terrazzoapp.com/docs/cli/integrations/css",
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "https://github.com/terrazzoapp/terrazzo.git",
|
|
22
|
+
"directory": "./packages/plugin-css/"
|
|
23
|
+
},
|
|
24
|
+
"license": "MIT",
|
|
21
25
|
"peerDependencies": {
|
|
22
26
|
"@terrazzo/cli": "*"
|
|
23
27
|
},
|
|
24
28
|
"dependencies": {
|
|
25
|
-
"@
|
|
26
|
-
"@
|
|
27
|
-
"culori": "^3.3.0",
|
|
28
|
-
"mime": "^3.0.0",
|
|
29
|
-
"svgo": "^3.3.2",
|
|
30
|
-
"@terrazzo/parser": "^0.0.6",
|
|
31
|
-
"@terrazzo/token-tools": "^0.0.2"
|
|
29
|
+
"@terrazzo/parser": "^0.0.10",
|
|
30
|
+
"@terrazzo/token-tools": "^0.0.4"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
|
-
"
|
|
35
|
-
"@terrazzo/cli": "^0.0.6"
|
|
33
|
+
"@terrazzo/cli": "^0.0.10"
|
|
36
34
|
},
|
|
37
35
|
"scripts": {
|
|
38
36
|
"build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",
|
package/dist/transform.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TokenNormalized, TransformHookOptions } from '@terrazzo/parser';
|
|
2
|
-
export interface TransformValueOptions {
|
|
3
|
-
transformAlias: (id: string) => string;
|
|
4
|
-
id: string;
|
|
5
|
-
localID: string;
|
|
6
|
-
setTransform: TransformHookOptions['setTransform'];
|
|
7
|
-
}
|
|
8
|
-
export default function transformValue(token: TokenNormalized, { id, localID, transformAlias, setTransform }: TransformValueOptions): void;
|
package/dist/transform.js
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import { transformBooleanValue, transformBorderValue, transformColorValue, transformCubicBezierValue, transformDimensionValue, transformDurationValue, transformFontFamilyValue, transformFontWeightValue, transformGradientValue, transformLinkValue, transformNumberValue, transformShadowValue, transformStringValue, transformStrokeStyleValue, transformTransitionValue, transformTypographyValue, } from '@terrazzo/token-tools/css';
|
|
2
|
-
import { FORMAT_ID } from './lib.js';
|
|
3
|
-
export default function transformValue(token, { id, localID, transformAlias, setTransform }) {
|
|
4
|
-
switch (token.$type) {
|
|
5
|
-
case 'boolean': {
|
|
6
|
-
for (const mode in token.mode) {
|
|
7
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
8
|
-
setTransform(id, {
|
|
9
|
-
format: FORMAT_ID,
|
|
10
|
-
localID,
|
|
11
|
-
value: transformBooleanValue($value, { aliasOf, transformAlias }),
|
|
12
|
-
mode,
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
break;
|
|
16
|
-
}
|
|
17
|
-
case 'border': {
|
|
18
|
-
for (const mode in token.mode) {
|
|
19
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
20
|
-
setTransform(id, {
|
|
21
|
-
format: FORMAT_ID,
|
|
22
|
-
localID,
|
|
23
|
-
value: transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
24
|
-
mode,
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
break;
|
|
28
|
-
}
|
|
29
|
-
case 'color': {
|
|
30
|
-
for (const mode in token.mode) {
|
|
31
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
32
|
-
setTransform(id, {
|
|
33
|
-
format: FORMAT_ID,
|
|
34
|
-
localID,
|
|
35
|
-
value: transformColorValue($value, { aliasOf, transformAlias }),
|
|
36
|
-
mode,
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
break;
|
|
40
|
-
}
|
|
41
|
-
case 'cubicBezier': {
|
|
42
|
-
for (const mode in token.mode) {
|
|
43
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
44
|
-
setTransform(id, {
|
|
45
|
-
format: FORMAT_ID,
|
|
46
|
-
localID,
|
|
47
|
-
value: transformCubicBezierValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
48
|
-
mode,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
case 'dimension': {
|
|
54
|
-
for (const mode in token.mode) {
|
|
55
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
56
|
-
setTransform(id, {
|
|
57
|
-
format: FORMAT_ID,
|
|
58
|
-
localID,
|
|
59
|
-
value: transformDimensionValue($value, { aliasOf, transformAlias }),
|
|
60
|
-
mode,
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
break;
|
|
64
|
-
}
|
|
65
|
-
case 'duration': {
|
|
66
|
-
for (const mode in token.mode) {
|
|
67
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
68
|
-
setTransform(id, {
|
|
69
|
-
format: FORMAT_ID,
|
|
70
|
-
localID,
|
|
71
|
-
value: transformDurationValue($value, { aliasOf, transformAlias }),
|
|
72
|
-
mode,
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
break;
|
|
76
|
-
}
|
|
77
|
-
case 'fontFamily': {
|
|
78
|
-
for (const mode in token.mode) {
|
|
79
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
80
|
-
setTransform(id, {
|
|
81
|
-
format: FORMAT_ID,
|
|
82
|
-
localID,
|
|
83
|
-
value: transformFontFamilyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
84
|
-
mode,
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
break;
|
|
88
|
-
}
|
|
89
|
-
case 'fontWeight': {
|
|
90
|
-
for (const mode in token.mode) {
|
|
91
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
92
|
-
setTransform(id, {
|
|
93
|
-
format: FORMAT_ID,
|
|
94
|
-
localID,
|
|
95
|
-
value: transformFontWeightValue($value, { aliasOf, transformAlias }),
|
|
96
|
-
mode,
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
break;
|
|
100
|
-
}
|
|
101
|
-
case 'gradient': {
|
|
102
|
-
for (const mode in token.mode) {
|
|
103
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
104
|
-
setTransform(id, {
|
|
105
|
-
format: FORMAT_ID,
|
|
106
|
-
localID,
|
|
107
|
-
value: transformGradientValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
108
|
-
mode,
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
break;
|
|
112
|
-
}
|
|
113
|
-
case 'link': {
|
|
114
|
-
for (const mode in token.mode) {
|
|
115
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
116
|
-
setTransform(id, {
|
|
117
|
-
format: FORMAT_ID,
|
|
118
|
-
localID,
|
|
119
|
-
value: transformLinkValue($value, { aliasOf, transformAlias }),
|
|
120
|
-
mode,
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
break;
|
|
124
|
-
}
|
|
125
|
-
case 'number': {
|
|
126
|
-
for (const mode in token.mode) {
|
|
127
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
128
|
-
setTransform(id, {
|
|
129
|
-
format: FORMAT_ID,
|
|
130
|
-
localID,
|
|
131
|
-
value: transformNumberValue($value, { aliasOf, transformAlias }),
|
|
132
|
-
mode,
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
break;
|
|
136
|
-
}
|
|
137
|
-
case 'shadow': {
|
|
138
|
-
for (const mode in token.mode) {
|
|
139
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
140
|
-
setTransform(id, {
|
|
141
|
-
format: FORMAT_ID,
|
|
142
|
-
localID,
|
|
143
|
-
value: transformShadowValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
144
|
-
mode,
|
|
145
|
-
});
|
|
146
|
-
}
|
|
147
|
-
break;
|
|
148
|
-
}
|
|
149
|
-
case 'string': {
|
|
150
|
-
for (const mode in token.mode) {
|
|
151
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
152
|
-
setTransform(id, {
|
|
153
|
-
format: FORMAT_ID,
|
|
154
|
-
localID,
|
|
155
|
-
value: transformStringValue($value, { aliasOf, transformAlias }),
|
|
156
|
-
mode,
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
break;
|
|
160
|
-
}
|
|
161
|
-
case 'strokeStyle': {
|
|
162
|
-
for (const mode in token.mode) {
|
|
163
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
164
|
-
setTransform(id, {
|
|
165
|
-
format: FORMAT_ID,
|
|
166
|
-
localID,
|
|
167
|
-
value: transformStrokeStyleValue($value, { aliasOf, transformAlias }),
|
|
168
|
-
mode,
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
break;
|
|
172
|
-
}
|
|
173
|
-
case 'transition': {
|
|
174
|
-
for (const mode in token.mode) {
|
|
175
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
176
|
-
setTransform(id, {
|
|
177
|
-
format: FORMAT_ID,
|
|
178
|
-
localID,
|
|
179
|
-
value: transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
180
|
-
mode,
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
break;
|
|
184
|
-
}
|
|
185
|
-
case 'typography': {
|
|
186
|
-
for (const mode in token.mode) {
|
|
187
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
188
|
-
setTransform(id, {
|
|
189
|
-
format: FORMAT_ID,
|
|
190
|
-
localID,
|
|
191
|
-
value: transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
192
|
-
mode,
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
break;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
//# sourceMappingURL=transform.js.map
|
package/dist/transform.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"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"}
|
package/src/build.ts
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import type { BuildHookOptions } from '@terrazzo/parser';
|
|
2
|
-
import { isTokenMatch } from '@terrazzo/token-tools';
|
|
3
|
-
import { generateShorthand } from '@terrazzo/token-tools/css';
|
|
4
|
-
import { type CSSPluginOptions, type CSSRule, printRules } from './lib.js';
|
|
5
|
-
|
|
6
|
-
const P3_MQ = '@media (color-gamut: p3)';
|
|
7
|
-
const REC2020_MQ = '@media (color-gamut: rec2020)';
|
|
8
|
-
|
|
9
|
-
export interface BuildFormatOptions {
|
|
10
|
-
exclude: CSSPluginOptions['exclude'];
|
|
11
|
-
getTransforms: BuildHookOptions['getTransforms'];
|
|
12
|
-
modeSelectors: CSSPluginOptions['modeSelectors'];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export default function buildFormat({ getTransforms, exclude, modeSelectors }: BuildFormatOptions): string {
|
|
16
|
-
const rules: CSSRule[] = [];
|
|
17
|
-
|
|
18
|
-
// :root
|
|
19
|
-
const rootTokens = getTransforms({ format: 'css', mode: '.' });
|
|
20
|
-
if (rootTokens.length) {
|
|
21
|
-
const rootRule: CSSRule = { selectors: [':root'], declarations: {} };
|
|
22
|
-
// note: "nestedQuery" was designed specifically for higher-gamut colors to
|
|
23
|
-
// apply color-gamut media queries to existing selectors (i.e. keep the same
|
|
24
|
-
// targets, and apply another nested layer of media query filtering based on
|
|
25
|
-
// hardware). Because of how CSS works they need to get built out into their
|
|
26
|
-
// own selectors that have different structures depending on whether
|
|
27
|
-
// `selectors` has a media query or not.
|
|
28
|
-
const p3Rule: CSSRule = { selectors: [':root'], nestedQuery: P3_MQ, declarations: {} };
|
|
29
|
-
const rec2020Rule: CSSRule = { selectors: [':root'], nestedQuery: REC2020_MQ, declarations: {} };
|
|
30
|
-
rules.push(rootRule, p3Rule, rec2020Rule);
|
|
31
|
-
|
|
32
|
-
for (const token of rootTokens) {
|
|
33
|
-
if (isTokenMatch(token.token.id, exclude ?? [])) {
|
|
34
|
-
continue;
|
|
35
|
-
}
|
|
36
|
-
const localID = token.localID ?? token.token.id;
|
|
37
|
-
// single-value token
|
|
38
|
-
if (token.type === 'SINGLE_VALUE') {
|
|
39
|
-
rootRule.declarations[localID] = token.value;
|
|
40
|
-
}
|
|
41
|
-
// multi-value token (wide gamut color)
|
|
42
|
-
else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
|
|
43
|
-
rootRule.declarations[localID] = token.value.srgb!;
|
|
44
|
-
if (token.value.p3 !== token.value.srgb) {
|
|
45
|
-
p3Rule.declarations[localID] = token.value.p3!;
|
|
46
|
-
rec2020Rule.declarations[localID] = token.value.rec2020!;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
// multi-value token
|
|
50
|
-
else if (token.type === 'MULTI_VALUE') {
|
|
51
|
-
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
52
|
-
if (shorthand) {
|
|
53
|
-
rootRule.declarations[token.localID ?? token.token.id] = shorthand;
|
|
54
|
-
}
|
|
55
|
-
for (const [name, value] of Object.entries(token.value)) {
|
|
56
|
-
rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = value;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// modeSelectors (note: without these, modes won’t get written to CSS)
|
|
63
|
-
for (const { selectors, tokens, mode } of modeSelectors ?? []) {
|
|
64
|
-
if (!selectors.length) {
|
|
65
|
-
continue;
|
|
66
|
-
}
|
|
67
|
-
const selectorTokens = getTransforms({ format: 'css', id: tokens, mode });
|
|
68
|
-
if (!selectorTokens.length) {
|
|
69
|
-
continue;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
const selectorRule: CSSRule = { selectors, declarations: {} };
|
|
73
|
-
const selectorP3Rule: CSSRule = { selectors, nestedQuery: P3_MQ, declarations: {} };
|
|
74
|
-
const selectorRec2020Rule: CSSRule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
|
|
75
|
-
rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);
|
|
76
|
-
|
|
77
|
-
for (const token of selectorTokens) {
|
|
78
|
-
if (token.token.aliasOf) {
|
|
79
|
-
continue;
|
|
80
|
-
}
|
|
81
|
-
const localID = token.localID ?? token.token.id;
|
|
82
|
-
// single-value token
|
|
83
|
-
if (token.type === 'SINGLE_VALUE') {
|
|
84
|
-
selectorRule.declarations[localID] = token.value;
|
|
85
|
-
}
|
|
86
|
-
// multi-value token (wide gamut color)
|
|
87
|
-
else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
|
|
88
|
-
selectorRule.declarations[localID] = token.value.srgb!;
|
|
89
|
-
if (token.value.p3 !== token.value.srgb) {
|
|
90
|
-
selectorP3Rule.declarations[localID] = token.value.p3!;
|
|
91
|
-
selectorRec2020Rule.declarations[localID] = token.value.rec2020!;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
// multi-value token
|
|
95
|
-
else {
|
|
96
|
-
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
97
|
-
if (shorthand) {
|
|
98
|
-
selectorRule.declarations[localID] = shorthand;
|
|
99
|
-
}
|
|
100
|
-
for (const [name, subvalue] of Object.entries(token.value)) {
|
|
101
|
-
selectorRule.declarations[`${localID}-${name}`] = subvalue;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
return printRules(rules);
|
|
108
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import type { Plugin } from '@terrazzo/parser';
|
|
2
|
-
import { makeCSSVar } from '@terrazzo/token-tools/css';
|
|
3
|
-
import { FILE_PREFIX, type CSSPluginOptions } from './lib.js';
|
|
4
|
-
import transformValue from './transform.js';
|
|
5
|
-
import buildFormat from './build.js';
|
|
6
|
-
|
|
7
|
-
export * from './lib.js';
|
|
8
|
-
|
|
9
|
-
export default function cssPlugin({
|
|
10
|
-
filename = './index.css',
|
|
11
|
-
exclude,
|
|
12
|
-
variableName,
|
|
13
|
-
modeSelectors,
|
|
14
|
-
}: CSSPluginOptions = {}): Plugin {
|
|
15
|
-
const transformName = (id: string) => variableName?.(id) || makeCSSVar(id);
|
|
16
|
-
const transformAlias = (id: string) => `var(${transformName(id)})`;
|
|
17
|
-
|
|
18
|
-
return {
|
|
19
|
-
name: '@terrazzo/plugin-css',
|
|
20
|
-
async transform({ tokens, setTransform }) {
|
|
21
|
-
for (const id in tokens) {
|
|
22
|
-
if (!Object.hasOwn(tokens, id)) {
|
|
23
|
-
continue;
|
|
24
|
-
}
|
|
25
|
-
transformValue(tokens[id]!, { id, localID: transformName(id), setTransform, transformAlias });
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
async build({ getTransforms, outputFile }) {
|
|
29
|
-
const output: string[] = [FILE_PREFIX, ''];
|
|
30
|
-
output.push(
|
|
31
|
-
buildFormat({ exclude, getTransforms, modeSelectors }),
|
|
32
|
-
'\n', // EOF newline
|
|
33
|
-
);
|
|
34
|
-
outputFile(filename, output.join('\n'));
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
}
|
package/src/lib.ts
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
export const FORMAT_ID = 'css';
|
|
2
|
-
|
|
3
|
-
export const FILE_PREFIX = `/* -------------------------------------------
|
|
4
|
-
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
|
|
5
|
-
* ------------------------------------------- */`;
|
|
6
|
-
|
|
7
|
-
export interface CSSPluginOptions {
|
|
8
|
-
/** Where to output CSS */
|
|
9
|
-
filename?: string;
|
|
10
|
-
/** Glob patterns to exclude tokens from output */
|
|
11
|
-
exclude?: string[];
|
|
12
|
-
/** Define mode selectors as media queries or CSS classes */
|
|
13
|
-
modeSelectors?: ModeSelector[];
|
|
14
|
-
/** Control the final CSS variable name */
|
|
15
|
-
variableName?: (name: string) => string;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export interface ModeSelector {
|
|
19
|
-
/** The name of the mode to match */
|
|
20
|
-
mode: string;
|
|
21
|
-
/** (optional) Provide token IDs to match. Globs are allowed (e.g: `["color.*", "shadow.dark"]`) */
|
|
22
|
-
tokens?: string[];
|
|
23
|
-
/** Provide CSS selectors to generate. (e.g.: `["@media (prefers-color-scheme: dark)", "[data-color-theme='dark']"]` ) */
|
|
24
|
-
selectors: string[];
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// note: this is NOT an adequate replacement for a CSS AST; this just performs
|
|
28
|
-
// basic deduplication and allows some limited parsing/reformatting before
|
|
29
|
-
// flattening to a CSS string.
|
|
30
|
-
export interface CSSRule {
|
|
31
|
-
selectors: string[];
|
|
32
|
-
nestedQuery?: string;
|
|
33
|
-
declarations: Record<string, string>;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/** Convert CSSRules into a formatted, indented CSS string */
|
|
37
|
-
export function printRules(rules: CSSRule[]): string {
|
|
38
|
-
const output: string[] = [];
|
|
39
|
-
for (const rule of rules) {
|
|
40
|
-
if (!rule.selectors.length || !Object.keys(rule.declarations).length) {
|
|
41
|
-
continue;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const mqSelectors: string[] = [];
|
|
45
|
-
const joinableSelectors: string[] = [];
|
|
46
|
-
for (const s of rule.selectors) {
|
|
47
|
-
(s.startsWith('@') ? mqSelectors : joinableSelectors).push(s);
|
|
48
|
-
}
|
|
49
|
-
// @media-query selectors get pushed individually
|
|
50
|
-
for (const s of mqSelectors) {
|
|
51
|
-
output.push(_printRule({ ...rule, selectors: [s] }));
|
|
52
|
-
}
|
|
53
|
-
// all other selectors get joined as one
|
|
54
|
-
if (joinableSelectors.length) {
|
|
55
|
-
output.push(_printRule({ ...rule, selectors: joinableSelectors }));
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return output.join('\n\n');
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function _printRule(rule: CSSRule): string {
|
|
62
|
-
const output: string[] = [];
|
|
63
|
-
const isMediaQuery = rule.selectors.some((s) => s.startsWith('@'));
|
|
64
|
-
let indent = '';
|
|
65
|
-
|
|
66
|
-
// if both levels are media queries, preserve order
|
|
67
|
-
if (rule.nestedQuery && isMediaQuery) {
|
|
68
|
-
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
69
|
-
indent += ' ';
|
|
70
|
-
output.push(`${indent}${rule.nestedQuery} {`);
|
|
71
|
-
}
|
|
72
|
-
// otherwise if nested query exists but parens aren’t media queries, reverse order (media queries on top)
|
|
73
|
-
else if (rule.nestedQuery && !isMediaQuery) {
|
|
74
|
-
output.push(`${indent}${rule.nestedQuery} {`);
|
|
75
|
-
indent += ' ';
|
|
76
|
-
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
77
|
-
}
|
|
78
|
-
// if no media queries, just print selectors
|
|
79
|
-
else {
|
|
80
|
-
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
81
|
-
}
|
|
82
|
-
indent += ' ';
|
|
83
|
-
|
|
84
|
-
// note: this is ONLY dependent on whether the top level is a media query (ignores nestedQuery)
|
|
85
|
-
if (isMediaQuery) {
|
|
86
|
-
output.push(`${indent}:root {`);
|
|
87
|
-
indent += ' ';
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
for (const [k, v] of Object.entries(rule.declarations)) {
|
|
91
|
-
output.push(`${indent}${k}: ${v};`);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// base closing brackets on indent level
|
|
95
|
-
while (indent !== '') {
|
|
96
|
-
indent = indent.substring(0, indent.length - 2);
|
|
97
|
-
output.push(`${indent}}`);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
return output.join('\n');
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export interface GetRuleOptions {
|
|
104
|
-
/** Combine a selector with parent selectors (e.g. if adding a @media-query within another selector list) */
|
|
105
|
-
parentSelectors?: string[];
|
|
106
|
-
}
|
package/src/transform.ts
DELETED
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
import type { TokenNormalized, TransformHookOptions } from '@terrazzo/parser';
|
|
2
|
-
import {
|
|
3
|
-
transformBooleanValue,
|
|
4
|
-
transformBorderValue,
|
|
5
|
-
transformColorValue,
|
|
6
|
-
transformCubicBezierValue,
|
|
7
|
-
transformDimensionValue,
|
|
8
|
-
transformDurationValue,
|
|
9
|
-
transformFontFamilyValue,
|
|
10
|
-
transformFontWeightValue,
|
|
11
|
-
transformGradientValue,
|
|
12
|
-
transformLinkValue,
|
|
13
|
-
transformNumberValue,
|
|
14
|
-
transformShadowValue,
|
|
15
|
-
transformStringValue,
|
|
16
|
-
transformStrokeStyleValue,
|
|
17
|
-
transformTransitionValue,
|
|
18
|
-
transformTypographyValue,
|
|
19
|
-
} from '@terrazzo/token-tools/css';
|
|
20
|
-
import { FORMAT_ID } from './lib.js';
|
|
21
|
-
|
|
22
|
-
export interface TransformValueOptions {
|
|
23
|
-
transformAlias: (id: string) => string;
|
|
24
|
-
id: string;
|
|
25
|
-
localID: string;
|
|
26
|
-
setTransform: TransformHookOptions['setTransform'];
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export default function transformValue(
|
|
30
|
-
token: TokenNormalized,
|
|
31
|
-
{ id, localID, transformAlias, setTransform }: TransformValueOptions,
|
|
32
|
-
): void {
|
|
33
|
-
switch (token.$type) {
|
|
34
|
-
case 'boolean': {
|
|
35
|
-
for (const mode in token.mode) {
|
|
36
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
37
|
-
setTransform(id, {
|
|
38
|
-
format: FORMAT_ID,
|
|
39
|
-
localID,
|
|
40
|
-
value: transformBooleanValue($value, { aliasOf, transformAlias }),
|
|
41
|
-
mode,
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
case 'border': {
|
|
47
|
-
for (const mode in token.mode) {
|
|
48
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
49
|
-
setTransform(id, {
|
|
50
|
-
format: FORMAT_ID,
|
|
51
|
-
localID,
|
|
52
|
-
value: transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
53
|
-
mode,
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
58
|
-
case 'color': {
|
|
59
|
-
for (const mode in token.mode) {
|
|
60
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
61
|
-
setTransform(id, {
|
|
62
|
-
format: FORMAT_ID,
|
|
63
|
-
localID,
|
|
64
|
-
value: transformColorValue($value, { aliasOf, transformAlias }),
|
|
65
|
-
mode,
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
break;
|
|
69
|
-
}
|
|
70
|
-
case 'cubicBezier': {
|
|
71
|
-
for (const mode in token.mode) {
|
|
72
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
73
|
-
setTransform(id, {
|
|
74
|
-
format: FORMAT_ID,
|
|
75
|
-
localID,
|
|
76
|
-
value: transformCubicBezierValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
77
|
-
mode,
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
break;
|
|
81
|
-
}
|
|
82
|
-
case 'dimension': {
|
|
83
|
-
for (const mode in token.mode) {
|
|
84
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
85
|
-
setTransform(id, {
|
|
86
|
-
format: FORMAT_ID,
|
|
87
|
-
localID,
|
|
88
|
-
value: transformDimensionValue($value, { aliasOf, transformAlias }),
|
|
89
|
-
mode,
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
case 'duration': {
|
|
95
|
-
for (const mode in token.mode) {
|
|
96
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
97
|
-
setTransform(id, {
|
|
98
|
-
format: FORMAT_ID,
|
|
99
|
-
localID,
|
|
100
|
-
value: transformDurationValue($value, { aliasOf, transformAlias }),
|
|
101
|
-
mode,
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
break;
|
|
105
|
-
}
|
|
106
|
-
case 'fontFamily': {
|
|
107
|
-
for (const mode in token.mode) {
|
|
108
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
109
|
-
setTransform(id, {
|
|
110
|
-
format: FORMAT_ID,
|
|
111
|
-
localID,
|
|
112
|
-
value: transformFontFamilyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
113
|
-
mode,
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
case 'fontWeight': {
|
|
119
|
-
for (const mode in token.mode) {
|
|
120
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
121
|
-
setTransform(id, {
|
|
122
|
-
format: FORMAT_ID,
|
|
123
|
-
localID,
|
|
124
|
-
value: transformFontWeightValue($value, { aliasOf, transformAlias }),
|
|
125
|
-
mode,
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
break;
|
|
129
|
-
}
|
|
130
|
-
case 'gradient': {
|
|
131
|
-
for (const mode in token.mode) {
|
|
132
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
133
|
-
setTransform(id, {
|
|
134
|
-
format: FORMAT_ID,
|
|
135
|
-
localID,
|
|
136
|
-
value: transformGradientValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
137
|
-
mode,
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
case 'link': {
|
|
143
|
-
for (const mode in token.mode) {
|
|
144
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
145
|
-
setTransform(id, {
|
|
146
|
-
format: FORMAT_ID,
|
|
147
|
-
localID,
|
|
148
|
-
value: transformLinkValue($value, { aliasOf, transformAlias }),
|
|
149
|
-
mode,
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
break;
|
|
153
|
-
}
|
|
154
|
-
case 'number': {
|
|
155
|
-
for (const mode in token.mode) {
|
|
156
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
157
|
-
setTransform(id, {
|
|
158
|
-
format: FORMAT_ID,
|
|
159
|
-
localID,
|
|
160
|
-
value: transformNumberValue($value, { aliasOf, transformAlias }),
|
|
161
|
-
mode,
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
break;
|
|
165
|
-
}
|
|
166
|
-
case 'shadow': {
|
|
167
|
-
for (const mode in token.mode) {
|
|
168
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
169
|
-
setTransform(id, {
|
|
170
|
-
format: FORMAT_ID,
|
|
171
|
-
localID,
|
|
172
|
-
value: transformShadowValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
173
|
-
mode,
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
break;
|
|
177
|
-
}
|
|
178
|
-
case 'string': {
|
|
179
|
-
for (const mode in token.mode) {
|
|
180
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
181
|
-
setTransform(id, {
|
|
182
|
-
format: FORMAT_ID,
|
|
183
|
-
localID,
|
|
184
|
-
value: transformStringValue($value, { aliasOf, transformAlias }),
|
|
185
|
-
mode,
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
break;
|
|
189
|
-
}
|
|
190
|
-
case 'strokeStyle': {
|
|
191
|
-
for (const mode in token.mode) {
|
|
192
|
-
const { $value, aliasOf } = token.mode[mode]!;
|
|
193
|
-
setTransform(id, {
|
|
194
|
-
format: FORMAT_ID,
|
|
195
|
-
localID,
|
|
196
|
-
value: transformStrokeStyleValue($value, { aliasOf, transformAlias }),
|
|
197
|
-
mode,
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
break;
|
|
201
|
-
}
|
|
202
|
-
case 'transition': {
|
|
203
|
-
for (const mode in token.mode) {
|
|
204
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
205
|
-
setTransform(id, {
|
|
206
|
-
format: FORMAT_ID,
|
|
207
|
-
localID,
|
|
208
|
-
value: transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
209
|
-
mode,
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
break;
|
|
213
|
-
}
|
|
214
|
-
case 'typography': {
|
|
215
|
-
for (const mode in token.mode) {
|
|
216
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
|
|
217
|
-
setTransform(id, {
|
|
218
|
-
format: FORMAT_ID,
|
|
219
|
-
localID,
|
|
220
|
-
value: transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
221
|
-
mode,
|
|
222
|
-
});
|
|
223
|
-
}
|
|
224
|
-
break;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}
|