@terrazzo/plugin-vanilla-extract 2.3.0 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/index.d.ts +4 -101
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +140 -206
- package/dist/index.js.map +1 -1
- package/dist/lib.d.ts +86 -0
- package/dist/lib.d.ts.map +1 -0
- package/dist/lib.js +131 -0
- package/dist/lib.js.map +1 -0
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @terrazzo/plugin-vanilla-extract
|
|
2
2
|
|
|
3
|
+
## 2.5.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#791](https://github.com/terrazzoapp/terrazzo/pull/791) [`2a7bb89`](https://github.com/terrazzoapp/terrazzo/commit/2a7bb898033ffbf5d4d1c5a120aa60a78dfca7ed) Thanks [@mrginglymus](https://github.com/mrginglymus)! - Upgrade to tsgo/TypeScript 7
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`055b580`](https://github.com/terrazzoapp/terrazzo/commit/055b580313c08dba8810e2690fea832f5d09a647), [`a05196b`](https://github.com/terrazzoapp/terrazzo/commit/a05196bb373c03528ca6cd6eabd6805ff27b009c)]:
|
|
10
|
+
- @terrazzo/cli@2.4.1
|
|
11
|
+
- @terrazzo/parser@2.5.0
|
|
12
|
+
- @terrazzo/plugin-css@2.5.0
|
|
13
|
+
|
|
14
|
+
## 2.4.0
|
|
15
|
+
|
|
16
|
+
### Minor Changes
|
|
17
|
+
|
|
18
|
+
- [#778](https://github.com/terrazzoapp/terrazzo/pull/778) [`bdca3be`](https://github.com/terrazzoapp/terrazzo/commit/bdca3be143f7d7a1f06e4ca50e652c85f1d12a24) Thanks [@drwpow](https://github.com/drwpow)! - Feat: add orthogonality detection in resolver API (minus $extends)
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [[`bdca3be`](https://github.com/terrazzoapp/terrazzo/commit/bdca3be143f7d7a1f06e4ca50e652c85f1d12a24), [`84b1dba`](https://github.com/terrazzoapp/terrazzo/commit/84b1dbacc0fe1aa3331d90e61d308eb91f96f8d5)]:
|
|
23
|
+
- @terrazzo/parser@2.4.0
|
|
24
|
+
- @terrazzo/cli@2.4.0
|
|
25
|
+
- @terrazzo/plugin-css@2.4.0
|
|
26
|
+
|
|
3
27
|
## 2.3.0
|
|
4
28
|
|
|
5
29
|
### Minor Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,102 +1,5 @@
|
|
|
1
|
-
import { Plugin
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
declare const THEME_EXPORT = "vars";
|
|
6
|
-
interface VanillaExtractPluginOptions {
|
|
7
|
-
/**
|
|
8
|
-
* Filename to generate.
|
|
9
|
-
* @default "theme.css.ts"
|
|
10
|
-
*/
|
|
11
|
-
filename?: string;
|
|
12
|
-
/**
|
|
13
|
-
* - true: use global `createGlobalThemeContract()` API
|
|
14
|
-
* - false: use scoped `createThemeContract()` API
|
|
15
|
-
* @default true
|
|
16
|
-
*/
|
|
17
|
-
globalThemeContract?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Mapping of exported JS variables to token modes. The key MUST be a valid JS identifier.
|
|
20
|
-
* @example
|
|
21
|
-
*
|
|
22
|
-
* ```js
|
|
23
|
-
* themes: {
|
|
24
|
-
* default: { mode: "." }, // "." refers to the default mode, or no mode
|
|
25
|
-
* light: { mode: "light" },
|
|
26
|
-
* dark: { mode: "dark" },
|
|
27
|
-
* }
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
|
-
themes?: Record<string, {
|
|
31
|
-
mode: string | string[];
|
|
32
|
-
input?: never;
|
|
33
|
-
} | {
|
|
34
|
-
mode?: never;
|
|
35
|
-
input: Record<string, string>;
|
|
36
|
-
}>;
|
|
37
|
-
/**
|
|
38
|
-
* Mapping of exported JS variables to token modes for global themes. The key MUST be a valid JS identifier.
|
|
39
|
-
* @example
|
|
40
|
-
*
|
|
41
|
-
* ```js
|
|
42
|
-
* globalThemes: {
|
|
43
|
-
* default: { selector: ":root", mode: "." }, // "." refers to the default mode, or no mode
|
|
44
|
-
* light: { selector: "[data-color-mode=light]", mode: "light" },
|
|
45
|
-
* dark: { selector: "[data-color-mode=dark]" mode: "dark" },
|
|
46
|
-
* }
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
globalThemes?: Record<string, {
|
|
50
|
-
selector: string;
|
|
51
|
-
mode: string | string[];
|
|
52
|
-
input?: never;
|
|
53
|
-
} | {
|
|
54
|
-
selector: string;
|
|
55
|
-
mode?: never;
|
|
56
|
-
input: Record<string, string>;
|
|
57
|
-
}>;
|
|
58
|
-
/**
|
|
59
|
-
* Change the naming strategy for the createTheme() API’s `[class, vars]` tuple.
|
|
60
|
-
* @default (name) => [`${name}Class`, name]
|
|
61
|
-
*/
|
|
62
|
-
themeVarNaming?: (name: string) => [string, string];
|
|
63
|
-
}
|
|
64
|
-
declare const VE: {
|
|
65
|
-
createTheme: string;
|
|
66
|
-
createGlobalTheme: string;
|
|
67
|
-
createThemeContract: string;
|
|
68
|
-
createGlobalThemeContract: string;
|
|
69
|
-
};
|
|
70
|
-
declare function isJSIdent(ident: unknown): boolean;
|
|
71
|
-
/** Generate createThemeContract() or createGlobalThemeContract() */
|
|
72
|
-
declare function generateThemeContract({
|
|
73
|
-
tokens,
|
|
74
|
-
globalThemeContract
|
|
75
|
-
}: {
|
|
76
|
-
tokens: TokenTransformed[];
|
|
77
|
-
globalThemeContract: boolean;
|
|
78
|
-
}): string;
|
|
79
|
-
/** Generate createTheme()/createGlobalTheme() */
|
|
80
|
-
declare function generateTheme({
|
|
81
|
-
name,
|
|
82
|
-
namingPattern,
|
|
83
|
-
tokens,
|
|
84
|
-
selector,
|
|
85
|
-
globalTheme
|
|
86
|
-
}: {
|
|
87
|
-
name: string;
|
|
88
|
-
namingPattern: (name: string) => [string, string];
|
|
89
|
-
tokens: TokenTransformed[];
|
|
90
|
-
selector?: string;
|
|
91
|
-
globalTheme?: boolean;
|
|
92
|
-
}): string;
|
|
93
|
-
/** Encode an alias to a Vanilla Extract token inside a JSON array */
|
|
94
|
-
declare function serializeValue(value: string | number | boolean, tokens: TokenTransformed[]): string;
|
|
95
|
-
/** Decode all aliases from a JSON string */
|
|
96
|
-
declare function deserializeAllValues(json: string): string;
|
|
97
|
-
//#endregion
|
|
98
|
-
//#region src/index.d.ts
|
|
99
|
-
declare function vanillaExtractPlugin(options: VanillaExtractPluginOptions): Plugin;
|
|
100
|
-
//#endregion
|
|
101
|
-
export { FORMAT_ID, THEME_EXPORT, VE, VanillaExtractPluginOptions, vanillaExtractPlugin as default, deserializeAllValues, generateTheme, generateThemeContract, isJSIdent, serializeValue };
|
|
1
|
+
import type { Plugin } from '@terrazzo/parser';
|
|
2
|
+
import { type VanillaExtractPluginOptions } from './lib.js';
|
|
3
|
+
export * from './lib.js';
|
|
4
|
+
export default function vanillaExtractPlugin(options: VanillaExtractPluginOptions): Plugin;
|
|
102
5
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAKL,KAAK,2BAA2B,EAEjC,MAAM,UAAU,CAAC;AAElB,cAAc,UAAU,CAAC;AAMzB,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,OAAO,EAAE,2BAA2B,GAAG,MAAM,CAqJzF"}
|
package/dist/index.js
CHANGED
|
@@ -1,208 +1,142 @@
|
|
|
1
|
-
import { FORMAT_ID as
|
|
2
|
-
import { camelCase } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { FORMAT_ID as FORMAT_CSS } from '@terrazzo/plugin-css';
|
|
2
|
+
import { camelCase } from 'scule';
|
|
3
|
+
import { FORMAT_ID as FORMAT_VANILLA, generateTheme, generateThemeContract, isJSIdent, VE, } from './lib.js';
|
|
4
|
+
export * from './lib.js';
|
|
5
|
+
/* oxlint-disable require-await */
|
|
6
|
+
const PLUGIN_NAME = '@terrazzo/plugin-vanilla-extract';
|
|
7
|
+
export default function vanillaExtractPlugin(options) {
|
|
8
|
+
const filename = options.filename ?? 'theme.css.ts';
|
|
9
|
+
const globalThemeContract = options.globalThemeContract ?? true;
|
|
10
|
+
let isResolver = false;
|
|
11
|
+
return {
|
|
12
|
+
name: PLUGIN_NAME,
|
|
13
|
+
enforce: 'post', // ensure this comes after @terrazzo/plugin-css
|
|
14
|
+
config(config, { logger }) {
|
|
15
|
+
if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {
|
|
16
|
+
logger.error({
|
|
17
|
+
group: 'plugin',
|
|
18
|
+
label: PLUGIN_NAME,
|
|
19
|
+
message: '@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Vanilla Extract plugin.',
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
const allThemes = { ...options.themes, ...options.globalThemes };
|
|
23
|
+
isResolver = Object.values(allThemes).every((t) => t.input);
|
|
24
|
+
if (Object.keys(allThemes).length === 0) {
|
|
25
|
+
logger.error({
|
|
26
|
+
group: 'plugin',
|
|
27
|
+
label: PLUGIN_NAME,
|
|
28
|
+
message: 'Must generate at least one theme in "themes" or "globalThemes".',
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
for (const k of Object.keys(allThemes)) {
|
|
32
|
+
if (!isJSIdent(k)) {
|
|
33
|
+
logger.error({
|
|
34
|
+
group: 'plugin',
|
|
35
|
+
label: PLUGIN_NAME,
|
|
36
|
+
message: `${JSON.stringify(k)} must be a valid JS identifier. Prefer camelCase so it may be used in JS.`,
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
if (isResolver && allThemes[k].mode) {
|
|
40
|
+
logger.error({
|
|
41
|
+
group: 'plugin',
|
|
42
|
+
label: PLUGIN_NAME,
|
|
43
|
+
message: `${k}: Can’t use "mode" while other themes use "input". Use either "mode" or "input" globally.`,
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
async transform({ getTransforms, setTransform }) {
|
|
49
|
+
if (isResolver) {
|
|
50
|
+
for (const { input } of Object.values(options.themes ?? options.globalThemes ?? {})) {
|
|
51
|
+
for (const token of getTransforms({ format: FORMAT_CSS, input })) {
|
|
52
|
+
const localID = token.token.jsonID // use jsonID to account for $root tokens
|
|
53
|
+
.slice(2)
|
|
54
|
+
.split('/')
|
|
55
|
+
.map((part) => camelCase(part))
|
|
56
|
+
.join('.');
|
|
57
|
+
const value = {
|
|
58
|
+
...(token.type === 'SINGLE_VALUE' ? { '.': token.value } : { ...token.value }),
|
|
59
|
+
__cssName: token.localID,
|
|
60
|
+
};
|
|
61
|
+
setTransform(token.id, {
|
|
62
|
+
format: FORMAT_VANILLA,
|
|
63
|
+
localID,
|
|
64
|
+
value,
|
|
65
|
+
input,
|
|
66
|
+
meta: { 'token-listing': { name: `vars.${localID}` } },
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
// legacy modes
|
|
73
|
+
// deprecate in 3.0
|
|
74
|
+
for (const token of getTransforms({ format: FORMAT_CSS })) {
|
|
75
|
+
const localID = token.token.jsonID // use jsonID to account for $root tokens
|
|
76
|
+
.slice(2)
|
|
77
|
+
.split('/')
|
|
78
|
+
.map((part) => camelCase(part))
|
|
79
|
+
.join('.');
|
|
80
|
+
const value = {
|
|
81
|
+
...(token.type === 'SINGLE_VALUE' ? { '.': token.value } : { ...token.value }),
|
|
82
|
+
__cssName: token.localID,
|
|
83
|
+
};
|
|
84
|
+
setTransform(token.id, {
|
|
85
|
+
format: FORMAT_VANILLA,
|
|
86
|
+
localID,
|
|
87
|
+
value,
|
|
88
|
+
mode: token.mode,
|
|
89
|
+
meta: { 'token-listing': { name: `vars.${localID}` } },
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
async build({ getTransforms, outputFile }) {
|
|
94
|
+
const imports = new Set();
|
|
95
|
+
const output = [];
|
|
96
|
+
// generate theme contract
|
|
97
|
+
const firstInput = Object.values(options.globalThemes ?? options.themes ?? {})[0]?.input ?? {};
|
|
98
|
+
output.push(generateThemeContract({
|
|
99
|
+
tokens: getTransforms({
|
|
100
|
+
format: FORMAT_VANILLA,
|
|
101
|
+
...(isResolver ? { input: firstInput } : { mode: '.' }),
|
|
102
|
+
}),
|
|
103
|
+
globalThemeContract,
|
|
104
|
+
}));
|
|
105
|
+
imports.add(globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract);
|
|
106
|
+
// generate themes/global themes
|
|
107
|
+
const namingPattern = options?.themeVarNaming ?? ((n) => [`${n}Class`, n]);
|
|
108
|
+
for (const [name, { mode, input }] of Object.entries(options.themes ?? {})) {
|
|
109
|
+
const theme = generateTheme({
|
|
110
|
+
name,
|
|
111
|
+
namingPattern,
|
|
112
|
+
tokens: getTransforms({
|
|
113
|
+
format: FORMAT_VANILLA,
|
|
114
|
+
...(mode ? { mode } : { input }),
|
|
115
|
+
}),
|
|
116
|
+
});
|
|
117
|
+
imports.add(VE.createTheme);
|
|
118
|
+
output.push(theme);
|
|
119
|
+
}
|
|
120
|
+
for (const [name, { selector, mode, input }] of Object.entries(options.globalThemes ?? {})) {
|
|
121
|
+
const theme = generateTheme({
|
|
122
|
+
name,
|
|
123
|
+
namingPattern,
|
|
124
|
+
tokens: getTransforms({
|
|
125
|
+
format: FORMAT_VANILLA,
|
|
126
|
+
...(mode ? { mode } : { input }),
|
|
127
|
+
}),
|
|
128
|
+
selector,
|
|
129
|
+
globalTheme: true,
|
|
130
|
+
});
|
|
131
|
+
imports.add(VE.createGlobalTheme);
|
|
132
|
+
output.push(theme);
|
|
133
|
+
}
|
|
134
|
+
outputFile(filename, [
|
|
135
|
+
`import { ${[...imports].toSorted().join(', ')} } from "@vanilla-extract/css";`,
|
|
136
|
+
'',
|
|
137
|
+
...output,
|
|
138
|
+
].join('\n'));
|
|
139
|
+
},
|
|
140
|
+
};
|
|
15
141
|
}
|
|
16
|
-
/** Generate createThemeContract() or createGlobalThemeContract() */
|
|
17
|
-
function generateThemeContract({ tokens, globalThemeContract }) {
|
|
18
|
-
const tokensObj = {};
|
|
19
|
-
for (const token of tokens) {
|
|
20
|
-
const parts = token.localID.split(".");
|
|
21
|
-
const name = parts.pop();
|
|
22
|
-
let node = tokensObj;
|
|
23
|
-
for (const part of parts) {
|
|
24
|
-
if (!(part in node)) node[part] = {};
|
|
25
|
-
node = node[part];
|
|
26
|
-
}
|
|
27
|
-
if (token.type !== "MULTI_VALUE") throw new Error("Error in plugin-vanilla-extract: values didn’t generate correctly.");
|
|
28
|
-
const cssName = token.value.__cssName?.replace(/^--/, "");
|
|
29
|
-
if ("." in token.value) node[name] = globalThemeContract ? cssName : null;
|
|
30
|
-
else {
|
|
31
|
-
node[name] = {};
|
|
32
|
-
for (const k of Object.keys(token.value)) {
|
|
33
|
-
if (k === "__cssName") continue;
|
|
34
|
-
node[name][camelCase(k)] = globalThemeContract ? `${cssName}-${k}` : null;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
return `export const ${THEME_EXPORT} = ${globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract}(${JSON.stringify(tokensObj, void 0, 2)});\n`;
|
|
39
|
-
}
|
|
40
|
-
/** Generate createTheme()/createGlobalTheme() */
|
|
41
|
-
function generateTheme({ name, namingPattern, tokens, selector, globalTheme = false }) {
|
|
42
|
-
const tokensObj = {};
|
|
43
|
-
for (const token of tokens) {
|
|
44
|
-
const parts = token.localID.split(".");
|
|
45
|
-
const name = parts.pop();
|
|
46
|
-
let node = tokensObj;
|
|
47
|
-
for (const part of parts) {
|
|
48
|
-
if (!(part in node)) node[part] = {};
|
|
49
|
-
node = node[part];
|
|
50
|
-
}
|
|
51
|
-
if (token.type === "MULTI_VALUE") if ("." in token.value) node[name] = serializeValue(token.value["."], tokens);
|
|
52
|
-
else {
|
|
53
|
-
node[name] = {};
|
|
54
|
-
for (const [k, v] of Object.entries(token.value)) {
|
|
55
|
-
if (k === "__cssName") continue;
|
|
56
|
-
node[name][camelCase(k)] = serializeValue(v, tokens);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else node[name] = serializeValue(token.value, tokens);
|
|
60
|
-
}
|
|
61
|
-
return `export const ${globalTheme ? `${name}` : `[${namingPattern(name)[0]}, ${namingPattern(name)[1]}]`} = ${globalTheme ? `${VE.createGlobalTheme}(${JSON.stringify(selector)}, ${THEME_EXPORT}, ` : `${VE.createTheme}(${THEME_EXPORT}, `}${deserializeAllValues(JSON.stringify(tokensObj, void 0, 2))});\n`;
|
|
62
|
-
}
|
|
63
|
-
const IDENT_ESCAPE = "__ident__";
|
|
64
|
-
/** Encode an alias to a Vanilla Extract token inside a JSON array */
|
|
65
|
-
function serializeValue(value, tokens) {
|
|
66
|
-
if (typeof value === "number" || typeof value === "boolean") return String(value);
|
|
67
|
-
const [_, varName] = value.match(/^var\(([^)]+)\)$/) ?? [];
|
|
68
|
-
if (varName) {
|
|
69
|
-
const originalToken = tokens.find((t) => t.type === "MULTI_VALUE" && t.value.__cssName === varName);
|
|
70
|
-
if (!originalToken) throw new Error(`Can’t find token associated with ${value}`);
|
|
71
|
-
let jsIdent = "";
|
|
72
|
-
const parts = originalToken.localID.split(".");
|
|
73
|
-
for (const part of parts) if (!isJSIdent(part)) jsIdent += /^[1-9][0-9]*$/.test(part) ? `[${part}]` : `['${part.replace(/'/g, "\\'")}']`;
|
|
74
|
-
else jsIdent += `.${part}`;
|
|
75
|
-
return `${IDENT_ESCAPE}${THEME_EXPORT}${jsIdent}${IDENT_ESCAPE}`;
|
|
76
|
-
}
|
|
77
|
-
return value;
|
|
78
|
-
}
|
|
79
|
-
/** Decode all aliases from a JSON string */
|
|
80
|
-
function deserializeAllValues(json) {
|
|
81
|
-
return json.replace(/"__ident__(.*)__ident__"/g, "$1");
|
|
82
|
-
}
|
|
83
|
-
//#endregion
|
|
84
|
-
//#region src/index.ts
|
|
85
|
-
const PLUGIN_NAME = "@terrazzo/plugin-vanilla-extract";
|
|
86
|
-
function vanillaExtractPlugin(options) {
|
|
87
|
-
const filename = options.filename ?? "theme.css.ts";
|
|
88
|
-
const globalThemeContract = options.globalThemeContract ?? true;
|
|
89
|
-
let isResolver = false;
|
|
90
|
-
return {
|
|
91
|
-
name: PLUGIN_NAME,
|
|
92
|
-
enforce: "post",
|
|
93
|
-
config(config, { logger }) {
|
|
94
|
-
if (!config.plugins.some((p) => p.name === "@terrazzo/plugin-css")) logger.error({
|
|
95
|
-
group: "plugin",
|
|
96
|
-
label: PLUGIN_NAME,
|
|
97
|
-
message: "@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Vanilla Extract plugin."
|
|
98
|
-
});
|
|
99
|
-
const allThemes = {
|
|
100
|
-
...options.themes,
|
|
101
|
-
...options.globalThemes
|
|
102
|
-
};
|
|
103
|
-
isResolver = Object.values(allThemes).every((t) => t.input);
|
|
104
|
-
if (!Object.keys(allThemes).length) logger.error({
|
|
105
|
-
group: "plugin",
|
|
106
|
-
label: PLUGIN_NAME,
|
|
107
|
-
message: "Must generate at least one theme in \"themes\" or \"globalThemes\"."
|
|
108
|
-
});
|
|
109
|
-
for (const k of Object.keys(allThemes)) {
|
|
110
|
-
if (!isJSIdent(k)) logger.error({
|
|
111
|
-
group: "plugin",
|
|
112
|
-
label: PLUGIN_NAME,
|
|
113
|
-
message: `${JSON.stringify(k)} must be a valid JS identifier. Prefer camelCase so it may be used in JS.`
|
|
114
|
-
});
|
|
115
|
-
if (isResolver && allThemes[k].mode) logger.error({
|
|
116
|
-
group: "plugin",
|
|
117
|
-
label: PLUGIN_NAME,
|
|
118
|
-
message: `${k}: Can’t use "mode" while other themes use "input". Use either "mode" or "input" globally.`
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
async transform({ getTransforms, setTransform }) {
|
|
123
|
-
if (isResolver) {
|
|
124
|
-
for (const { input } of Object.values(options.themes ?? options.globalThemes ?? {})) for (const token of getTransforms({
|
|
125
|
-
format: FORMAT_ID$1,
|
|
126
|
-
input
|
|
127
|
-
})) {
|
|
128
|
-
const localID = token.token.jsonID.slice(2).split("/").map((part) => camelCase(part)).join(".");
|
|
129
|
-
const value = {
|
|
130
|
-
...token.type === "SINGLE_VALUE" ? { ".": token.value } : { ...token.value },
|
|
131
|
-
__cssName: token.localID
|
|
132
|
-
};
|
|
133
|
-
setTransform(token.id, {
|
|
134
|
-
format: FORMAT_ID,
|
|
135
|
-
localID,
|
|
136
|
-
value,
|
|
137
|
-
input,
|
|
138
|
-
meta: { "token-listing": { name: `vars.${localID}` } }
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
for (const token of getTransforms({ format: FORMAT_ID$1 })) {
|
|
144
|
-
const localID = token.token.jsonID.slice(2).split("/").map((part) => camelCase(part)).join(".");
|
|
145
|
-
const value = {
|
|
146
|
-
...token.type === "SINGLE_VALUE" ? { ".": token.value } : { ...token.value },
|
|
147
|
-
__cssName: token.localID
|
|
148
|
-
};
|
|
149
|
-
setTransform(token.id, {
|
|
150
|
-
format: FORMAT_ID,
|
|
151
|
-
localID,
|
|
152
|
-
value,
|
|
153
|
-
mode: token.mode,
|
|
154
|
-
meta: { "token-listing": { name: `vars.${localID}` } }
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
async build({ getTransforms, outputFile }) {
|
|
159
|
-
const imports = /* @__PURE__ */ new Set();
|
|
160
|
-
const output = [];
|
|
161
|
-
const firstInput = Object.values(options.globalThemes ?? options.themes ?? {})[0]?.input ?? {};
|
|
162
|
-
output.push(generateThemeContract({
|
|
163
|
-
tokens: getTransforms({
|
|
164
|
-
format: FORMAT_ID,
|
|
165
|
-
...isResolver ? { input: firstInput } : { mode: "." }
|
|
166
|
-
}),
|
|
167
|
-
globalThemeContract
|
|
168
|
-
}));
|
|
169
|
-
imports.add(globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract);
|
|
170
|
-
const namingPattern = options?.themeVarNaming ?? ((n) => [`${n}Class`, n]);
|
|
171
|
-
for (const [name, { mode, input }] of Object.entries(options.themes ?? {})) {
|
|
172
|
-
const theme = generateTheme({
|
|
173
|
-
name,
|
|
174
|
-
namingPattern,
|
|
175
|
-
tokens: getTransforms({
|
|
176
|
-
format: FORMAT_ID,
|
|
177
|
-
...mode ? { mode } : { input }
|
|
178
|
-
})
|
|
179
|
-
});
|
|
180
|
-
imports.add(VE.createTheme);
|
|
181
|
-
output.push(theme);
|
|
182
|
-
}
|
|
183
|
-
for (const [name, { selector, mode, input }] of Object.entries(options.globalThemes ?? {})) {
|
|
184
|
-
const theme = generateTheme({
|
|
185
|
-
name,
|
|
186
|
-
namingPattern,
|
|
187
|
-
tokens: getTransforms({
|
|
188
|
-
format: FORMAT_ID,
|
|
189
|
-
...mode ? { mode } : { input }
|
|
190
|
-
}),
|
|
191
|
-
selector,
|
|
192
|
-
globalTheme: true
|
|
193
|
-
});
|
|
194
|
-
imports.add(VE.createGlobalTheme);
|
|
195
|
-
output.push(theme);
|
|
196
|
-
}
|
|
197
|
-
outputFile(filename, [
|
|
198
|
-
`import { ${[...imports].sort().join(", ")} } from "@vanilla-extract/css";`,
|
|
199
|
-
"",
|
|
200
|
-
...output
|
|
201
|
-
].join("\n"));
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
}
|
|
205
|
-
//#endregion
|
|
206
|
-
export { FORMAT_ID, THEME_EXPORT, VE, vanillaExtractPlugin as default, deserializeAllValues, generateTheme, generateThemeContract, isJSIdent, serializeValue };
|
|
207
|
-
|
|
208
142
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["FORMAT_CSS","FORMAT_VANILLA"],"sources":["../src/lib.ts","../src/index.ts"],"sourcesContent":["import type { TokenTransformed } from '@terrazzo/parser';\nimport type ve from '@vanilla-extract/css';\nimport { camelCase } from 'scule';\n\nexport const FORMAT_ID = 'vanilla-extract';\nexport const THEME_EXPORT = 'vars'; // Could be a future option, for now match docs\n\nexport interface VanillaExtractPluginOptions {\n /**\n * Filename to generate.\n * @default \"theme.css.ts\"\n */\n filename?: string;\n /**\n * - true: use global `createGlobalThemeContract()` API\n * - false: use scoped `createThemeContract()` API\n * @default true\n */\n globalThemeContract?: boolean;\n /**\n * Mapping of exported JS variables to token modes. The key MUST be a valid JS identifier.\n * @example\n *\n * ```js\n * themes: {\n * default: { mode: \".\" }, // \".\" refers to the default mode, or no mode\n * light: { mode: \"light\" },\n * dark: { mode: \"dark\" },\n * }\n * ```\n */\n themes?: Record<\n string,\n | {\n /* @deprecated */\n mode: string | string[];\n input?: never;\n }\n | {\n /* @deprecated */\n mode?: never;\n input: Record<string, string>;\n }\n >;\n /**\n * Mapping of exported JS variables to token modes for global themes. The key MUST be a valid JS identifier.\n * @example\n *\n * ```js\n * globalThemes: {\n * default: { selector: \":root\", mode: \".\" }, // \".\" refers to the default mode, or no mode\n * light: { selector: \"[data-color-mode=light]\", mode: \"light\" },\n * dark: { selector: \"[data-color-mode=dark]\" mode: \"dark\" },\n * }\n * ```\n */\n globalThemes?: Record<\n string,\n | {\n selector: string;\n /* @deprecated */\n mode: string | string[];\n input?: never;\n }\n | {\n selector: string;\n /* @deprecated */\n mode?: never;\n input: Record<string, string>;\n }\n >;\n /**\n * Change the naming strategy for the createTheme() API’s `[class, vars]` tuple.\n * @default (name) => [`${name}Class`, name]\n */\n themeVarNaming?: (name: string) => [string, string];\n}\n\n// imports saved as a constant to prevent typos\nexport const VE = {\n createTheme: 'createTheme',\n createGlobalTheme: 'createGlobalTheme',\n createThemeContract: 'createThemeContract',\n createGlobalThemeContract: 'createGlobalThemeContract',\n} satisfies Partial<Record<keyof typeof ve, string>>;\n\nexport function isJSIdent(ident: unknown): boolean {\n if (typeof ident !== 'string') {\n return false;\n }\n return /^[A-Za-z$_][A-Za-z0-9_$]*$/.test(ident);\n}\n\n/** Generate createThemeContract() or createGlobalThemeContract() */\nexport function generateThemeContract({\n tokens,\n globalThemeContract,\n}: {\n tokens: TokenTransformed[];\n globalThemeContract: boolean;\n}): string {\n const tokensObj: any = {};\n for (const token of tokens) {\n const parts = token.localID!.split('.');\n const name = parts.pop()!;\n\n // rebuild nested object again from flattened tokens array\n let node = tokensObj;\n for (const part of parts) {\n if (!(part in node)) {\n node[part] = {};\n }\n node = node[part];\n }\n\n if (token.type !== 'MULTI_VALUE') {\n throw new Error('Error in plugin-vanilla-extract: values didn’t generate correctly.');\n }\n\n const cssName = token.value.__cssName?.replace(/^--/, '');\n if ('.' in token.value) {\n node[name] = globalThemeContract ? cssName : null;\n } else {\n node[name] = {};\n for (const k of Object.keys(token.value)) {\n if (k === '__cssName') {\n continue;\n }\n node[name][camelCase(k)] = globalThemeContract ? `${cssName}-${k}` : null;\n }\n }\n }\n\n return `export const ${THEME_EXPORT} = ${globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract}(${JSON.stringify(tokensObj, undefined, 2)});\\n`;\n}\n\n/** Generate createTheme()/createGlobalTheme() */\nexport function generateTheme({\n name,\n namingPattern,\n tokens,\n selector,\n globalTheme = false,\n}: {\n name: string;\n namingPattern: (name: string) => [string, string];\n tokens: TokenTransformed[];\n selector?: string;\n globalTheme?: boolean;\n}) {\n const tokensObj: any = {};\n for (const token of tokens) {\n const parts = token.localID!.split('.');\n const name = parts.pop()!;\n\n // rebuild nested object again from flattened tokens array\n let node = tokensObj;\n for (const part of parts) {\n if (!(part in node)) {\n node[part] = {};\n }\n node = node[part];\n }\n if (token.type === 'MULTI_VALUE') {\n if ('.' in token.value) {\n node[name] = serializeValue(token.value['.'], tokens);\n } else {\n node[name] = {};\n for (const [k, v] of Object.entries(token.value)) {\n if (k === '__cssName') {\n continue;\n }\n node[name][camelCase(k)] = serializeValue(v, tokens);\n }\n }\n } else {\n node[name] = serializeValue(token.value, tokens);\n }\n }\n\n const ident = globalTheme ? `${name}` : `[${namingPattern(name)[0]}, ${namingPattern(name)[1]}]`;\n const prefix = globalTheme\n ? `${VE.createGlobalTheme}(${JSON.stringify(selector)}, ${THEME_EXPORT}, `\n : `${VE.createTheme}(${THEME_EXPORT}, `;\n const rawTokens = JSON.stringify(tokensObj, undefined, 2);\n return `export const ${ident} = ${prefix}${deserializeAllValues(rawTokens)});\\n`;\n}\n\nconst IDENT_ESCAPE = '__ident__';\n\n/** Encode an alias to a Vanilla Extract token inside a JSON array */\nexport function serializeValue(value: string | number | boolean, tokens: TokenTransformed[]): string {\n // raw values: number / boolean\n if (typeof value === 'number' || typeof value === 'boolean') {\n return String(value);\n }\n\n // aliases\n // ⚠️ Warning! Trying to simply transform CSS vars to IDs is brittle, error-prone, and will break in many conditions.\n // However, reverse lookups from generated CSS vars is stable and safe. Subtle but important difference.\n const [_, varName] = value.match(/^var\\(([^)]+)\\)$/) ?? [];\n if (varName) {\n const originalToken = tokens.find((t) => t.type === 'MULTI_VALUE' && t.value.__cssName === varName);\n if (!originalToken) {\n throw new Error(`Can’t find token associated with ${value}`);\n }\n let jsIdent = '';\n const parts = originalToken.localID!.split('.');\n for (const part of parts) {\n if (!isJSIdent(part)) {\n // Note: there are probably some token IDs with quotation marks in them that this\n // would break on, but also, how dare you, you monster\n jsIdent += /^[1-9][0-9]*$/.test(part) ? `[${part}]` : `['${part.replace(/'/g, \"\\\\'\")}']`;\n } else {\n jsIdent += `.${part}`;\n }\n }\n return `${IDENT_ESCAPE}${THEME_EXPORT}${jsIdent}${IDENT_ESCAPE}`;\n }\n\n // special case: px converts to numbers\n // if (/^\\d+px/i.test(value)) {\n // return Number.parseFloat(value);\n // }\n return value;\n}\n\n/** Decode all aliases from a JSON string */\nexport function deserializeAllValues(json: string): string {\n return json.replace(/\"__ident__(.*)__ident__\"/g, '$1');\n}\n","import type { Plugin } from '@terrazzo/parser';\nimport { FORMAT_ID as FORMAT_CSS } from '@terrazzo/plugin-css';\nimport { camelCase } from 'scule';\nimport {\n FORMAT_ID as FORMAT_VANILLA,\n generateTheme,\n generateThemeContract,\n isJSIdent,\n type VanillaExtractPluginOptions,\n VE,\n} from './lib.js';\n\nexport * from './lib.js';\n\nconst PLUGIN_NAME = '@terrazzo/plugin-vanilla-extract';\n\nexport default function vanillaExtractPlugin(options: VanillaExtractPluginOptions): Plugin {\n const filename = options.filename ?? 'theme.css.ts';\n const globalThemeContract = options.globalThemeContract ?? true;\n let isResolver = false;\n\n return {\n name: PLUGIN_NAME,\n enforce: 'post', // ensure this comes after @terrazzo/plugin-css\n config(config, { logger }) {\n if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {\n logger.error({\n group: 'plugin',\n label: PLUGIN_NAME,\n message:\n '@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Vanilla Extract plugin.',\n });\n }\n const allThemes = { ...options.themes, ...options.globalThemes };\n isResolver = Object.values(allThemes).every((t) => t.input);\n\n if (!Object.keys(allThemes).length) {\n logger.error({\n group: 'plugin',\n label: PLUGIN_NAME,\n message: 'Must generate at least one theme in \"themes\" or \"globalThemes\".',\n });\n }\n for (const k of Object.keys(allThemes)) {\n if (!isJSIdent(k)) {\n logger.error({\n group: 'plugin',\n label: PLUGIN_NAME,\n message: `${JSON.stringify(k)} must be a valid JS identifier. Prefer camelCase so it may be used in JS.`,\n });\n }\n if (isResolver && allThemes[k]!.mode) {\n logger.error({\n group: 'plugin',\n label: PLUGIN_NAME,\n message: `${k}: Can’t use \"mode\" while other themes use \"input\". Use either \"mode\" or \"input\" globally.`,\n });\n }\n }\n },\n\n async transform({ getTransforms, setTransform }) {\n if (isResolver) {\n for (const { input } of Object.values(options.themes ?? options.globalThemes ?? {})) {\n for (const token of getTransforms({ format: FORMAT_CSS, input })) {\n const localID = token.token.jsonID // use jsonID to account for $root tokens\n .slice(2)\n .split('/')\n .map((part) => camelCase(part))\n .join('.');\n const value = {\n ...(token.type === 'SINGLE_VALUE' ? { '.': token.value } : { ...token.value }),\n __cssName: token.localID!,\n };\n setTransform(token.id, {\n format: FORMAT_VANILLA,\n localID,\n value,\n input,\n meta: { 'token-listing': { name: `vars.${localID}` } },\n });\n }\n }\n return;\n }\n\n // legacy modes\n // deprecate in 3.0\n for (const token of getTransforms({ format: FORMAT_CSS })) {\n const localID = token.token.jsonID // use jsonID to account for $root tokens\n .slice(2)\n .split('/')\n .map((part) => camelCase(part))\n .join('.');\n const value = {\n ...(token.type === 'SINGLE_VALUE' ? { '.': token.value } : { ...token.value }),\n __cssName: token.localID!,\n };\n setTransform(token.id, {\n format: FORMAT_VANILLA,\n localID,\n value,\n mode: token.mode,\n meta: { 'token-listing': { name: `vars.${localID}` } },\n });\n }\n },\n\n async build({ getTransforms, outputFile }) {\n const imports = new Set<string>();\n const output: string[] = [];\n\n // generate theme contract\n const firstInput = Object.values(options.globalThemes ?? options.themes ?? {})[0]?.input ?? {};\n output.push(\n generateThemeContract({\n tokens: getTransforms({\n format: FORMAT_VANILLA,\n ...(isResolver ? { input: firstInput } : { mode: '.' }),\n }),\n globalThemeContract,\n }),\n );\n imports.add(globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract);\n\n // generate themes/global themes\n const namingPattern = options?.themeVarNaming ?? ((n) => [`${n}Class`, n]);\n for (const [name, { mode, input }] of Object.entries(options.themes ?? {})) {\n const theme = generateTheme({\n name,\n namingPattern,\n tokens: getTransforms({\n format: FORMAT_VANILLA,\n ...(mode ? { mode } : { input }),\n }),\n });\n imports.add(VE.createTheme);\n output.push(theme);\n }\n for (const [name, { selector, mode, input }] of Object.entries(options.globalThemes ?? {})) {\n const theme = generateTheme({\n name,\n namingPattern,\n tokens: getTransforms({\n format: FORMAT_VANILLA,\n ...(mode ? { mode } : { input }),\n }),\n selector,\n globalTheme: true,\n });\n imports.add(VE.createGlobalTheme);\n output.push(theme);\n }\n\n outputFile(\n filename,\n [`import { ${[...imports].sort().join(', ')} } from \"@vanilla-extract/css\";`, '', ...output].join('\\n'),\n );\n },\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/lib.d.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import type { TokenTransformed } from '@terrazzo/parser';
|
|
2
|
+
export declare const FORMAT_ID = "vanilla-extract";
|
|
3
|
+
export declare const THEME_EXPORT = "vars";
|
|
4
|
+
export interface VanillaExtractPluginOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Filename to generate.
|
|
7
|
+
* @default "theme.css.ts"
|
|
8
|
+
*/
|
|
9
|
+
filename?: string;
|
|
10
|
+
/**
|
|
11
|
+
* - true: use global `createGlobalThemeContract()` API
|
|
12
|
+
* - false: use scoped `createThemeContract()` API
|
|
13
|
+
* @default true
|
|
14
|
+
*/
|
|
15
|
+
globalThemeContract?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Mapping of exported JS variables to token modes. The key MUST be a valid JS identifier.
|
|
18
|
+
* @example
|
|
19
|
+
*
|
|
20
|
+
* ```js
|
|
21
|
+
* themes: {
|
|
22
|
+
* default: { mode: "." }, // "." refers to the default mode, or no mode
|
|
23
|
+
* light: { mode: "light" },
|
|
24
|
+
* dark: { mode: "dark" },
|
|
25
|
+
* }
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
themes?: Record<string, {
|
|
29
|
+
mode: string | string[];
|
|
30
|
+
input?: never;
|
|
31
|
+
} | {
|
|
32
|
+
mode?: never;
|
|
33
|
+
input: Record<string, string>;
|
|
34
|
+
}>;
|
|
35
|
+
/**
|
|
36
|
+
* Mapping of exported JS variables to token modes for global themes. The key MUST be a valid JS identifier.
|
|
37
|
+
* @example
|
|
38
|
+
*
|
|
39
|
+
* ```js
|
|
40
|
+
* globalThemes: {
|
|
41
|
+
* default: { selector: ":root", mode: "." }, // "." refers to the default mode, or no mode
|
|
42
|
+
* light: { selector: "[data-color-mode=light]", mode: "light" },
|
|
43
|
+
* dark: { selector: "[data-color-mode=dark]" mode: "dark" },
|
|
44
|
+
* }
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
globalThemes?: Record<string, {
|
|
48
|
+
selector: string;
|
|
49
|
+
mode: string | string[];
|
|
50
|
+
input?: never;
|
|
51
|
+
} | {
|
|
52
|
+
selector: string;
|
|
53
|
+
mode?: never;
|
|
54
|
+
input: Record<string, string>;
|
|
55
|
+
}>;
|
|
56
|
+
/**
|
|
57
|
+
* Change the naming strategy for the createTheme() API’s `[class, vars]` tuple.
|
|
58
|
+
* @default (name) => [`${name}Class`, name]
|
|
59
|
+
*/
|
|
60
|
+
themeVarNaming?: (name: string) => [string, string];
|
|
61
|
+
}
|
|
62
|
+
export declare const VE: {
|
|
63
|
+
createTheme: string;
|
|
64
|
+
createGlobalTheme: string;
|
|
65
|
+
createThemeContract: string;
|
|
66
|
+
createGlobalThemeContract: string;
|
|
67
|
+
};
|
|
68
|
+
export declare function isJSIdent(ident: unknown): boolean;
|
|
69
|
+
/** Generate createThemeContract() or createGlobalThemeContract() */
|
|
70
|
+
export declare function generateThemeContract({ tokens, globalThemeContract, }: {
|
|
71
|
+
tokens: TokenTransformed[];
|
|
72
|
+
globalThemeContract: boolean;
|
|
73
|
+
}): string;
|
|
74
|
+
/** Generate createTheme()/createGlobalTheme() */
|
|
75
|
+
export declare function generateTheme({ name, namingPattern, tokens, selector, globalTheme, }: {
|
|
76
|
+
name: string;
|
|
77
|
+
namingPattern: (name: string) => [string, string];
|
|
78
|
+
tokens: TokenTransformed[];
|
|
79
|
+
selector?: string;
|
|
80
|
+
globalTheme?: boolean;
|
|
81
|
+
}): string;
|
|
82
|
+
/** Encode an alias to a Vanilla Extract token inside a JSON array */
|
|
83
|
+
export declare function serializeValue(value: string | number | boolean, tokens: TokenTransformed[]): string;
|
|
84
|
+
/** Decode all aliases from a JSON string */
|
|
85
|
+
export declare function deserializeAllValues(json: string): string;
|
|
86
|
+
//# sourceMappingURL=lib.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAC3C,eAAO,MAAM,YAAY,SAAS,CAAC;AAEnC,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CACb,MAAM,EACJ;QAEE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACxB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,GACD;QAEE,IAAI,CAAC,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC/B,CACJ,CAAC;IACF;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CACnB,MAAM,EACJ;QACE,QAAQ,EAAE,MAAM,CAAC;QAEjB,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACxB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,GACD;QACE,QAAQ,EAAE,MAAM,CAAC;QAEjB,IAAI,CAAC,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC/B,CACJ,CAAC;IACF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrD;AAGD,eAAO,MAAM,EAAE;;;;;CAKqC,CAAC;AAErD,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAKjD;AAED,oEAAoE;AACpE,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,mBAAmB,GACpB,EAAE;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;CAC9B,GAAG,MAAM,CAkCT;AAED,iDAAiD;AACjD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,aAAa,EACb,MAAM,EACN,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,UAqCA;AAID,qEAAqE;AACrE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAChC,MAAM,EAAE,gBAAgB,EAAE,GACzB,MAAM,CAsCR;AAED,4CAA4C;AAC5C,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEzD"}
|
package/dist/lib.js
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { camelCase } from 'scule';
|
|
2
|
+
export const FORMAT_ID = 'vanilla-extract';
|
|
3
|
+
export const THEME_EXPORT = 'vars'; // Could be a future option, for now match docs
|
|
4
|
+
// imports saved as a constant to prevent typos
|
|
5
|
+
export const VE = {
|
|
6
|
+
createTheme: 'createTheme',
|
|
7
|
+
createGlobalTheme: 'createGlobalTheme',
|
|
8
|
+
createThemeContract: 'createThemeContract',
|
|
9
|
+
createGlobalThemeContract: 'createGlobalThemeContract',
|
|
10
|
+
};
|
|
11
|
+
export function isJSIdent(ident) {
|
|
12
|
+
if (typeof ident !== 'string') {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
return /^[A-Za-z$_][A-Za-z0-9_$]*$/.test(ident);
|
|
16
|
+
}
|
|
17
|
+
/** Generate createThemeContract() or createGlobalThemeContract() */
|
|
18
|
+
export function generateThemeContract({ tokens, globalThemeContract, }) {
|
|
19
|
+
const tokensObj = {};
|
|
20
|
+
for (const token of tokens) {
|
|
21
|
+
const parts = token.localID.split('.');
|
|
22
|
+
const name = parts.pop();
|
|
23
|
+
// rebuild nested object again from flattened tokens array
|
|
24
|
+
let node = tokensObj;
|
|
25
|
+
for (const part of parts) {
|
|
26
|
+
if (!(part in node)) {
|
|
27
|
+
node[part] = {};
|
|
28
|
+
}
|
|
29
|
+
node = node[part];
|
|
30
|
+
}
|
|
31
|
+
if (token.type !== 'MULTI_VALUE') {
|
|
32
|
+
throw new Error('Error in plugin-vanilla-extract: values didn’t generate correctly.');
|
|
33
|
+
}
|
|
34
|
+
const cssName = token.value.__cssName?.replace(/^--/, '');
|
|
35
|
+
if ('.' in token.value) {
|
|
36
|
+
node[name] = globalThemeContract ? cssName : null;
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
node[name] = {};
|
|
40
|
+
for (const k of Object.keys(token.value)) {
|
|
41
|
+
if (k === '__cssName') {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
node[name][camelCase(k)] = globalThemeContract ? `${cssName}-${k}` : null;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return `export const ${THEME_EXPORT} = ${globalThemeContract ? VE.createGlobalThemeContract : VE.createThemeContract}(${JSON.stringify(tokensObj, undefined, 2)});\n`;
|
|
49
|
+
}
|
|
50
|
+
/** Generate createTheme()/createGlobalTheme() */
|
|
51
|
+
export function generateTheme({ name, namingPattern, tokens, selector, globalTheme = false, }) {
|
|
52
|
+
const tokensObj = {};
|
|
53
|
+
for (const token of tokens) {
|
|
54
|
+
const parts = token.localID.split('.');
|
|
55
|
+
const localName = parts.pop();
|
|
56
|
+
// rebuild nested object again from flattened tokens array
|
|
57
|
+
let node = tokensObj;
|
|
58
|
+
for (const part of parts) {
|
|
59
|
+
if (!(part in node)) {
|
|
60
|
+
node[part] = {};
|
|
61
|
+
}
|
|
62
|
+
node = node[part];
|
|
63
|
+
}
|
|
64
|
+
if (token.type === 'MULTI_VALUE') {
|
|
65
|
+
if ('.' in token.value) {
|
|
66
|
+
node[localName] = serializeValue(token.value['.'], tokens);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
node[localName] = {};
|
|
70
|
+
for (const [k, v] of Object.entries(token.value)) {
|
|
71
|
+
if (k === '__cssName') {
|
|
72
|
+
continue;
|
|
73
|
+
}
|
|
74
|
+
node[localName][camelCase(k)] = serializeValue(v, tokens);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
node[localName] = serializeValue(token.value, tokens);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
const ident = globalTheme ? `${name}` : `[${namingPattern(name)[0]}, ${namingPattern(name)[1]}]`;
|
|
83
|
+
const prefix = globalTheme
|
|
84
|
+
? `${VE.createGlobalTheme}(${JSON.stringify(selector)}, ${THEME_EXPORT}, `
|
|
85
|
+
: `${VE.createTheme}(${THEME_EXPORT}, `;
|
|
86
|
+
const rawTokens = JSON.stringify(tokensObj, undefined, 2);
|
|
87
|
+
return `export const ${ident} = ${prefix}${deserializeAllValues(rawTokens)});\n`;
|
|
88
|
+
}
|
|
89
|
+
const IDENT_ESCAPE = '__ident__';
|
|
90
|
+
/** Encode an alias to a Vanilla Extract token inside a JSON array */
|
|
91
|
+
export function serializeValue(value, tokens) {
|
|
92
|
+
// raw values: number / boolean
|
|
93
|
+
if (typeof value === 'number' || typeof value === 'boolean') {
|
|
94
|
+
return String(value);
|
|
95
|
+
}
|
|
96
|
+
// aliases
|
|
97
|
+
// ⚠️ Warning! Trying to simply transform CSS vars to IDs is brittle, error-prone, and will break in many conditions.
|
|
98
|
+
// However, reverse lookups from generated CSS vars is stable and safe. Subtle but important difference.
|
|
99
|
+
const [_, varName] = value.match(/^var\(([^)]+)\)$/) ?? [];
|
|
100
|
+
if (varName) {
|
|
101
|
+
const originalToken = tokens.find((t) => t.type === 'MULTI_VALUE' && t.value.__cssName === varName);
|
|
102
|
+
if (!originalToken) {
|
|
103
|
+
throw new Error(`Can’t find token associated with ${value}`);
|
|
104
|
+
}
|
|
105
|
+
let jsIdent = '';
|
|
106
|
+
const parts = originalToken.localID.split('.');
|
|
107
|
+
for (const part of parts) {
|
|
108
|
+
if (isJSIdent(part)) {
|
|
109
|
+
jsIdent += `.${part}`;
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
// Note: there are probably some token IDs with quotation marks in them that this
|
|
113
|
+
// would break on, but also, how dare you, you monster
|
|
114
|
+
jsIdent += /^[1-9][0-9]*$/.test(part)
|
|
115
|
+
? `[${part}]`
|
|
116
|
+
: `['${part.replaceAll("'", String.raw `\'`)}']`;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return `${IDENT_ESCAPE}${THEME_EXPORT}${jsIdent}${IDENT_ESCAPE}`;
|
|
120
|
+
}
|
|
121
|
+
// special case: px converts to numbers
|
|
122
|
+
// if (/^\d+px/i.test(value)) {
|
|
123
|
+
// return Number.parseFloat(value);
|
|
124
|
+
// }
|
|
125
|
+
return value;
|
|
126
|
+
}
|
|
127
|
+
/** Decode all aliases from a JSON string */
|
|
128
|
+
export function deserializeAllValues(json) {
|
|
129
|
+
return json.replaceAll(/"__ident__(.*)__ident__"/g, '$1');
|
|
130
|
+
}
|
|
131
|
+
//# 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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@terrazzo/plugin-vanilla-extract",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "Generate Vanilla Extract themes from DTCG design tokens.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -28,31 +28,31 @@
|
|
|
28
28
|
"directory": "./packages/plugin-vanilla-extract/"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@terrazzo/
|
|
32
|
-
"@terrazzo/
|
|
33
|
-
"@terrazzo/plugin-css": "^2.
|
|
31
|
+
"@terrazzo/parser": "^2.5.0",
|
|
32
|
+
"@terrazzo/cli": "^2.5.0",
|
|
33
|
+
"@terrazzo/plugin-css": "^2.5.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"scule": "^1.3.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@types/react": "^19.2.
|
|
39
|
+
"@types/react": "^19.2.17",
|
|
40
40
|
"@types/react-dom": "^19.2.3",
|
|
41
|
-
"@vanilla-extract/css": "^1.
|
|
42
|
-
"@vanilla-extract/vite-plugin": "^5.2.
|
|
41
|
+
"@vanilla-extract/css": "^1.21.1",
|
|
42
|
+
"@vanilla-extract/vite-plugin": "^5.2.5",
|
|
43
43
|
"dtcg-examples": "^1.0.3",
|
|
44
|
-
"react": "^19.2.
|
|
45
|
-
"react-dom": "^19.2.
|
|
46
|
-
"@terrazzo/cli": "^2.
|
|
47
|
-
"@terrazzo/parser": "^2.
|
|
44
|
+
"react": "^19.2.8",
|
|
45
|
+
"react-dom": "^19.2.8",
|
|
46
|
+
"@terrazzo/cli": "^2.5.0",
|
|
47
|
+
"@terrazzo/parser": "^2.5.0",
|
|
48
|
+
"@terrazzo/plugin-css": "^2.5.0"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
|
-
"build": "
|
|
51
|
-
"dev": "
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"lint
|
|
55
|
-
"lint:ts": "tsc --noEmit",
|
|
51
|
+
"build": "tsc -b tsconfig.build.json && attw --profile esm-only --pack .",
|
|
52
|
+
"dev": "tsc -b tsconfig.build.json -w",
|
|
53
|
+
"fmt": "oxfmt",
|
|
54
|
+
"fmt:check": "oxfmt --check",
|
|
55
|
+
"lint": "oxlint --quiet && oxfmt --check && tsc --noEmit",
|
|
56
56
|
"test": "vitest run"
|
|
57
57
|
}
|
|
58
58
|
}
|