@terrazzo/plugin-css 0.0.2 → 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.
- package/README.md +5 -0
- package/dist/build.d.ts +8 -0
- package/dist/build.js +94 -0
- package/dist/build.js.map +1 -0
- package/dist/index.d.ts +2 -20
- package/dist/index.js +7 -259
- package/dist/index.js.map +1 -1
- package/dist/lib.d.ts +31 -0
- package/dist/lib.js +64 -0
- package/dist/lib.js.map +1 -0
- package/dist/transform.d.ts +8 -0
- package/dist/transform.js +199 -0
- package/dist/transform.js.map +1 -0
- package/package.json +6 -6
- package/src/build.ts +108 -0
- package/src/index.ts +10 -305
- package/src/lib.ts +106 -0
- package/src/transform.ts +227 -0
package/README.md
ADDED
package/dist/build.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { BuildHookOptions } from '@terrazzo/parser';
|
|
2
|
+
import { type CSSPluginOptions } from './lib.js';
|
|
3
|
+
export interface BuildFormatOptions {
|
|
4
|
+
exclude: CSSPluginOptions['exclude'];
|
|
5
|
+
getTransforms: BuildHookOptions['getTransforms'];
|
|
6
|
+
modeSelectors: CSSPluginOptions['modeSelectors'];
|
|
7
|
+
}
|
|
8
|
+
export default function buildFormat({ getTransforms, exclude, modeSelectors }: BuildFormatOptions): string;
|
package/dist/build.js
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { isTokenMatch } from '@terrazzo/token-tools';
|
|
2
|
+
import { generateShorthand } from '@terrazzo/token-tools/css';
|
|
3
|
+
import { printRules } from './lib.js';
|
|
4
|
+
const P3_MQ = '@media (color-gamut: p3)';
|
|
5
|
+
const REC2020_MQ = '@media (color-gamut: rec2020)';
|
|
6
|
+
export default function buildFormat({ getTransforms, exclude, modeSelectors }) {
|
|
7
|
+
const rules = [];
|
|
8
|
+
// :root
|
|
9
|
+
const rootTokens = getTransforms({ format: 'css', mode: '.' });
|
|
10
|
+
if (rootTokens.length) {
|
|
11
|
+
const rootRule = { selectors: [':root'], declarations: {} };
|
|
12
|
+
// note: "nestedQuery" was designed specifically for higher-gamut colors to
|
|
13
|
+
// apply color-gamut media queries to existing selectors (i.e. keep the same
|
|
14
|
+
// targets, and apply another nested layer of media query filtering based on
|
|
15
|
+
// hardware). Because of how CSS works they need to get built out into their
|
|
16
|
+
// own selectors that have different structures depending on whether
|
|
17
|
+
// `selectors` has a media query or not.
|
|
18
|
+
const p3Rule = { selectors: [':root'], nestedQuery: P3_MQ, declarations: {} };
|
|
19
|
+
const rec2020Rule = { selectors: [':root'], nestedQuery: REC2020_MQ, declarations: {} };
|
|
20
|
+
rules.push(rootRule, p3Rule, rec2020Rule);
|
|
21
|
+
for (const token of rootTokens) {
|
|
22
|
+
if (isTokenMatch(token.token.id, exclude ?? [])) {
|
|
23
|
+
continue;
|
|
24
|
+
}
|
|
25
|
+
const localID = token.localID ?? token.token.id;
|
|
26
|
+
// single-value token
|
|
27
|
+
if (token.type === 'SINGLE_VALUE') {
|
|
28
|
+
rootRule.declarations[localID] = token.value;
|
|
29
|
+
}
|
|
30
|
+
// multi-value token (wide gamut color)
|
|
31
|
+
else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
|
|
32
|
+
rootRule.declarations[localID] = token.value.srgb;
|
|
33
|
+
if (token.value.p3 !== token.value.srgb) {
|
|
34
|
+
p3Rule.declarations[localID] = token.value.p3;
|
|
35
|
+
rec2020Rule.declarations[localID] = token.value.rec2020;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
// multi-value token
|
|
39
|
+
else if (token.type === 'MULTI_VALUE') {
|
|
40
|
+
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
41
|
+
if (shorthand) {
|
|
42
|
+
rootRule.declarations[token.localID ?? token.token.id] = shorthand;
|
|
43
|
+
}
|
|
44
|
+
for (const [name, value] of Object.entries(token.value)) {
|
|
45
|
+
rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = value;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
// modeSelectors (note: without these, modes won’t get written to CSS)
|
|
51
|
+
for (const { selectors, tokens, mode } of modeSelectors ?? []) {
|
|
52
|
+
if (!selectors.length) {
|
|
53
|
+
continue;
|
|
54
|
+
}
|
|
55
|
+
const selectorTokens = getTransforms({ format: 'css', id: tokens, mode });
|
|
56
|
+
if (!selectorTokens.length) {
|
|
57
|
+
continue;
|
|
58
|
+
}
|
|
59
|
+
const selectorRule = { selectors, declarations: {} };
|
|
60
|
+
const selectorP3Rule = { selectors, nestedQuery: P3_MQ, declarations: {} };
|
|
61
|
+
const selectorRec2020Rule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
|
|
62
|
+
rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);
|
|
63
|
+
for (const token of selectorTokens) {
|
|
64
|
+
if (token.token.aliasOf) {
|
|
65
|
+
continue;
|
|
66
|
+
}
|
|
67
|
+
const localID = token.localID ?? token.token.id;
|
|
68
|
+
// single-value token
|
|
69
|
+
if (token.type === 'SINGLE_VALUE') {
|
|
70
|
+
selectorRule.declarations[localID] = token.value;
|
|
71
|
+
}
|
|
72
|
+
// multi-value token (wide gamut color)
|
|
73
|
+
else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
|
|
74
|
+
selectorRule.declarations[localID] = token.value.srgb;
|
|
75
|
+
if (token.value.p3 !== token.value.srgb) {
|
|
76
|
+
selectorP3Rule.declarations[localID] = token.value.p3;
|
|
77
|
+
selectorRec2020Rule.declarations[localID] = token.value.rec2020;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
// multi-value token
|
|
81
|
+
else {
|
|
82
|
+
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
83
|
+
if (shorthand) {
|
|
84
|
+
selectorRule.declarations[localID] = shorthand;
|
|
85
|
+
}
|
|
86
|
+
for (const [name, subvalue] of Object.entries(token.value)) {
|
|
87
|
+
selectorRule.declarations[`${localID}-${name}`] = subvalue;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return printRules(rules);
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=build.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,22 +1,4 @@
|
|
|
1
1
|
import type { Plugin } from '@terrazzo/parser';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
mode: string;
|
|
5
|
-
/** (optional) Provide token IDs to match. Globs are allowed (e.g: `["color.*", "shadow.dark"]`) */
|
|
6
|
-
tokens?: string[];
|
|
7
|
-
/** Provide CSS selectors to generate. (e.g.: `["@media (prefers-color-scheme: dark)", "[data-color-theme='dark']"]` ) */
|
|
8
|
-
selectors: string[];
|
|
9
|
-
}
|
|
10
|
-
export interface CSSPluginOptions {
|
|
11
|
-
/** Where to output CSS */
|
|
12
|
-
filename?: string;
|
|
13
|
-
/** Glob patterns to exclude tokens from output */
|
|
14
|
-
exclude?: string[];
|
|
15
|
-
/** Define mode selectors as media queries or CSS classes */
|
|
16
|
-
modeSelectors?: ModeSelector[];
|
|
17
|
-
/** Control the final CSS variable name */
|
|
18
|
-
variableName?: (name: string) => string;
|
|
19
|
-
}
|
|
20
|
-
export declare const FORMAT_ID = "css";
|
|
21
|
-
export declare const FILE_PREFIX = "/* -------------------------------------------\n * Autogenerated by \uD83D\uDCA0 Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
|
|
2
|
+
import { type CSSPluginOptions } from './lib.js';
|
|
3
|
+
export * from './lib.js';
|
|
22
4
|
export default function cssPlugin({ filename, exclude, variableName, modeSelectors, }?: CSSPluginOptions): Plugin;
|
package/dist/index.js
CHANGED
|
@@ -22,12 +22,11 @@
|
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
*
|
|
30
|
-
* ------------------------------------------- */`;
|
|
25
|
+
import { makeCSSVar } from '@terrazzo/token-tools/css';
|
|
26
|
+
import { FILE_PREFIX } from './lib.js';
|
|
27
|
+
import transformValue from './transform.js';
|
|
28
|
+
import buildFormat from './build.js';
|
|
29
|
+
export * from './lib.js';
|
|
31
30
|
export default function cssPlugin({ filename = './index.css', exclude, variableName, modeSelectors, } = {}) {
|
|
32
31
|
const transformName = (id) => variableName?.(id) || makeCSSVar(id);
|
|
33
32
|
const transformAlias = (id) => `var(${transformName(id)})`;
|
|
@@ -38,263 +37,12 @@ export default function cssPlugin({ filename = './index.css', exclude, variableN
|
|
|
38
37
|
if (!Object.hasOwn(tokens, id)) {
|
|
39
38
|
continue;
|
|
40
39
|
}
|
|
41
|
-
|
|
42
|
-
const localID = transformName(id);
|
|
43
|
-
switch (token.$type) {
|
|
44
|
-
case 'boolean': {
|
|
45
|
-
for (const mode in token.mode) {
|
|
46
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
47
|
-
setTransform(id, {
|
|
48
|
-
format: FORMAT_ID,
|
|
49
|
-
localID,
|
|
50
|
-
value: transformBooleanValue($value, { aliasOf, transformAlias }),
|
|
51
|
-
mode,
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
break;
|
|
55
|
-
}
|
|
56
|
-
case 'border': {
|
|
57
|
-
for (const mode in token.mode) {
|
|
58
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
59
|
-
setTransform(id, {
|
|
60
|
-
format: FORMAT_ID,
|
|
61
|
-
localID,
|
|
62
|
-
value: transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
63
|
-
mode,
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
case 'color': {
|
|
69
|
-
for (const mode in token.mode) {
|
|
70
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
71
|
-
setTransform(id, {
|
|
72
|
-
format: FORMAT_ID,
|
|
73
|
-
localID,
|
|
74
|
-
value: transformColorValue($value, { aliasOf, transformAlias }),
|
|
75
|
-
mode,
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
break;
|
|
79
|
-
}
|
|
80
|
-
case 'cubicBezier': {
|
|
81
|
-
for (const mode in token.mode) {
|
|
82
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
83
|
-
setTransform(id, {
|
|
84
|
-
format: FORMAT_ID,
|
|
85
|
-
localID,
|
|
86
|
-
value: transformCubicBezierValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
87
|
-
mode,
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
break;
|
|
91
|
-
}
|
|
92
|
-
case 'dimension': {
|
|
93
|
-
for (const mode in token.mode) {
|
|
94
|
-
const currentMode = token.mode[mode];
|
|
95
|
-
setTransform(id, {
|
|
96
|
-
format: FORMAT_ID,
|
|
97
|
-
localID,
|
|
98
|
-
value: transformDimensionValue(currentMode.aliasOf ? makeAlias(currentMode.aliasOf) : currentMode.$value, { transformAlias }),
|
|
99
|
-
mode,
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
break;
|
|
103
|
-
}
|
|
104
|
-
case 'duration': {
|
|
105
|
-
for (const mode in token.mode) {
|
|
106
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
107
|
-
setTransform(id, {
|
|
108
|
-
format: FORMAT_ID,
|
|
109
|
-
localID,
|
|
110
|
-
value: transformDurationValue($value, { aliasOf, transformAlias }),
|
|
111
|
-
mode,
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
break;
|
|
115
|
-
}
|
|
116
|
-
case 'fontFamily': {
|
|
117
|
-
for (const mode in token.mode) {
|
|
118
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
119
|
-
setTransform(id, {
|
|
120
|
-
format: FORMAT_ID,
|
|
121
|
-
localID,
|
|
122
|
-
value: transformFontFamilyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
123
|
-
mode,
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
break;
|
|
127
|
-
}
|
|
128
|
-
case 'fontWeight': {
|
|
129
|
-
for (const mode in token.mode) {
|
|
130
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
131
|
-
setTransform(id, {
|
|
132
|
-
format: FORMAT_ID,
|
|
133
|
-
localID,
|
|
134
|
-
value: transformFontWeightValue($value, { aliasOf, transformAlias }),
|
|
135
|
-
mode,
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
break;
|
|
139
|
-
}
|
|
140
|
-
case 'gradient': {
|
|
141
|
-
for (const mode in token.mode) {
|
|
142
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
143
|
-
setTransform(id, {
|
|
144
|
-
format: FORMAT_ID,
|
|
145
|
-
localID,
|
|
146
|
-
value: transformGradientValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
break;
|
|
150
|
-
}
|
|
151
|
-
case 'link': {
|
|
152
|
-
for (const mode in token.mode) {
|
|
153
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
154
|
-
setTransform(id, {
|
|
155
|
-
format: FORMAT_ID,
|
|
156
|
-
localID,
|
|
157
|
-
value: transformLinkValue($value, { aliasOf, transformAlias }),
|
|
158
|
-
mode,
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
break;
|
|
162
|
-
}
|
|
163
|
-
case 'number': {
|
|
164
|
-
for (const mode in token.mode) {
|
|
165
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
166
|
-
setTransform(id, {
|
|
167
|
-
format: FORMAT_ID,
|
|
168
|
-
localID,
|
|
169
|
-
value: transformNumberValue($value, { aliasOf, transformAlias }),
|
|
170
|
-
mode,
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
break;
|
|
174
|
-
}
|
|
175
|
-
case 'shadow': {
|
|
176
|
-
for (const mode in token.mode) {
|
|
177
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
178
|
-
setTransform(id, {
|
|
179
|
-
format: FORMAT_ID,
|
|
180
|
-
localID,
|
|
181
|
-
value: transformShadowValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
182
|
-
mode,
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
break;
|
|
186
|
-
}
|
|
187
|
-
case 'string': {
|
|
188
|
-
for (const mode in token.mode) {
|
|
189
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
190
|
-
setTransform(id, {
|
|
191
|
-
format: FORMAT_ID,
|
|
192
|
-
localID,
|
|
193
|
-
value: transformStringValue($value, { aliasOf, transformAlias }),
|
|
194
|
-
mode,
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
break;
|
|
198
|
-
}
|
|
199
|
-
case 'strokeStyle': {
|
|
200
|
-
for (const mode in token.mode) {
|
|
201
|
-
const { $value, aliasOf } = token.mode[mode];
|
|
202
|
-
setTransform(id, {
|
|
203
|
-
format: FORMAT_ID,
|
|
204
|
-
localID,
|
|
205
|
-
value: transformStrokeStyleValue($value, { aliasOf, transformAlias }),
|
|
206
|
-
mode,
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
break;
|
|
210
|
-
}
|
|
211
|
-
case 'transition': {
|
|
212
|
-
for (const mode in token.mode) {
|
|
213
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
214
|
-
setTransform(id, {
|
|
215
|
-
format: FORMAT_ID,
|
|
216
|
-
localID,
|
|
217
|
-
value: transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
218
|
-
mode,
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
break;
|
|
222
|
-
}
|
|
223
|
-
case 'typography': {
|
|
224
|
-
for (const mode in token.mode) {
|
|
225
|
-
const { $value, aliasOf, partialAliasOf } = token.mode[mode];
|
|
226
|
-
setTransform(id, {
|
|
227
|
-
format: FORMAT_ID,
|
|
228
|
-
localID,
|
|
229
|
-
value: transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias }),
|
|
230
|
-
mode,
|
|
231
|
-
});
|
|
232
|
-
}
|
|
233
|
-
break;
|
|
234
|
-
}
|
|
235
|
-
}
|
|
40
|
+
transformValue(tokens[id], { id, localID: transformName(id), setTransform, transformAlias });
|
|
236
41
|
}
|
|
237
42
|
},
|
|
238
43
|
async build({ getTransforms, outputFile }) {
|
|
239
44
|
const output = [FILE_PREFIX, ''];
|
|
240
|
-
|
|
241
|
-
output.push(':root {');
|
|
242
|
-
const rootTokens = getTransforms({ format: 'css', mode: '.' });
|
|
243
|
-
for (const token of rootTokens) {
|
|
244
|
-
if (isTokenMatch(token.token.id, exclude ?? [])) {
|
|
245
|
-
continue;
|
|
246
|
-
}
|
|
247
|
-
const localID = token.localID ?? token.token.id;
|
|
248
|
-
if (token.type === 'SINGLE_VALUE') {
|
|
249
|
-
output.push(` ${localID}: ${token.value};`);
|
|
250
|
-
}
|
|
251
|
-
else if (token.type === 'MULTI_VALUE') {
|
|
252
|
-
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
253
|
-
if (shorthand) {
|
|
254
|
-
output.push(` ${token.localID ?? token.token.id}: ${shorthand};`);
|
|
255
|
-
}
|
|
256
|
-
for (const [name, value] of Object.entries(token.value)) {
|
|
257
|
-
output.push(` ${name === '.' ? localID : [localID, name].join('-')}: ${value};`);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
output.push('}');
|
|
262
|
-
for (const { selectors, tokens, mode } of modeSelectors ?? []) {
|
|
263
|
-
const selectorTokens = getTransforms({ format: 'css', select: tokens, mode });
|
|
264
|
-
if (!selectorTokens.length) {
|
|
265
|
-
continue;
|
|
266
|
-
}
|
|
267
|
-
let indent = ' ';
|
|
268
|
-
for (const selector of selectors) {
|
|
269
|
-
output.push('', `${selector} {`);
|
|
270
|
-
if (selector.startsWith('@')) {
|
|
271
|
-
output.push(' :root {');
|
|
272
|
-
indent = ' ';
|
|
273
|
-
}
|
|
274
|
-
for (const token of selectorTokens) {
|
|
275
|
-
if (token.token.aliasOf) {
|
|
276
|
-
continue;
|
|
277
|
-
}
|
|
278
|
-
const localID = token.localID ?? token.token.id;
|
|
279
|
-
if (token.type === 'SINGLE_VALUE') {
|
|
280
|
-
output.push(`${indent}${localID}: ${token.value};`);
|
|
281
|
-
}
|
|
282
|
-
else {
|
|
283
|
-
const shorthand = generateShorthand({ $type: token.token.$type, localID });
|
|
284
|
-
if (shorthand) {
|
|
285
|
-
output.push(`${indent}${localID}: ${shorthand};`);
|
|
286
|
-
}
|
|
287
|
-
for (const [name, subvalue] of Object.entries(token.value)) {
|
|
288
|
-
output.push(`${indent}${localID}-${name}: ${subvalue};`);
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
if (selector.startsWith('@')) {
|
|
293
|
-
output.push(' }');
|
|
294
|
-
}
|
|
295
|
-
output.push('}');
|
|
296
|
-
}
|
|
297
|
-
}
|
|
45
|
+
output.push(buildFormat({ exclude, getTransforms, modeSelectors }), '\n');
|
|
298
46
|
outputFile(filename, output.join('\n'));
|
|
299
47
|
},
|
|
300
48
|
};
|
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,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAyB,MAAM,UAAU,CAAC;AAC9D,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,GAAG,aAAa,EACxB,OAAO,EACP,YAAY,EACZ,aAAa,MACO,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,YAAY,EAAE;YACtC,KAAK,MAAM,EAAE,IAAI,MAAM,EAAE,CAAC;gBACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;oBAC/B,SAAS;gBACX,CAAC;gBACD,cAAc,CAAC,MAAM,CAAC,EAAE,CAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,CAAC;YAChG,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
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const FORMAT_ID = "css";
|
|
2
|
+
export declare const FILE_PREFIX = "/* -------------------------------------------\n * Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
|
|
3
|
+
export interface CSSPluginOptions {
|
|
4
|
+
/** Where to output CSS */
|
|
5
|
+
filename?: string;
|
|
6
|
+
/** Glob patterns to exclude tokens from output */
|
|
7
|
+
exclude?: string[];
|
|
8
|
+
/** Define mode selectors as media queries or CSS classes */
|
|
9
|
+
modeSelectors?: ModeSelector[];
|
|
10
|
+
/** Control the final CSS variable name */
|
|
11
|
+
variableName?: (name: string) => string;
|
|
12
|
+
}
|
|
13
|
+
export interface ModeSelector {
|
|
14
|
+
/** The name of the mode to match */
|
|
15
|
+
mode: string;
|
|
16
|
+
/** (optional) Provide token IDs to match. Globs are allowed (e.g: `["color.*", "shadow.dark"]`) */
|
|
17
|
+
tokens?: string[];
|
|
18
|
+
/** Provide CSS selectors to generate. (e.g.: `["@media (prefers-color-scheme: dark)", "[data-color-theme='dark']"]` ) */
|
|
19
|
+
selectors: string[];
|
|
20
|
+
}
|
|
21
|
+
export interface CSSRule {
|
|
22
|
+
selectors: string[];
|
|
23
|
+
nestedQuery?: string;
|
|
24
|
+
declarations: Record<string, string>;
|
|
25
|
+
}
|
|
26
|
+
/** Convert CSSRules into a formatted, indented CSS string */
|
|
27
|
+
export declare function printRules(rules: CSSRule[]): string;
|
|
28
|
+
export interface GetRuleOptions {
|
|
29
|
+
/** Combine a selector with parent selectors (e.g. if adding a @media-query within another selector list) */
|
|
30
|
+
parentSelectors?: string[];
|
|
31
|
+
}
|
package/dist/lib.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
export const FORMAT_ID = 'css';
|
|
2
|
+
export const FILE_PREFIX = `/* -------------------------------------------
|
|
3
|
+
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
|
|
4
|
+
* ------------------------------------------- */`;
|
|
5
|
+
/** Convert CSSRules into a formatted, indented CSS string */
|
|
6
|
+
export function printRules(rules) {
|
|
7
|
+
const output = [];
|
|
8
|
+
for (const rule of rules) {
|
|
9
|
+
if (!rule.selectors.length || !Object.keys(rule.declarations).length) {
|
|
10
|
+
continue;
|
|
11
|
+
}
|
|
12
|
+
const mqSelectors = [];
|
|
13
|
+
const joinableSelectors = [];
|
|
14
|
+
for (const s of rule.selectors) {
|
|
15
|
+
(s.startsWith('@') ? mqSelectors : joinableSelectors).push(s);
|
|
16
|
+
}
|
|
17
|
+
// @media-query selectors get pushed individually
|
|
18
|
+
for (const s of mqSelectors) {
|
|
19
|
+
output.push(_printRule({ ...rule, selectors: [s] }));
|
|
20
|
+
}
|
|
21
|
+
// all other selectors get joined as one
|
|
22
|
+
if (joinableSelectors.length) {
|
|
23
|
+
output.push(_printRule({ ...rule, selectors: joinableSelectors }));
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return output.join('\n\n');
|
|
27
|
+
}
|
|
28
|
+
function _printRule(rule) {
|
|
29
|
+
const output = [];
|
|
30
|
+
const isMediaQuery = rule.selectors.some((s) => s.startsWith('@'));
|
|
31
|
+
let indent = '';
|
|
32
|
+
// if both levels are media queries, preserve order
|
|
33
|
+
if (rule.nestedQuery && isMediaQuery) {
|
|
34
|
+
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
35
|
+
indent += ' ';
|
|
36
|
+
output.push(`${indent}${rule.nestedQuery} {`);
|
|
37
|
+
}
|
|
38
|
+
// otherwise if nested query exists but parens aren’t media queries, reverse order (media queries on top)
|
|
39
|
+
else if (rule.nestedQuery && !isMediaQuery) {
|
|
40
|
+
output.push(`${indent}${rule.nestedQuery} {`);
|
|
41
|
+
indent += ' ';
|
|
42
|
+
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
43
|
+
}
|
|
44
|
+
// if no media queries, just print selectors
|
|
45
|
+
else {
|
|
46
|
+
output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
|
|
47
|
+
}
|
|
48
|
+
indent += ' ';
|
|
49
|
+
// note: this is ONLY dependent on whether the top level is a media query (ignores nestedQuery)
|
|
50
|
+
if (isMediaQuery) {
|
|
51
|
+
output.push(`${indent}:root {`);
|
|
52
|
+
indent += ' ';
|
|
53
|
+
}
|
|
54
|
+
for (const [k, v] of Object.entries(rule.declarations)) {
|
|
55
|
+
output.push(`${indent}${k}: ${v};`);
|
|
56
|
+
}
|
|
57
|
+
// base closing brackets on indent level
|
|
58
|
+
while (indent !== '') {
|
|
59
|
+
indent = indent.substring(0, indent.length - 2);
|
|
60
|
+
output.push(`${indent}}`);
|
|
61
|
+
}
|
|
62
|
+
return output.join('\n');
|
|
63
|
+
}
|
|
64
|
+
//# sourceMappingURL=lib.js.map
|
package/dist/lib.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
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;
|