@yamada-ui/cli 1.1.2-dev-20240920162115 → 1.2.0-dev-20240921041020
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/command/index.js +122 -98
- package/dist/command/tokens/config.js +7 -4
- package/dist/command/tokens/create-theme-typings.js +73 -102
- package/dist/command/tokens/index.js +117 -93
- package/dist/index.js +134 -109
- package/dist/utils/cli.js +4 -3
- package/dist/utils/index.js +48 -5
- package/dist/utils/module.js +70 -0
- package/dist/utils/object.js +6 -0
- package/package.json +5 -4
package/dist/command/index.js
CHANGED
|
@@ -52,7 +52,6 @@ init_cjs_shims();
|
|
|
52
52
|
var import_promises = require("fs/promises");
|
|
53
53
|
var import_path3 = __toESM(require("path"));
|
|
54
54
|
var p = __toESM(require("@clack/prompts"));
|
|
55
|
-
var import_bundle_n_require = require("bundle-n-require");
|
|
56
55
|
|
|
57
56
|
// ../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/index.js
|
|
58
57
|
init_cjs_shims();
|
|
@@ -552,12 +551,8 @@ var source_default = chalk;
|
|
|
552
551
|
// src/command/tokens/index.ts
|
|
553
552
|
var import_chokidar = __toESM(require("chokidar"));
|
|
554
553
|
|
|
555
|
-
// src/command/tokens/create-theme-typings.ts
|
|
556
|
-
init_cjs_shims();
|
|
557
|
-
|
|
558
554
|
// src/utils/assertion.ts
|
|
559
555
|
init_cjs_shims();
|
|
560
|
-
var isString = (value) => Object.prototype.toString.call(value) === "[object String]";
|
|
561
556
|
var isObject = (obj) => obj !== null && (typeof obj === "object" || typeof obj === "function") && !isArray(obj);
|
|
562
557
|
var isArray = (value) => Array.isArray(value);
|
|
563
558
|
|
|
@@ -582,21 +577,54 @@ var prettier = async (content, options) => {
|
|
|
582
577
|
|
|
583
578
|
// src/utils/object.ts
|
|
584
579
|
init_cjs_shims();
|
|
585
|
-
var
|
|
586
|
-
const
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
580
|
+
var getObject = (obj, path5) => {
|
|
581
|
+
const keys = path5.split(".");
|
|
582
|
+
return keys.reduce((obj2, key) => obj2[key] ?? {}, obj);
|
|
583
|
+
};
|
|
584
|
+
|
|
585
|
+
// src/utils/module.ts
|
|
586
|
+
init_cjs_shims();
|
|
587
|
+
var import_fs = require("fs");
|
|
588
|
+
var import_vm = require("vm");
|
|
589
|
+
var import_esbuild = require("esbuild");
|
|
590
|
+
var import_node_eval = __toESM(require("node-eval"));
|
|
591
|
+
var getModule = async (file, cwd) => {
|
|
592
|
+
const result = await (0, import_esbuild.build)({
|
|
593
|
+
platform: "node",
|
|
594
|
+
format: "cjs",
|
|
595
|
+
mainFields: ["module", "main"],
|
|
596
|
+
absWorkingDir: cwd,
|
|
597
|
+
entryPoints: [file],
|
|
598
|
+
outfile: "out.js",
|
|
599
|
+
write: false,
|
|
600
|
+
bundle: true,
|
|
601
|
+
sourcemap: false,
|
|
602
|
+
metafile: true
|
|
590
603
|
});
|
|
591
|
-
|
|
604
|
+
const { text: code } = result.outputFiles[0];
|
|
605
|
+
const dependencies = result.metafile ? Object.keys(result.metafile.inputs) : [];
|
|
606
|
+
try {
|
|
607
|
+
const realFileName = import_fs.realpathSync.native(file);
|
|
608
|
+
const script = new import_vm.Script(code, { filename: realFileName });
|
|
609
|
+
const mod = { exports: {} };
|
|
610
|
+
const require2 = (id) => id === realFileName ? mod.exports : require2(id);
|
|
611
|
+
script.runInThisContext()(mod.exports, require2, mod);
|
|
612
|
+
return { mod, code, dependencies };
|
|
613
|
+
} catch {
|
|
614
|
+
const mod = (0, import_node_eval.default)(code);
|
|
615
|
+
return { mod, code, dependencies };
|
|
616
|
+
}
|
|
592
617
|
};
|
|
593
618
|
|
|
619
|
+
// src/command/tokens/create-theme-typings.ts
|
|
620
|
+
init_cjs_shims();
|
|
621
|
+
|
|
594
622
|
// src/command/tokens/config.ts
|
|
595
623
|
init_cjs_shims();
|
|
596
624
|
var config = [
|
|
597
625
|
{ key: "borders" },
|
|
598
|
-
{ key: "breakpoints"
|
|
599
|
-
{ key: "colors"
|
|
626
|
+
{ key: "breakpoints" },
|
|
627
|
+
{ key: "colors" },
|
|
600
628
|
{ key: "fonts" },
|
|
601
629
|
{ key: "fontSizes" },
|
|
602
630
|
{ key: "fontWeights" },
|
|
@@ -605,11 +633,14 @@ var config = [
|
|
|
605
633
|
{ key: "radii" },
|
|
606
634
|
{ key: "shadows" },
|
|
607
635
|
{ key: "blurs" },
|
|
608
|
-
{ key: "sizes"
|
|
636
|
+
{ key: "sizes" },
|
|
609
637
|
{ key: "spaces", flatMap: (value) => [value, `-${value}`] },
|
|
610
638
|
{ key: "zIndices" },
|
|
611
639
|
{ key: "animations", omitScanKeys: ["keyframes"] },
|
|
612
|
-
{ key: "gradients" }
|
|
640
|
+
{ key: "gradients" },
|
|
641
|
+
{ key: "transitions.property", replaceKey: "transitionProperty" },
|
|
642
|
+
{ key: "transitions.duration", replaceKey: "transitionDuration" },
|
|
643
|
+
{ key: "transitions.easing", replaceKey: "transitionEasing" }
|
|
613
644
|
];
|
|
614
645
|
|
|
615
646
|
// src/command/tokens/create-theme-typings.ts
|
|
@@ -635,31 +666,6 @@ var extractComponents = ({ components = {} }) => Object.entries(components).redu
|
|
|
635
666
|
},
|
|
636
667
|
{}
|
|
637
668
|
);
|
|
638
|
-
var extractTransitions = (theme) => {
|
|
639
|
-
let transitionProperty = [];
|
|
640
|
-
let transitionDuration = [];
|
|
641
|
-
let transitionEasing = [];
|
|
642
|
-
const { transitions, semantics } = theme;
|
|
643
|
-
if (!isObject(transitions))
|
|
644
|
-
return { transitionProperty, transitionDuration, transitionEasing };
|
|
645
|
-
const { property, duration, easing } = semantics.transitions ?? {};
|
|
646
|
-
Object.entries(transitions).forEach(([key, value]) => {
|
|
647
|
-
switch (key) {
|
|
648
|
-
case "property":
|
|
649
|
-
transitionProperty = [...extractPaths(value), ...extractPaths(property)];
|
|
650
|
-
break;
|
|
651
|
-
case "duration":
|
|
652
|
-
transitionDuration = [...extractPaths(value), ...extractPaths(duration)];
|
|
653
|
-
break;
|
|
654
|
-
case "easing":
|
|
655
|
-
transitionEasing = [...extractPaths(value), ...extractPaths(easing)];
|
|
656
|
-
break;
|
|
657
|
-
default:
|
|
658
|
-
return;
|
|
659
|
-
}
|
|
660
|
-
});
|
|
661
|
-
return { transitionProperty, transitionDuration, transitionEasing };
|
|
662
|
-
};
|
|
663
669
|
var isTone = (value) => {
|
|
664
670
|
if (!isObject(value)) return false;
|
|
665
671
|
const keys = Object.keys(value);
|
|
@@ -667,75 +673,90 @@ var isTone = (value) => {
|
|
|
667
673
|
};
|
|
668
674
|
var extractColorSchemes = (theme) => {
|
|
669
675
|
const { colors, semantics } = theme;
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
};
|
|
674
|
-
if (!isObject(colors)) return results;
|
|
676
|
+
let colorSchemes = [];
|
|
677
|
+
let colorSchemeColors = [];
|
|
678
|
+
if (!isObject(colors)) return { colorSchemes, colorSchemeColors };
|
|
675
679
|
Object.entries(colors).forEach(([key, value]) => {
|
|
676
680
|
if (!isTone(value)) return;
|
|
677
|
-
|
|
681
|
+
colorSchemes.push(key);
|
|
678
682
|
});
|
|
679
|
-
if (!isObject(semantics?.colorSchemes))
|
|
683
|
+
if (!isObject(semantics?.colorSchemes))
|
|
684
|
+
return { colorSchemes, colorSchemeColors };
|
|
680
685
|
Object.entries(semantics.colorSchemes).forEach(([key, value]) => {
|
|
681
686
|
if (isTone(value)) {
|
|
682
|
-
|
|
683
|
-
|
|
687
|
+
colorSchemes.push(key);
|
|
688
|
+
colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
|
|
684
689
|
} else {
|
|
685
|
-
const hasColorScheme = isArray(value) ? value.every(
|
|
686
|
-
(key2) => isString(key2) && Object.keys(colors).includes(key2)
|
|
687
|
-
) : Object.keys(colors).some((key2) => key2 === value);
|
|
690
|
+
const hasColorScheme = isArray(value) ? value.every((key2) => Object.keys(colors).includes(String(key2))) : Object.keys(colors).includes(String(value));
|
|
688
691
|
if (!hasColorScheme) return;
|
|
689
|
-
|
|
690
|
-
|
|
692
|
+
colorSchemes.push(key);
|
|
693
|
+
colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
|
|
691
694
|
}
|
|
692
695
|
});
|
|
693
|
-
return
|
|
696
|
+
return { colorSchemes, colorSchemeColors };
|
|
694
697
|
};
|
|
695
698
|
var extractThemeSchemes = (theme) => {
|
|
696
699
|
const { themeSchemes } = theme;
|
|
697
700
|
if (!isObject(themeSchemes)) return ["base"];
|
|
698
701
|
return ["base", ...Object.keys(themeSchemes)];
|
|
699
702
|
};
|
|
700
|
-
var extractPaths = (target, maxDepth = 3, omitKeys = []) => {
|
|
703
|
+
var extractPaths = (target, maxDepth = 3, omitKeys = [], shouldProcess) => {
|
|
701
704
|
if (!isObject(target) && !isArray(target) || !maxDepth) return [];
|
|
702
|
-
return Object.entries(target).reduce((
|
|
703
|
-
if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2))) {
|
|
704
|
-
extractPaths(value, maxDepth - 1, omitKeys).forEach(
|
|
705
|
-
(nestedKey) =>
|
|
705
|
+
return Object.entries(target).reduce((prev, [key, value]) => {
|
|
706
|
+
if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2)) && (!shouldProcess || shouldProcess(value))) {
|
|
707
|
+
extractPaths(value, maxDepth - 1, omitKeys, shouldProcess).forEach(
|
|
708
|
+
(nestedKey) => prev.push(`${key}.${nestedKey}`)
|
|
706
709
|
);
|
|
707
710
|
} else {
|
|
708
|
-
|
|
711
|
+
prev.push(key);
|
|
709
712
|
}
|
|
710
|
-
return
|
|
713
|
+
return prev;
|
|
711
714
|
}, []);
|
|
712
715
|
};
|
|
713
|
-
var extractKeys = (
|
|
714
|
-
const
|
|
715
|
-
const property = keys.reduce((obj, key2) => obj[key2] ?? {}, theme);
|
|
716
|
+
var extractKeys = (obj, key) => {
|
|
717
|
+
const property = getObject(obj, key);
|
|
716
718
|
if (!isObject(property)) return [];
|
|
717
719
|
return Object.keys(property);
|
|
718
720
|
};
|
|
719
|
-
var createThemeTypings = async (theme) => {
|
|
721
|
+
var createThemeTypings = async (theme, { responsive = false }) => {
|
|
722
|
+
let shouldProcess = void 0;
|
|
723
|
+
if (responsive && isObject(theme.breakpoints)) {
|
|
724
|
+
const keys = ["base", ...Object.keys(theme.breakpoints)];
|
|
725
|
+
const isResponsive = (obj) => {
|
|
726
|
+
const providedKeys = Object.keys(obj);
|
|
727
|
+
if (!providedKeys.length) return false;
|
|
728
|
+
if (!providedKeys.includes("base")) return false;
|
|
729
|
+
return providedKeys.every((key) => keys.includes(key));
|
|
730
|
+
};
|
|
731
|
+
shouldProcess = (obj) => !isResponsive(obj);
|
|
732
|
+
}
|
|
720
733
|
const tokens = config.reduce(
|
|
721
734
|
(prev, {
|
|
722
735
|
key,
|
|
736
|
+
replaceKey,
|
|
723
737
|
maxScanDepth,
|
|
724
738
|
omitScanKeys,
|
|
725
|
-
filter = () => true,
|
|
726
739
|
flatMap = (value) => value
|
|
727
740
|
}) => {
|
|
728
|
-
const target = theme
|
|
729
|
-
prev[key] = [];
|
|
741
|
+
const target = getObject(theme, key);
|
|
742
|
+
prev[replaceKey ?? key] = [];
|
|
730
743
|
if (isObject(target) || isArray(target)) {
|
|
731
|
-
prev[key] = extractPaths(
|
|
744
|
+
prev[replaceKey ?? key] = extractPaths(
|
|
745
|
+
target,
|
|
746
|
+
maxScanDepth,
|
|
747
|
+
omitScanKeys,
|
|
748
|
+
shouldProcess
|
|
749
|
+
).flatMap(flatMap);
|
|
732
750
|
}
|
|
733
751
|
if (isObject(theme.semantics)) {
|
|
734
|
-
const
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
752
|
+
const target2 = getObject(theme.semantics, key);
|
|
753
|
+
const semanticKeys = extractPaths(
|
|
754
|
+
target2,
|
|
755
|
+
maxScanDepth,
|
|
756
|
+
omitScanKeys,
|
|
757
|
+
shouldProcess
|
|
758
|
+
).flatMap(flatMap);
|
|
759
|
+
prev[replaceKey ?? key].push(...semanticKeys);
|
|
739
760
|
}
|
|
740
761
|
return prev;
|
|
741
762
|
},
|
|
@@ -745,24 +766,23 @@ var createThemeTypings = async (theme) => {
|
|
|
745
766
|
const layerStyles = extractKeys(theme, "styles.layerStyles");
|
|
746
767
|
const { colorSchemes, colorSchemeColors } = extractColorSchemes(theme);
|
|
747
768
|
const themeSchemes = extractThemeSchemes(theme);
|
|
748
|
-
const
|
|
749
|
-
const componentTypes = extractComponents(theme);
|
|
769
|
+
const components = extractComponents(theme);
|
|
750
770
|
tokens.colors = [...tokens.colors, ...colorSchemeColors];
|
|
751
771
|
return prettier(
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
{
|
|
772
|
+
[
|
|
773
|
+
`import type { UITheme } from './ui-theme.types'`,
|
|
774
|
+
``,
|
|
775
|
+
`export interface GeneratedTheme extends UITheme {`,
|
|
776
|
+
print({
|
|
756
777
|
...tokens,
|
|
757
778
|
textStyles,
|
|
758
779
|
layerStyles,
|
|
759
780
|
colorSchemes,
|
|
760
|
-
themeSchemes
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
)} ${printComponent(componentTypes)} }`
|
|
781
|
+
themeSchemes
|
|
782
|
+
}),
|
|
783
|
+
printComponent(components),
|
|
784
|
+
`}`
|
|
785
|
+
].join("\n")
|
|
766
786
|
);
|
|
767
787
|
};
|
|
768
788
|
|
|
@@ -808,6 +828,7 @@ var resolveOutputPath = async (outPath) => {
|
|
|
808
828
|
// src/command/tokens/index.ts
|
|
809
829
|
var generateThemeTypings = async ({
|
|
810
830
|
theme,
|
|
831
|
+
config: config2,
|
|
811
832
|
outFile
|
|
812
833
|
}) => {
|
|
813
834
|
p.intro(source_default.magenta(`Generating Yamada UI theme typings`));
|
|
@@ -815,7 +836,7 @@ var generateThemeTypings = async ({
|
|
|
815
836
|
try {
|
|
816
837
|
const start = process.hrtime.bigint();
|
|
817
838
|
s.start(`Parsing the theme`);
|
|
818
|
-
const generatedTheme = await createThemeTypings(theme);
|
|
839
|
+
const generatedTheme = await createThemeTypings(theme, config2.theme ?? {});
|
|
819
840
|
s.stop(`Parsed the theme`);
|
|
820
841
|
s.start(`Resolving the output path`);
|
|
821
842
|
const outPath = await resolveOutputPath(outFile);
|
|
@@ -833,19 +854,22 @@ var generateThemeTypings = async ({
|
|
|
833
854
|
p.cancel(source_default.red(e instanceof Error ? e.message : "Message is missing"));
|
|
834
855
|
}
|
|
835
856
|
};
|
|
836
|
-
var actionTokens = async (themePath2, { out: outFile, watch: watchFile }) => {
|
|
857
|
+
var actionTokens = async (themePath2, { cwd = import_path3.default.resolve(), out: outFile, watch: watchFile }) => {
|
|
837
858
|
const readFile2 = async () => {
|
|
838
859
|
const filePath = import_path3.default.resolve(themePath2);
|
|
839
|
-
const { mod
|
|
840
|
-
|
|
860
|
+
const { mod, dependencies: dependencies2 } = await getModule(filePath, cwd);
|
|
861
|
+
const theme2 = mod?.default ?? mod?.theme ?? mod?.customTheme ?? mod?.defaultTheme ?? {};
|
|
862
|
+
const config3 = mod?.config ?? mod?.customConfig ?? mod?.defaultConfig ?? {};
|
|
863
|
+
return { theme: theme2, config: config3, dependencies: dependencies2 };
|
|
841
864
|
};
|
|
842
865
|
let file = await readFile2();
|
|
866
|
+
const { theme, config: config2, dependencies } = file;
|
|
843
867
|
const buildFile = async () => {
|
|
844
|
-
await generateThemeTypings({ theme:
|
|
868
|
+
await generateThemeTypings({ theme, config: config2, outFile });
|
|
845
869
|
if (watchFile) console.log("\n", "\u231B\uFE0F Watching for changes...");
|
|
846
870
|
};
|
|
847
871
|
if (watchFile) {
|
|
848
|
-
const watchPath = typeof watchFile === "string" ? watchFile :
|
|
872
|
+
const watchPath = typeof watchFile === "string" ? watchFile : dependencies;
|
|
849
873
|
import_chokidar.default.watch(watchPath).on("ready", buildFile).on("change", async (filePath) => {
|
|
850
874
|
console.log("\u{1F4E6} File changed", filePath);
|
|
851
875
|
file = await readFile2();
|
|
@@ -859,7 +883,7 @@ var actionTokens = async (themePath2, { out: outFile, watch: watchFile }) => {
|
|
|
859
883
|
// src/command/theme/index.ts
|
|
860
884
|
init_cjs_shims();
|
|
861
885
|
var import_dns = __toESM(require("dns"));
|
|
862
|
-
var
|
|
886
|
+
var import_fs3 = require("fs");
|
|
863
887
|
var import_promises2 = require("fs/promises");
|
|
864
888
|
var import_node_stream = require("stream");
|
|
865
889
|
var import_promises3 = require("stream/promises");
|
|
@@ -870,10 +894,10 @@ var import_typescript = require("typescript");
|
|
|
870
894
|
|
|
871
895
|
// src/utils/fs.ts
|
|
872
896
|
init_cjs_shims();
|
|
873
|
-
var
|
|
897
|
+
var import_fs2 = __toESM(require("fs"));
|
|
874
898
|
var isWriteable = async (directory) => {
|
|
875
899
|
try {
|
|
876
|
-
await
|
|
900
|
+
await import_fs2.default.promises.access(directory, (import_fs2.default.constants || import_fs2.default).W_OK);
|
|
877
901
|
return true;
|
|
878
902
|
} catch {
|
|
879
903
|
return false;
|
|
@@ -1046,13 +1070,13 @@ var generateTheme = async (outPath, fileMap, isReactReplace, isForceReplace) =>
|
|
|
1046
1070
|
}
|
|
1047
1071
|
const formattedContent = await prettier(content);
|
|
1048
1072
|
try {
|
|
1049
|
-
if (!isForceReplace && (0,
|
|
1073
|
+
if (!isForceReplace && (0, import_fs3.existsSync)(targetPath)) return;
|
|
1050
1074
|
await (0, import_promises2.writeFile)(targetPath, formattedContent, "utf-8");
|
|
1051
1075
|
} catch (e) {
|
|
1052
1076
|
if (e instanceof Error && "code" in e && e.code === "ENOENT") {
|
|
1053
1077
|
const dirPath = import_path4.default.dirname(targetPath);
|
|
1054
1078
|
await (0, import_promises2.mkdir)(dirPath, { recursive: true });
|
|
1055
|
-
if (!isForceReplace && (0,
|
|
1079
|
+
if (!isForceReplace && (0, import_fs3.existsSync)(targetPath)) return;
|
|
1056
1080
|
await (0, import_promises2.writeFile)(targetPath, formattedContent, "utf-8");
|
|
1057
1081
|
}
|
|
1058
1082
|
}
|
|
@@ -25,8 +25,8 @@ __export(config_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(config_exports);
|
|
26
26
|
var config = [
|
|
27
27
|
{ key: "borders" },
|
|
28
|
-
{ key: "breakpoints"
|
|
29
|
-
{ key: "colors"
|
|
28
|
+
{ key: "breakpoints" },
|
|
29
|
+
{ key: "colors" },
|
|
30
30
|
{ key: "fonts" },
|
|
31
31
|
{ key: "fontSizes" },
|
|
32
32
|
{ key: "fontWeights" },
|
|
@@ -35,11 +35,14 @@ var config = [
|
|
|
35
35
|
{ key: "radii" },
|
|
36
36
|
{ key: "shadows" },
|
|
37
37
|
{ key: "blurs" },
|
|
38
|
-
{ key: "sizes"
|
|
38
|
+
{ key: "sizes" },
|
|
39
39
|
{ key: "spaces", flatMap: (value) => [value, `-${value}`] },
|
|
40
40
|
{ key: "zIndices" },
|
|
41
41
|
{ key: "animations", omitScanKeys: ["keyframes"] },
|
|
42
|
-
{ key: "gradients" }
|
|
42
|
+
{ key: "gradients" },
|
|
43
|
+
{ key: "transitions.property", replaceKey: "transitionProperty" },
|
|
44
|
+
{ key: "transitions.duration", replaceKey: "transitionDuration" },
|
|
45
|
+
{ key: "transitions.easing", replaceKey: "transitionEasing" }
|
|
43
46
|
];
|
|
44
47
|
// Annotate the CommonJS export names for ESM import in node:
|
|
45
48
|
0 && (module.exports = {
|
|
@@ -40,22 +40,13 @@ var init_cjs_shims = __esm({
|
|
|
40
40
|
// src/command/tokens/create-theme-typings.ts
|
|
41
41
|
var create_theme_typings_exports = {};
|
|
42
42
|
__export(create_theme_typings_exports, {
|
|
43
|
-
createThemeTypings: () => createThemeTypings
|
|
44
|
-
extractColorSchemes: () => extractColorSchemes,
|
|
45
|
-
extractComponents: () => extractComponents,
|
|
46
|
-
extractKeys: () => extractKeys,
|
|
47
|
-
extractPaths: () => extractPaths,
|
|
48
|
-
extractThemeSchemes: () => extractThemeSchemes,
|
|
49
|
-
extractTransitions: () => extractTransitions,
|
|
50
|
-
print: () => print,
|
|
51
|
-
printComponent: () => printComponent
|
|
43
|
+
createThemeTypings: () => createThemeTypings
|
|
52
44
|
});
|
|
53
45
|
module.exports = __toCommonJS(create_theme_typings_exports);
|
|
54
46
|
init_cjs_shims();
|
|
55
47
|
|
|
56
48
|
// src/utils/assertion.ts
|
|
57
49
|
init_cjs_shims();
|
|
58
|
-
var isString = (value) => Object.prototype.toString.call(value) === "[object String]";
|
|
59
50
|
var isObject = (obj) => obj !== null && (typeof obj === "object" || typeof obj === "function") && !isArray(obj);
|
|
60
51
|
var isArray = (value) => Array.isArray(value);
|
|
61
52
|
|
|
@@ -80,21 +71,17 @@ var prettier = async (content, options) => {
|
|
|
80
71
|
|
|
81
72
|
// src/utils/object.ts
|
|
82
73
|
init_cjs_shims();
|
|
83
|
-
var
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
if (keys.includes(key)) return;
|
|
87
|
-
result[key] = obj[key];
|
|
88
|
-
});
|
|
89
|
-
return result;
|
|
74
|
+
var getObject = (obj, path2) => {
|
|
75
|
+
const keys = path2.split(".");
|
|
76
|
+
return keys.reduce((obj2, key) => obj2[key] ?? {}, obj);
|
|
90
77
|
};
|
|
91
78
|
|
|
92
79
|
// src/command/tokens/config.ts
|
|
93
80
|
init_cjs_shims();
|
|
94
81
|
var config = [
|
|
95
82
|
{ key: "borders" },
|
|
96
|
-
{ key: "breakpoints"
|
|
97
|
-
{ key: "colors"
|
|
83
|
+
{ key: "breakpoints" },
|
|
84
|
+
{ key: "colors" },
|
|
98
85
|
{ key: "fonts" },
|
|
99
86
|
{ key: "fontSizes" },
|
|
100
87
|
{ key: "fontWeights" },
|
|
@@ -103,11 +90,14 @@ var config = [
|
|
|
103
90
|
{ key: "radii" },
|
|
104
91
|
{ key: "shadows" },
|
|
105
92
|
{ key: "blurs" },
|
|
106
|
-
{ key: "sizes"
|
|
93
|
+
{ key: "sizes" },
|
|
107
94
|
{ key: "spaces", flatMap: (value) => [value, `-${value}`] },
|
|
108
95
|
{ key: "zIndices" },
|
|
109
96
|
{ key: "animations", omitScanKeys: ["keyframes"] },
|
|
110
|
-
{ key: "gradients" }
|
|
97
|
+
{ key: "gradients" },
|
|
98
|
+
{ key: "transitions.property", replaceKey: "transitionProperty" },
|
|
99
|
+
{ key: "transitions.duration", replaceKey: "transitionDuration" },
|
|
100
|
+
{ key: "transitions.easing", replaceKey: "transitionEasing" }
|
|
111
101
|
];
|
|
112
102
|
|
|
113
103
|
// src/command/tokens/create-theme-typings.ts
|
|
@@ -133,31 +123,6 @@ var extractComponents = ({ components = {} }) => Object.entries(components).redu
|
|
|
133
123
|
},
|
|
134
124
|
{}
|
|
135
125
|
);
|
|
136
|
-
var extractTransitions = (theme) => {
|
|
137
|
-
let transitionProperty = [];
|
|
138
|
-
let transitionDuration = [];
|
|
139
|
-
let transitionEasing = [];
|
|
140
|
-
const { transitions, semantics } = theme;
|
|
141
|
-
if (!isObject(transitions))
|
|
142
|
-
return { transitionProperty, transitionDuration, transitionEasing };
|
|
143
|
-
const { property, duration, easing } = semantics.transitions ?? {};
|
|
144
|
-
Object.entries(transitions).forEach(([key, value]) => {
|
|
145
|
-
switch (key) {
|
|
146
|
-
case "property":
|
|
147
|
-
transitionProperty = [...extractPaths(value), ...extractPaths(property)];
|
|
148
|
-
break;
|
|
149
|
-
case "duration":
|
|
150
|
-
transitionDuration = [...extractPaths(value), ...extractPaths(duration)];
|
|
151
|
-
break;
|
|
152
|
-
case "easing":
|
|
153
|
-
transitionEasing = [...extractPaths(value), ...extractPaths(easing)];
|
|
154
|
-
break;
|
|
155
|
-
default:
|
|
156
|
-
return;
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
return { transitionProperty, transitionDuration, transitionEasing };
|
|
160
|
-
};
|
|
161
126
|
var isTone = (value) => {
|
|
162
127
|
if (!isObject(value)) return false;
|
|
163
128
|
const keys = Object.keys(value);
|
|
@@ -165,75 +130,90 @@ var isTone = (value) => {
|
|
|
165
130
|
};
|
|
166
131
|
var extractColorSchemes = (theme) => {
|
|
167
132
|
const { colors, semantics } = theme;
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
};
|
|
172
|
-
if (!isObject(colors)) return results;
|
|
133
|
+
let colorSchemes = [];
|
|
134
|
+
let colorSchemeColors = [];
|
|
135
|
+
if (!isObject(colors)) return { colorSchemes, colorSchemeColors };
|
|
173
136
|
Object.entries(colors).forEach(([key, value]) => {
|
|
174
137
|
if (!isTone(value)) return;
|
|
175
|
-
|
|
138
|
+
colorSchemes.push(key);
|
|
176
139
|
});
|
|
177
|
-
if (!isObject(semantics?.colorSchemes))
|
|
140
|
+
if (!isObject(semantics?.colorSchemes))
|
|
141
|
+
return { colorSchemes, colorSchemeColors };
|
|
178
142
|
Object.entries(semantics.colorSchemes).forEach(([key, value]) => {
|
|
179
143
|
if (isTone(value)) {
|
|
180
|
-
|
|
181
|
-
|
|
144
|
+
colorSchemes.push(key);
|
|
145
|
+
colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
|
|
182
146
|
} else {
|
|
183
|
-
const hasColorScheme = isArray(value) ? value.every(
|
|
184
|
-
(key2) => isString(key2) && Object.keys(colors).includes(key2)
|
|
185
|
-
) : Object.keys(colors).some((key2) => key2 === value);
|
|
147
|
+
const hasColorScheme = isArray(value) ? value.every((key2) => Object.keys(colors).includes(String(key2))) : Object.keys(colors).includes(String(value));
|
|
186
148
|
if (!hasColorScheme) return;
|
|
187
|
-
|
|
188
|
-
|
|
149
|
+
colorSchemes.push(key);
|
|
150
|
+
colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
|
|
189
151
|
}
|
|
190
152
|
});
|
|
191
|
-
return
|
|
153
|
+
return { colorSchemes, colorSchemeColors };
|
|
192
154
|
};
|
|
193
155
|
var extractThemeSchemes = (theme) => {
|
|
194
156
|
const { themeSchemes } = theme;
|
|
195
157
|
if (!isObject(themeSchemes)) return ["base"];
|
|
196
158
|
return ["base", ...Object.keys(themeSchemes)];
|
|
197
159
|
};
|
|
198
|
-
var extractPaths = (target, maxDepth = 3, omitKeys = []) => {
|
|
160
|
+
var extractPaths = (target, maxDepth = 3, omitKeys = [], shouldProcess) => {
|
|
199
161
|
if (!isObject(target) && !isArray(target) || !maxDepth) return [];
|
|
200
|
-
return Object.entries(target).reduce((
|
|
201
|
-
if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2))) {
|
|
202
|
-
extractPaths(value, maxDepth - 1, omitKeys).forEach(
|
|
203
|
-
(nestedKey) =>
|
|
162
|
+
return Object.entries(target).reduce((prev, [key, value]) => {
|
|
163
|
+
if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2)) && (!shouldProcess || shouldProcess(value))) {
|
|
164
|
+
extractPaths(value, maxDepth - 1, omitKeys, shouldProcess).forEach(
|
|
165
|
+
(nestedKey) => prev.push(`${key}.${nestedKey}`)
|
|
204
166
|
);
|
|
205
167
|
} else {
|
|
206
|
-
|
|
168
|
+
prev.push(key);
|
|
207
169
|
}
|
|
208
|
-
return
|
|
170
|
+
return prev;
|
|
209
171
|
}, []);
|
|
210
172
|
};
|
|
211
|
-
var extractKeys = (
|
|
212
|
-
const
|
|
213
|
-
const property = keys.reduce((obj, key2) => obj[key2] ?? {}, theme);
|
|
173
|
+
var extractKeys = (obj, key) => {
|
|
174
|
+
const property = getObject(obj, key);
|
|
214
175
|
if (!isObject(property)) return [];
|
|
215
176
|
return Object.keys(property);
|
|
216
177
|
};
|
|
217
|
-
var createThemeTypings = async (theme) => {
|
|
178
|
+
var createThemeTypings = async (theme, { responsive = false }) => {
|
|
179
|
+
let shouldProcess = void 0;
|
|
180
|
+
if (responsive && isObject(theme.breakpoints)) {
|
|
181
|
+
const keys = ["base", ...Object.keys(theme.breakpoints)];
|
|
182
|
+
const isResponsive = (obj) => {
|
|
183
|
+
const providedKeys = Object.keys(obj);
|
|
184
|
+
if (!providedKeys.length) return false;
|
|
185
|
+
if (!providedKeys.includes("base")) return false;
|
|
186
|
+
return providedKeys.every((key) => keys.includes(key));
|
|
187
|
+
};
|
|
188
|
+
shouldProcess = (obj) => !isResponsive(obj);
|
|
189
|
+
}
|
|
218
190
|
const tokens = config.reduce(
|
|
219
191
|
(prev, {
|
|
220
192
|
key,
|
|
193
|
+
replaceKey,
|
|
221
194
|
maxScanDepth,
|
|
222
195
|
omitScanKeys,
|
|
223
|
-
filter = () => true,
|
|
224
196
|
flatMap = (value) => value
|
|
225
197
|
}) => {
|
|
226
|
-
const target = theme
|
|
227
|
-
prev[key] = [];
|
|
198
|
+
const target = getObject(theme, key);
|
|
199
|
+
prev[replaceKey ?? key] = [];
|
|
228
200
|
if (isObject(target) || isArray(target)) {
|
|
229
|
-
prev[key] = extractPaths(
|
|
201
|
+
prev[replaceKey ?? key] = extractPaths(
|
|
202
|
+
target,
|
|
203
|
+
maxScanDepth,
|
|
204
|
+
omitScanKeys,
|
|
205
|
+
shouldProcess
|
|
206
|
+
).flatMap(flatMap);
|
|
230
207
|
}
|
|
231
208
|
if (isObject(theme.semantics)) {
|
|
232
|
-
const
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
209
|
+
const target2 = getObject(theme.semantics, key);
|
|
210
|
+
const semanticKeys = extractPaths(
|
|
211
|
+
target2,
|
|
212
|
+
maxScanDepth,
|
|
213
|
+
omitScanKeys,
|
|
214
|
+
shouldProcess
|
|
215
|
+
).flatMap(flatMap);
|
|
216
|
+
prev[replaceKey ?? key].push(...semanticKeys);
|
|
237
217
|
}
|
|
238
218
|
return prev;
|
|
239
219
|
},
|
|
@@ -243,35 +223,26 @@ var createThemeTypings = async (theme) => {
|
|
|
243
223
|
const layerStyles = extractKeys(theme, "styles.layerStyles");
|
|
244
224
|
const { colorSchemes, colorSchemeColors } = extractColorSchemes(theme);
|
|
245
225
|
const themeSchemes = extractThemeSchemes(theme);
|
|
246
|
-
const
|
|
247
|
-
const componentTypes = extractComponents(theme);
|
|
226
|
+
const components = extractComponents(theme);
|
|
248
227
|
tokens.colors = [...tokens.colors, ...colorSchemeColors];
|
|
249
228
|
return prettier(
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
{
|
|
229
|
+
[
|
|
230
|
+
`import type { UITheme } from './ui-theme.types'`,
|
|
231
|
+
``,
|
|
232
|
+
`export interface GeneratedTheme extends UITheme {`,
|
|
233
|
+
print({
|
|
254
234
|
...tokens,
|
|
255
235
|
textStyles,
|
|
256
236
|
layerStyles,
|
|
257
237
|
colorSchemes,
|
|
258
|
-
themeSchemes
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
)} ${printComponent(componentTypes)} }`
|
|
238
|
+
themeSchemes
|
|
239
|
+
}),
|
|
240
|
+
printComponent(components),
|
|
241
|
+
`}`
|
|
242
|
+
].join("\n")
|
|
264
243
|
);
|
|
265
244
|
};
|
|
266
245
|
// Annotate the CommonJS export names for ESM import in node:
|
|
267
246
|
0 && (module.exports = {
|
|
268
|
-
createThemeTypings
|
|
269
|
-
extractColorSchemes,
|
|
270
|
-
extractComponents,
|
|
271
|
-
extractKeys,
|
|
272
|
-
extractPaths,
|
|
273
|
-
extractThemeSchemes,
|
|
274
|
-
extractTransitions,
|
|
275
|
-
print,
|
|
276
|
-
printComponent
|
|
247
|
+
createThemeTypings
|
|
277
248
|
});
|