@terrazzo/plugin-css 0.0.3 → 0.0.4

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 (18) hide show
  1. package/README.md +1 -1
  2. package/dist/build.d.ts +8 -0
  3. package/dist/build.js +94 -0
  4. package/dist/build.js.map +1 -0
  5. package/dist/index.d.ts +2 -20
  6. package/dist/index.js +7 -259
  7. package/dist/index.js.map +1 -1
  8. package/dist/lib.d.ts +31 -0
  9. package/dist/lib.js +64 -0
  10. package/dist/lib.js.map +1 -0
  11. package/dist/transform.d.ts +8 -0
  12. package/dist/transform.js +199 -0
  13. package/dist/transform.js.map +1 -0
  14. package/package.json +6 -6
  15. package/src/build.ts +108 -0
  16. package/src/index.ts +10 -302
  17. package/src/lib.ts +106 -0
  18. package/src/transform.ts +227 -0
package/dist/transform.js ADDED
@@ -0,0 +1,199 @@
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 ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@terrazzo/plugin-css",
3
3
  "description": "Generate CSS from your design tokens schema (requires @terrazzo/cli)",
4
- "version": "0.0.3",
4
+ "version": "0.0.4",
5
5
  "author": {
6
6
  "name": "Drew Powers",
7
7
  "email": "drew@pow.rs"
@@ -26,13 +26,13 @@
26
26
  "@types/mime": "^3.0.4",
27
27
  "culori": "^3.3.0",
28
28
  "mime": "^3.0.0",
29
- "svgo": "^3.2.0",
30
- "@terrazzo/parser": "^0.0.5",
31
- "@terrazzo/token-tools": "^0.0.1"
29
+ "svgo": "^3.3.2",
30
+ "@terrazzo/parser": "^0.0.6",
31
+ "@terrazzo/token-tools": "^0.0.2"
32
32
  },
33
33
  "devDependencies": {
34
- "yaml": "^2.4.1",
35
- "@terrazzo/cli": "^0.0.5"
34
+ "yaml": "^2.4.3",
35
+ "@terrazzo/cli": "^0.0.6"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",
package/src/build.ts ADDED
@@ -0,0 +1,108 @@
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 CHANGED
@@ -1,51 +1,10 @@
1
1
  import type { Plugin } from '@terrazzo/parser';
2
- import { isTokenMatch } from '@terrazzo/token-tools';
3
- import {
4
- generateShorthand,
5
- makeCSSVar,
6
- transformBooleanValue,
7
- transformBorderValue,
8
- transformColorValue,
9
- transformCubicBezierValue,
10
- transformDimensionValue,
11
- transformDurationValue,
12
- transformFontFamilyValue,
13
- transformFontWeightValue,
14
- transformGradientValue,
15
- transformLinkValue,
16
- transformNumberValue,
17
- transformShadowValue,
18
- transformStringValue,
19
- transformStrokeStyleValue,
20
- transformTransitionValue,
21
- transformTypographyValue,
22
- } from '@terrazzo/token-tools/css';
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';
23
6
 
24
- export interface ModeSelector {
25
- /** The name of the mode to match */
26
- mode: string;
27
- /** (optional) Provide token IDs to match. Globs are allowed (e.g: `["color.*", "shadow.dark"]`) */
28
- tokens?: string[];
29
- /** Provide CSS selectors to generate. (e.g.: `["@media (prefers-color-scheme: dark)", "[data-color-theme='dark']"]` ) */
30
- selectors: string[];
31
- }
32
-
33
- export interface CSSPluginOptions {
34
- /** Where to output CSS */
35
- filename?: string;
36
- /** Glob patterns to exclude tokens from output */
37
- exclude?: string[];
38
- /** Define mode selectors as media queries or CSS classes */
39
- modeSelectors?: ModeSelector[];
40
- /** Control the final CSS variable name */
41
- variableName?: (name: string) => string;
42
- }
43
-
44
- export const FORMAT_ID = 'css';
45
-
46
- export const FILE_PREFIX = `/* -------------------------------------------
47
- * Autogenerated by 💠 Terrazzo. DO NOT EDIT!
48
- * ------------------------------------------- */`;
7
+ export * from './lib.js';
49
8
 
50
9
  export default function cssPlugin({
51
10
  filename = './index.css',
@@ -63,266 +22,15 @@ export default function cssPlugin({
63
22
  if (!Object.hasOwn(tokens, id)) {
64
23
  continue;
65
24
  }
66
- const token = tokens[id]!;
67
- const localID = transformName(id);
68
-
69
- switch (token.$type) {
70
- case 'boolean': {
71
- for (const mode in token.mode) {
72
- const { $value, aliasOf } = token.mode[mode]!;
73
- setTransform(id, {
74
- format: FORMAT_ID,
75
- localID,
76
- value: transformBooleanValue($value, { aliasOf, transformAlias }),
77
- mode,
78
- });
79
- }
80
- break;
81
- }
82
- case 'border': {
83
- for (const mode in token.mode) {
84
- const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
85
- setTransform(id, {
86
- format: FORMAT_ID,
87
- localID,
88
- value: transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias }),
89
- mode,
90
- });
91
- }
92
- break;
93
- }
94
- case 'color': {
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: transformColorValue($value, { aliasOf, transformAlias }),
101
- mode,
102
- });
103
- }
104
- break;
105
- }
106
- case 'cubicBezier': {
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: transformCubicBezierValue($value, { aliasOf, partialAliasOf, transformAlias }),
113
- mode,
114
- });
115
- }
116
- break;
117
- }
118
- case 'dimension': {
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: transformDimensionValue($value, { aliasOf, transformAlias }),
125
- mode,
126
- });
127
- }
128
- break;
129
- }
130
- case 'duration': {
131
- for (const mode in token.mode) {
132
- const { $value, aliasOf } = token.mode[mode]!;
133
- setTransform(id, {
134
- format: FORMAT_ID,
135
- localID,
136
- value: transformDurationValue($value, { aliasOf, transformAlias }),
137
- mode,
138
- });
139
- }
140
- break;
141
- }
142
- case 'fontFamily': {
143
- for (const mode in token.mode) {
144
- const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
145
- setTransform(id, {
146
- format: FORMAT_ID,
147
- localID,
148
- value: transformFontFamilyValue($value, { aliasOf, partialAliasOf, transformAlias }),
149
- mode,
150
- });
151
- }
152
- break;
153
- }
154
- case 'fontWeight': {
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: transformFontWeightValue($value, { aliasOf, transformAlias }),
161
- mode,
162
- });
163
- }
164
- break;
165
- }
166
- case 'gradient': {
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: transformGradientValue($value, { aliasOf, partialAliasOf, transformAlias }),
173
- });
174
- }
175
- break;
176
- }
177
- case 'link': {
178
- for (const mode in token.mode) {
179
- const { $value, aliasOf } = token.mode[mode]!;
180
- setTransform(id, {
181
- format: FORMAT_ID,
182
- localID,
183
- value: transformLinkValue($value, { aliasOf, transformAlias }),
184
- mode,
185
- });
186
- }
187
- break;
188
- }
189
- case 'number': {
190
- for (const mode in token.mode) {
191
- const { $value, aliasOf } = token.mode[mode]!;
192
- setTransform(id, {
193
- format: FORMAT_ID,
194
- localID,
195
- value: transformNumberValue($value, { aliasOf, transformAlias }),
196
- mode,
197
- });
198
- }
199
- break;
200
- }
201
- case 'shadow': {
202
- for (const mode in token.mode) {
203
- const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
204
- setTransform(id, {
205
- format: FORMAT_ID,
206
- localID,
207
- value: transformShadowValue($value, { aliasOf, partialAliasOf, transformAlias }),
208
- mode,
209
- });
210
- }
211
- break;
212
- }
213
- case 'string': {
214
- for (const mode in token.mode) {
215
- const { $value, aliasOf } = token.mode[mode]!;
216
- setTransform(id, {
217
- format: FORMAT_ID,
218
- localID,
219
- value: transformStringValue($value, { aliasOf, transformAlias }),
220
- mode,
221
- });
222
- }
223
- break;
224
- }
225
- case 'strokeStyle': {
226
- for (const mode in token.mode) {
227
- const { $value, aliasOf } = token.mode[mode]!;
228
- setTransform(id, {
229
- format: FORMAT_ID,
230
- localID,
231
- value: transformStrokeStyleValue($value, { aliasOf, transformAlias }),
232
- mode,
233
- });
234
- }
235
- break;
236
- }
237
- case 'transition': {
238
- for (const mode in token.mode) {
239
- const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
240
- setTransform(id, {
241
- format: FORMAT_ID,
242
- localID,
243
- value: transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias }),
244
- mode,
245
- });
246
- }
247
- break;
248
- }
249
- case 'typography': {
250
- for (const mode in token.mode) {
251
- const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
252
- setTransform(id, {
253
- format: FORMAT_ID,
254
- localID,
255
- value: transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias }),
256
- mode,
257
- });
258
- }
259
- break;
260
- }
261
- }
25
+ transformValue(tokens[id]!, { id, localID: transformName(id), setTransform, transformAlias });
262
26
  }
263
27
  },
264
28
  async build({ getTransforms, outputFile }) {
265
29
  const output: string[] = [FILE_PREFIX, ''];
266
-
267
- // :root
268
- output.push(':root {');
269
- const rootTokens = getTransforms({ format: 'css', mode: '.' });
270
- for (const token of rootTokens) {
271
- if (isTokenMatch(token.token.id, exclude ?? [])) {
272
- continue;
273
- }
274
- const localID = token.localID ?? token.token.id;
275
- if (token.type === 'SINGLE_VALUE') {
276
- output.push(` ${localID}: ${token.value};`);
277
- } else if (token.type === 'MULTI_VALUE') {
278
- const shorthand = generateShorthand({ $type: token.token.$type, localID });
279
- if (shorthand) {
280
- output.push(` ${token.localID ?? token.token.id}: ${shorthand};`);
281
- }
282
- for (const [name, value] of Object.entries(token.value)) {
283
- output.push(` ${name === '.' ? localID : [localID, name].join('-')}: ${value};`);
284
- }
285
- }
286
- }
287
- output.push('}');
288
-
289
- for (const { selectors, tokens, mode } of modeSelectors ?? []) {
290
- const selectorTokens = getTransforms({ format: 'css', id: tokens, mode });
291
- if (!selectorTokens.length) {
292
- continue;
293
- }
294
-
295
- let indent = ' ';
296
- for (const selector of selectors) {
297
- output.push('', `${selector} {`);
298
- if (selector.startsWith('@')) {
299
- output.push(' :root {');
300
- indent = ' ';
301
- }
302
- for (const token of selectorTokens) {
303
- if (token.token.aliasOf) {
304
- continue;
305
- }
306
- const localID = token.localID ?? token.token.id;
307
- if (token.type === 'SINGLE_VALUE') {
308
- output.push(`${indent}${localID}: ${token.value};`);
309
- } else {
310
- const shorthand = generateShorthand({ $type: token.token.$type, localID });
311
- if (shorthand) {
312
- output.push(`${indent}${localID}: ${shorthand};`);
313
- }
314
- for (const [name, subvalue] of Object.entries(token.value)) {
315
- output.push(`${indent}${localID}-${name}: ${subvalue};`);
316
- }
317
- }
318
- }
319
- if (selector.startsWith('@')) {
320
- output.push(' }');
321
- }
322
- output.push('}');
323
- }
324
- }
325
-
30
+ output.push(
31
+ buildFormat({ exclude, getTransforms, modeSelectors }),
32
+ '\n', // EOF newline
33
+ );
326
34
  outputFile(filename, output.join('\n'));
327
35
  },
328
36
  };