@digdir/designsystemet 1.13.1 → 1.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/config.js +50 -658
- package/dist/bin/designsystemet.js +131 -4623
- package/dist/bin/options.js +22 -14
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
- package/dist/package.js +5 -0
- package/dist/src/colors/colorMetadata.js +255 -261
- package/dist/src/colors/index.js +5 -522
- package/dist/src/colors/theme.js +104 -343
- package/dist/src/colors/types.js +22 -25
- package/dist/src/colors/utils.js +241 -154
- package/dist/src/config.js +103 -444
- package/dist/src/index.js +10 -3588
- package/dist/src/migrations/beta-to-v1.js +339 -537
- package/dist/src/migrations/codemods/css/plugins.js +31 -42
- package/dist/src/migrations/codemods/css/run.js +20 -151
- package/dist/src/migrations/color-rename-next49.js +44 -220
- package/dist/src/migrations/index.js +7 -577
- package/dist/src/tokens/build.js +39 -1816
- package/dist/src/tokens/create/files.js +43 -602
- package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
- package/dist/src/tokens/create/generators/$metadata.js +17 -20
- package/dist/src/tokens/create/generators/$themes.js +137 -311
- package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
- package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
- package/dist/src/tokens/create/generators/primitives/size.js +146 -156
- package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
- package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
- package/dist/src/tokens/create/generators/semantic/color.js +42 -326
- package/dist/src/tokens/create/generators/semantic/style.js +379 -382
- package/dist/src/tokens/create/generators/themes/theme.js +108 -392
- package/dist/src/tokens/create.js +47 -1591
- package/dist/src/tokens/format.js +38 -3324
- package/dist/src/tokens/generate-config.js +155 -298
- package/dist/src/tokens/index.js +3 -3344
- package/dist/src/tokens/process/configs/color.js +50 -1086
- package/dist/src/tokens/process/configs/semantic.js +45 -1084
- package/dist/src/tokens/process/configs/shared.js +18 -109
- package/dist/src/tokens/process/configs/size-mode.js +27 -1083
- package/dist/src/tokens/process/configs/size.js +32 -1084
- package/dist/src/tokens/process/configs/type-scale.js +49 -1084
- package/dist/src/tokens/process/configs/typography.js +63 -1085
- package/dist/src/tokens/process/configs.js +88 -1225
- package/dist/src/tokens/process/formats/css/color.js +58 -1080
- package/dist/src/tokens/process/formats/css/semantic.js +27 -1082
- package/dist/src/tokens/process/formats/css/size-mode.js +43 -1078
- package/dist/src/tokens/process/formats/css/size.js +86 -1080
- package/dist/src/tokens/process/formats/css/type-scale.js +53 -1084
- package/dist/src/tokens/process/formats/css/typography.js +27 -1082
- package/dist/src/tokens/process/formats/css.js +18 -1082
- package/dist/src/tokens/process/output/declarations.js +18 -1202
- package/dist/src/tokens/process/output/tailwind.js +26 -40
- package/dist/src/tokens/process/output/theme.js +73 -206
- package/dist/src/tokens/process/platform.js +165 -1356
- package/dist/src/tokens/process/transformers.js +49 -89
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
- package/dist/src/tokens/process/utils/kebab-case.js +7 -5
- package/dist/src/tokens/types.js +6 -7
- package/dist/src/tokens/utils.js +102 -93
- package/dist/src/types.js +1 -5
- package/dist/src/utils/filesystem.js +112 -124
- package/package.json +18 -21
- package/configs/test-tokens.config.json +0 -82
- package/dist/src/scripts/createJsonSchema.js +0 -409
- package/dist/src/scripts/update-preview-tokens.js +0 -3353
|
@@ -1,46 +1,35 @@
|
|
|
1
|
-
// src/migrations/codemods/css/plugins.ts
|
|
2
|
-
import hash from "object-hash";
|
|
3
1
|
import pc from "picocolors";
|
|
4
2
|
import * as R from "ramda";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
import hash from "object-hash";
|
|
4
|
+
//#region src/migrations/codemods/css/plugins.ts
|
|
5
|
+
const printDelete = (text) => console.log(`${pc.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
|
|
6
|
+
const deleteMsg = (decl, from) => `${pc.yellow(from)} @ ${pc.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
|
|
7
|
+
const cssClassRename = (dictionary) => ({
|
|
8
|
+
postcssPlugin: `Renames CSS classes ${hash(dictionary)}`,
|
|
9
|
+
Rule(rule) {
|
|
10
|
+
const selector = rule.selector;
|
|
11
|
+
if (!selector) return;
|
|
12
|
+
for (const [from, to] of Object.entries(dictionary)) {
|
|
13
|
+
if (!selector.includes(from)) return;
|
|
14
|
+
rule.selector = selector.replace(new RegExp(from, "g"), to);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
18
17
|
});
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
decl.prop = prop.replace(from, to);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
if (deleted.size > 0) {
|
|
39
|
-
Array.from(deleted).forEach(printDelete);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
18
|
+
const cssVarRename = (dictionary) => ({
|
|
19
|
+
postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
|
|
20
|
+
Declaration(decl) {
|
|
21
|
+
const { value, prop } = decl;
|
|
22
|
+
const deleted = /* @__PURE__ */ new Set();
|
|
23
|
+
for (const [from, to] of Object.entries(dictionary)) if (R.isNotEmpty(to)) {
|
|
24
|
+
if (to === "[delete]") deleted.add(deleteMsg(decl, from));
|
|
25
|
+
if (R.includes(from, value)) {
|
|
26
|
+
decl.value = value.replace(from, to);
|
|
27
|
+
continue;
|
|
28
|
+
}
|
|
29
|
+
if (R.includes(from, prop) && decl.variable) decl.prop = prop.replace(from, to);
|
|
30
|
+
}
|
|
31
|
+
if (deleted.size > 0) Array.from(deleted).forEach(printDelete);
|
|
32
|
+
}
|
|
42
33
|
});
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
cssVarRename
|
|
46
|
-
};
|
|
34
|
+
//#endregion
|
|
35
|
+
export { cssClassRename, cssVarRename };
|
|
@@ -1,154 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
import { dsfs } from "../../../utils/filesystem.js";
|
|
2
2
|
import glob from "fast-glob";
|
|
3
3
|
import postcss from "postcss";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
if (dry) {
|
|
23
|
-
console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
|
|
24
|
-
}
|
|
25
|
-
this.dry = dry ?? false;
|
|
26
|
-
this.verbose = verbose ?? false;
|
|
27
|
-
this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
|
|
28
|
-
if (this.verbose) {
|
|
29
|
-
console.log(
|
|
30
|
-
`FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
this.isInitialized = true;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Creates a directory if it does not already exist.
|
|
37
|
-
*
|
|
38
|
-
* @param dir - The path of the directory to create.
|
|
39
|
-
*
|
|
40
|
-
* @returns A promise that resolves when the operation is complete.
|
|
41
|
-
* If the directory already exists or `dry` is `true`, the promise resolves immediately.
|
|
42
|
-
*/
|
|
43
|
-
mkdir = async (dir) => {
|
|
44
|
-
if (this.dry) {
|
|
45
|
-
console.log(`${pc.blue("mkdir")} ${dir}`);
|
|
46
|
-
return Promise.resolve();
|
|
47
|
-
}
|
|
48
|
-
const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
|
|
49
|
-
if (exists) {
|
|
50
|
-
return Promise.resolve();
|
|
51
|
-
}
|
|
52
|
-
return fs.mkdir(dir, { recursive: true });
|
|
53
|
-
};
|
|
54
|
-
writeFile = async (path2, data) => {
|
|
55
|
-
if (this.dry) {
|
|
56
|
-
console.log(`${pc.blue("writeFile")} ${path2}`);
|
|
57
|
-
return Promise.resolve();
|
|
58
|
-
}
|
|
59
|
-
return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
|
|
60
|
-
console.error(pc.red(`Error writing file: ${path2}`));
|
|
61
|
-
console.error(pc.red(error));
|
|
62
|
-
throw error;
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
cp = async (src, dest, filter) => {
|
|
66
|
-
if (this.dry) {
|
|
67
|
-
console.log(`${pc.blue("cp")} ${src} ${dest}`);
|
|
68
|
-
return Promise.resolve();
|
|
69
|
-
}
|
|
70
|
-
return fs.cp(src, dest, { recursive: true, filter });
|
|
71
|
-
};
|
|
72
|
-
copyFile = async (src, dest) => {
|
|
73
|
-
if (this.dry) {
|
|
74
|
-
console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
|
|
75
|
-
return Promise.resolve();
|
|
76
|
-
}
|
|
77
|
-
return fs.copyFile(src, dest);
|
|
78
|
-
};
|
|
79
|
-
cleanDir = async (dir) => {
|
|
80
|
-
if (this.dry) {
|
|
81
|
-
console.log(`${pc.blue("cleanDir")} ${dir}`);
|
|
82
|
-
return Promise.resolve();
|
|
83
|
-
}
|
|
84
|
-
console.log(`
|
|
85
|
-
\u{1F525} Cleaning dir ${pc.red(`${dir.trim()}`)} `);
|
|
86
|
-
return fs.rm(dir, { recursive: true, force: true });
|
|
87
|
-
};
|
|
88
|
-
readFile = async (path2, allowFileNotFound) => {
|
|
89
|
-
if (this.dry) {
|
|
90
|
-
console.log(`${pc.blue("readFile")} ${path2}`);
|
|
91
|
-
}
|
|
92
|
-
try {
|
|
93
|
-
return await fs.readFile(path2, "utf-8");
|
|
94
|
-
} catch (error) {
|
|
95
|
-
if (allowFileNotFound && error.code === "ENOENT") {
|
|
96
|
-
return "";
|
|
97
|
-
}
|
|
98
|
-
throw error;
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
readdir = async (path2) => {
|
|
102
|
-
if (this.dry) {
|
|
103
|
-
console.log(`${pc.blue("readdir")} ${path2}`);
|
|
104
|
-
}
|
|
105
|
-
try {
|
|
106
|
-
return await fs.readdir(path2);
|
|
107
|
-
} catch (error) {
|
|
108
|
-
if (error.code === "ENOENT") {
|
|
109
|
-
return [];
|
|
110
|
-
}
|
|
111
|
-
throw error;
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
writeFiles = async (files, outDir, log) => {
|
|
115
|
-
for (const { destination: filename, output } of files) {
|
|
116
|
-
if (filename) {
|
|
117
|
-
const filePath = path.join(outDir, filename);
|
|
118
|
-
const fileDir = path.dirname(filePath);
|
|
119
|
-
if (log) {
|
|
120
|
-
console.log(filename);
|
|
121
|
-
}
|
|
122
|
-
await this.mkdir(fileDir);
|
|
123
|
-
await this.writeFile(filePath, output);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
};
|
|
128
|
-
var dsfs = new FileSystem();
|
|
129
|
-
|
|
130
|
-
// src/migrations/codemods/css/run.ts
|
|
131
|
-
var runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
|
|
132
|
-
const processor = postcss(plugins);
|
|
133
|
-
const transform = async () => {
|
|
134
|
-
console.log(`Running migration in ${globPattern}`);
|
|
135
|
-
const files = await glob([globPattern], {
|
|
136
|
-
ignore: ["**/node_modules/**", "**/dist/**"],
|
|
137
|
-
// TODO: Not working as expected
|
|
138
|
-
absolute: true
|
|
139
|
-
});
|
|
140
|
-
const filePromises = files.map(async (file) => {
|
|
141
|
-
if (file.includes("node_modules") || file.includes("dist")) {
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
const contents = await dsfs.readFile(file);
|
|
145
|
-
const result = await processor.process(contents.toString(), { from: file });
|
|
146
|
-
await dsfs.writeFile(file, result.css);
|
|
147
|
-
});
|
|
148
|
-
await Promise.all(filePromises);
|
|
149
|
-
};
|
|
150
|
-
return transform();
|
|
151
|
-
};
|
|
152
|
-
export {
|
|
153
|
-
runCssCodemod
|
|
4
|
+
//#region src/migrations/codemods/css/run.ts
|
|
5
|
+
const runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
|
|
6
|
+
const processor = postcss(plugins);
|
|
7
|
+
const transform = async () => {
|
|
8
|
+
console.log(`Running migration in ${globPattern}`);
|
|
9
|
+
const filePromises = (await glob([globPattern], {
|
|
10
|
+
ignore: ["**/node_modules/**", "**/dist/**"],
|
|
11
|
+
absolute: true
|
|
12
|
+
})).map(async (file) => {
|
|
13
|
+
if (file.includes("node_modules") || file.includes("dist")) return;
|
|
14
|
+
const contents = await dsfs.readFile(file);
|
|
15
|
+
const result = await processor.process(contents.toString(), { from: file });
|
|
16
|
+
await dsfs.writeFile(file, result.css);
|
|
17
|
+
});
|
|
18
|
+
await Promise.all(filePromises);
|
|
19
|
+
};
|
|
20
|
+
return transform();
|
|
154
21
|
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { runCssCodemod };
|
|
@@ -1,222 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
// src/migrations/codemods/css/plugins.ts
|
|
5
|
-
import hash from "object-hash";
|
|
6
|
-
import pc from "picocolors";
|
|
1
|
+
import { cssVarRename } from "./codemods/css/plugins.js";
|
|
2
|
+
import { runCssCodemod } from "./codemods/css/run.js";
|
|
7
3
|
import * as R from "ramda";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
workingDir = process.cwd();
|
|
49
|
-
outDir = this.workingDir;
|
|
50
|
-
/** Initialize the file system */
|
|
51
|
-
init({ dry, outdir, verbose }) {
|
|
52
|
-
if (this.isInitialized) {
|
|
53
|
-
console.warn(pc2.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
if (dry) {
|
|
57
|
-
console.log(pc2.blue("Initializing FileSystem in dry-run mode. No files will be written."));
|
|
58
|
-
}
|
|
59
|
-
this.dry = dry ?? false;
|
|
60
|
-
this.verbose = verbose ?? false;
|
|
61
|
-
this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
|
|
62
|
-
if (this.verbose) {
|
|
63
|
-
console.log(
|
|
64
|
-
`FileSystem initialized with workingDir: ${pc2.green(this.workingDir)}, outDir: ${pc2.green(this.outDir)}`
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
this.isInitialized = true;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Creates a directory if it does not already exist.
|
|
71
|
-
*
|
|
72
|
-
* @param dir - The path of the directory to create.
|
|
73
|
-
*
|
|
74
|
-
* @returns A promise that resolves when the operation is complete.
|
|
75
|
-
* If the directory already exists or `dry` is `true`, the promise resolves immediately.
|
|
76
|
-
*/
|
|
77
|
-
mkdir = async (dir) => {
|
|
78
|
-
if (this.dry) {
|
|
79
|
-
console.log(`${pc2.blue("mkdir")} ${dir}`);
|
|
80
|
-
return Promise.resolve();
|
|
81
|
-
}
|
|
82
|
-
const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
|
|
83
|
-
if (exists) {
|
|
84
|
-
return Promise.resolve();
|
|
85
|
-
}
|
|
86
|
-
return fs.mkdir(dir, { recursive: true });
|
|
87
|
-
};
|
|
88
|
-
writeFile = async (path2, data) => {
|
|
89
|
-
if (this.dry) {
|
|
90
|
-
console.log(`${pc2.blue("writeFile")} ${path2}`);
|
|
91
|
-
return Promise.resolve();
|
|
92
|
-
}
|
|
93
|
-
return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
|
|
94
|
-
console.error(pc2.red(`Error writing file: ${path2}`));
|
|
95
|
-
console.error(pc2.red(error));
|
|
96
|
-
throw error;
|
|
97
|
-
});
|
|
98
|
-
};
|
|
99
|
-
cp = async (src, dest, filter) => {
|
|
100
|
-
if (this.dry) {
|
|
101
|
-
console.log(`${pc2.blue("cp")} ${src} ${dest}`);
|
|
102
|
-
return Promise.resolve();
|
|
103
|
-
}
|
|
104
|
-
return fs.cp(src, dest, { recursive: true, filter });
|
|
105
|
-
};
|
|
106
|
-
copyFile = async (src, dest) => {
|
|
107
|
-
if (this.dry) {
|
|
108
|
-
console.log(`${pc2.blue("copyFile")} ${src} to ${dest}`);
|
|
109
|
-
return Promise.resolve();
|
|
110
|
-
}
|
|
111
|
-
return fs.copyFile(src, dest);
|
|
112
|
-
};
|
|
113
|
-
cleanDir = async (dir) => {
|
|
114
|
-
if (this.dry) {
|
|
115
|
-
console.log(`${pc2.blue("cleanDir")} ${dir}`);
|
|
116
|
-
return Promise.resolve();
|
|
117
|
-
}
|
|
118
|
-
console.log(`
|
|
119
|
-
\u{1F525} Cleaning dir ${pc2.red(`${dir.trim()}`)} `);
|
|
120
|
-
return fs.rm(dir, { recursive: true, force: true });
|
|
121
|
-
};
|
|
122
|
-
readFile = async (path2, allowFileNotFound) => {
|
|
123
|
-
if (this.dry) {
|
|
124
|
-
console.log(`${pc2.blue("readFile")} ${path2}`);
|
|
125
|
-
}
|
|
126
|
-
try {
|
|
127
|
-
return await fs.readFile(path2, "utf-8");
|
|
128
|
-
} catch (error) {
|
|
129
|
-
if (allowFileNotFound && error.code === "ENOENT") {
|
|
130
|
-
return "";
|
|
131
|
-
}
|
|
132
|
-
throw error;
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
readdir = async (path2) => {
|
|
136
|
-
if (this.dry) {
|
|
137
|
-
console.log(`${pc2.blue("readdir")} ${path2}`);
|
|
138
|
-
}
|
|
139
|
-
try {
|
|
140
|
-
return await fs.readdir(path2);
|
|
141
|
-
} catch (error) {
|
|
142
|
-
if (error.code === "ENOENT") {
|
|
143
|
-
return [];
|
|
144
|
-
}
|
|
145
|
-
throw error;
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
writeFiles = async (files, outDir, log) => {
|
|
149
|
-
for (const { destination: filename, output } of files) {
|
|
150
|
-
if (filename) {
|
|
151
|
-
const filePath = path.join(outDir, filename);
|
|
152
|
-
const fileDir = path.dirname(filePath);
|
|
153
|
-
if (log) {
|
|
154
|
-
console.log(filename);
|
|
155
|
-
}
|
|
156
|
-
await this.mkdir(fileDir);
|
|
157
|
-
await this.writeFile(filePath, output);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
};
|
|
161
|
-
};
|
|
162
|
-
var dsfs = new FileSystem();
|
|
163
|
-
|
|
164
|
-
// src/migrations/codemods/css/run.ts
|
|
165
|
-
var runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
|
|
166
|
-
const processor = postcss(plugins);
|
|
167
|
-
const transform = async () => {
|
|
168
|
-
console.log(`Running migration in ${globPattern}`);
|
|
169
|
-
const files = await glob([globPattern], {
|
|
170
|
-
ignore: ["**/node_modules/**", "**/dist/**"],
|
|
171
|
-
// TODO: Not working as expected
|
|
172
|
-
absolute: true
|
|
173
|
-
});
|
|
174
|
-
const filePromises = files.map(async (file) => {
|
|
175
|
-
if (file.includes("node_modules") || file.includes("dist")) {
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
const contents = await dsfs.readFile(file);
|
|
179
|
-
const result = await processor.process(contents.toString(), { from: file });
|
|
180
|
-
await dsfs.writeFile(file, result.css);
|
|
181
|
-
});
|
|
182
|
-
await Promise.all(filePromises);
|
|
183
|
-
};
|
|
184
|
-
return transform();
|
|
185
|
-
};
|
|
186
|
-
|
|
187
|
-
// src/migrations/color-rename-next49.ts
|
|
188
|
-
var replace = (oldTemplate, newTemplate, colors2, placeholder = "[color]") => R2.reduce(
|
|
189
|
-
(acc, color) => {
|
|
190
|
-
acc[oldTemplate.replace(placeholder, color)] = newTemplate.replace(placeholder, color);
|
|
191
|
-
return acc;
|
|
192
|
-
},
|
|
193
|
-
{},
|
|
194
|
-
colors2
|
|
195
|
-
);
|
|
196
|
-
var colors = ["neutral", "accent", "brand1", "brand2", "brand3", "danger", "warning", "success", "info"];
|
|
197
|
-
var color_rename_next49_default = (glob2) => {
|
|
198
|
-
const renames = {
|
|
199
|
-
// Background
|
|
200
|
-
"--ds-color-background-subtle": "--ds-color-background-tinted",
|
|
201
|
-
...replace("--ds-color-[color]-background-subtle", "--ds-color-[color]-background-tinted", colors),
|
|
202
|
-
// Surface
|
|
203
|
-
"--ds-color-surface-default": "--ds-color-surface-tinted",
|
|
204
|
-
...replace("--ds-color-[color]-surface-default", "--ds-color-[color]-surface-tinted", colors),
|
|
205
|
-
// Contrast
|
|
206
|
-
"--ds-color-contrast-default": "--ds-color-base-contrast-default",
|
|
207
|
-
"--ds-color-contrast-subtle": "--ds-color-base-contrast-subtle",
|
|
208
|
-
...replace("--ds-color-[color]-contrast-default", "--ds-color-[color]-base-contrast-default", colors),
|
|
209
|
-
...replace("--ds-color-[color]-contrast-subtle", "--ds-color-[color]-base-contrast-subtle", colors)
|
|
210
|
-
};
|
|
211
|
-
console.log(`Renaming ${Object.keys(renames).length} variables`, renames);
|
|
212
|
-
return runCssCodemod({
|
|
213
|
-
globPattern: glob2,
|
|
214
|
-
plugins: [
|
|
215
|
-
// https://github.com/digdir/designsystemet/issues/3046
|
|
216
|
-
cssVarRename(renames)
|
|
217
|
-
]
|
|
218
|
-
});
|
|
219
|
-
};
|
|
220
|
-
export {
|
|
221
|
-
color_rename_next49_default as default
|
|
4
|
+
//#region src/migrations/color-rename-next49.ts
|
|
5
|
+
/**
|
|
6
|
+
* Replaces placeholders [color] in the given templates with the provided colors.
|
|
7
|
+
*
|
|
8
|
+
* @param {string} oldTemplate - The template string containing the placeholder to be replaced.
|
|
9
|
+
* @param {string} newTemplate - The template string containing the placeholder to be replaced.
|
|
10
|
+
* @param {string[]} colors - An array of color strings to replace the placeholder in the templates.
|
|
11
|
+
* @returns {Record<string, string>} An object mapping the old template with replaced colors to the new template with replaced colors.
|
|
12
|
+
*/
|
|
13
|
+
const replace = (oldTemplate, newTemplate, colors, placeholder = "[color]") => R.reduce((acc, color) => {
|
|
14
|
+
acc[oldTemplate.replace(placeholder, color)] = newTemplate.replace(placeholder, color);
|
|
15
|
+
return acc;
|
|
16
|
+
}, {}, colors);
|
|
17
|
+
const colors = [
|
|
18
|
+
"neutral",
|
|
19
|
+
"accent",
|
|
20
|
+
"brand1",
|
|
21
|
+
"brand2",
|
|
22
|
+
"brand3",
|
|
23
|
+
"danger",
|
|
24
|
+
"warning",
|
|
25
|
+
"success",
|
|
26
|
+
"info"
|
|
27
|
+
];
|
|
28
|
+
var color_rename_next49_default = (glob) => {
|
|
29
|
+
const renames = {
|
|
30
|
+
"--ds-color-background-subtle": "--ds-color-background-tinted",
|
|
31
|
+
...replace("--ds-color-[color]-background-subtle", "--ds-color-[color]-background-tinted", colors),
|
|
32
|
+
"--ds-color-surface-default": "--ds-color-surface-tinted",
|
|
33
|
+
...replace("--ds-color-[color]-surface-default", "--ds-color-[color]-surface-tinted", colors),
|
|
34
|
+
"--ds-color-contrast-default": "--ds-color-base-contrast-default",
|
|
35
|
+
"--ds-color-contrast-subtle": "--ds-color-base-contrast-subtle",
|
|
36
|
+
...replace("--ds-color-[color]-contrast-default", "--ds-color-[color]-base-contrast-default", colors),
|
|
37
|
+
...replace("--ds-color-[color]-contrast-subtle", "--ds-color-[color]-base-contrast-subtle", colors)
|
|
38
|
+
};
|
|
39
|
+
console.log(`Renaming ${Object.keys(renames).length} variables`, renames);
|
|
40
|
+
return runCssCodemod({
|
|
41
|
+
globPattern: glob,
|
|
42
|
+
plugins: [cssVarRename(renames)]
|
|
43
|
+
});
|
|
222
44
|
};
|
|
45
|
+
//#endregion
|
|
46
|
+
export { color_rename_next49_default as default };
|