Color decisions map to the actual decision variable

garronej · garronej · commit df707186aba9 · 2023-08-19T04:59:50.000+02:00
diff --git a/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions.ts b/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions.ts
@@ -1,5 +1,5 @@
 import { parseColorOptions } from "./colorOptions";
-import { parseColorDecision } from "./colorDecisions";
+import { parseColorDecisions } from "./colorDecisions";
 import { exclude } from "tsafe/exclude";
 import type { ColorDecision } from "./colorDecisions";
 import type { ColorOption } from "./colorOptions";
@@ -12,7 +12,7 @@ export type ColorDecisionAndCorrespondingOption = Omit<ColorDecision, "optionThe
 export function generateColorDecisionAndCorrespondingOptionsTsCode(rawCssCode: string): string {
     const colorOptions = parseColorOptions(rawCssCode);
 
-    const colorDecisionAndCorrespondingOptions = parseColorDecision(rawCssCode)
+    const colorDecisionAndCorrespondingOptions = parseColorDecisions(rawCssCode)
         .map(colorDecision => {
             const colorOption = colorOptions.find(
                 colorOption =>
diff --git a/scripts/build/cssToTs/colorDecisions.ts b/scripts/build/cssToTs/colorDecisions.ts
@@ -166,7 +166,7 @@ export type ColorDecision = {
     optionThemePath: readonly string[];
 };
 
-export const parseColorDecision = memoize((rawCssCode: string): ColorDecision[] => {
+export const parseColorDecisions = memoize((rawCssCode: string): ColorDecision[] => {
     const { parseColorDecisionName } = createParseColorDecisionName(rawCssCode);
 
     const parsedCss = parseCss(rawCssCode);
@@ -217,12 +217,12 @@ export const parseColorDecision = memoize((rawCssCode: string): ColorDecision[]
         .filter(exclude(undefined));
 });
 
-export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
+export function generateGetColorDecisionsHexTsCode(rawCssCode: string): string {
     const obj: any = {};
 
     const keyValues: Record<string, string> = {};
 
-    parseColorDecision(rawCssCode).forEach(colorDecision => {
+    parseColorDecisions(rawCssCode).forEach(colorDecision => {
         const value = (() => {
             const hash = crypto
                 .createHash("sha256")
@@ -253,9 +253,9 @@ export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
     });
 
     return [
-        `export function getColorDecisions<Format extends "css var" | "hex">(`,
+        `export function getColorDecisionsHex(`,
         `    params: {`,
-        `        colorOptions: ColorOptions<Format>;`,
+        `        colorOptions: ColorOptions<"hex">;`,
         `    }`,
         `) {`,
         ``,
@@ -276,3 +276,43 @@ export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
         `}`
     ].join("\n");
 }
+
+export function generateColorDecisionsTsCode(rawCssCode: string) {
+    const colorDecisions = parseColorDecisions(rawCssCode);
+
+    const obj: any = {};
+
+    colorDecisions.forEach(colorDecision => {
+        const value = `var(${colorDecision.colorDecisionName})`;
+
+        function req(obj: any, path: readonly string[]): void {
+            const [propertyName, ...pathRest] = path;
+
+            if (pathRest.length === 0) {
+                obj[propertyName] = value;
+                return;
+            }
+
+            if (obj[propertyName] === undefined) {
+                obj[propertyName] = {};
+            }
+
+            req(obj[propertyName], pathRest);
+        }
+
+        req(obj, colorDecision.themePath);
+    });
+
+    return [
+        ``,
+        `export const colorDecisions= {`,
+        JSON.stringify(obj, null, 2)
+            .replace(/^{\n/, "")
+            .replace(/\n}$/, "")
+            .split("\n")
+            .map(line => line.replace(/^[ ]{2}/, ""))
+            .map(line => `    ${line}`)
+            .join("\n"),
+        `} as const;`
+    ].join("\n");
+}
diff --git a/scripts/build/cssToTs/cssToTs.ts b/scripts/build/cssToTs/cssToTs.ts
@@ -1,5 +1,5 @@
 import { generateBreakpointsTsCode } from "./breakpoints";
-import { generateGetColorDecisionsTsCode } from "./colorDecisions";
+import { generateGetColorDecisionsHexTsCode, generateColorDecisionsTsCode } from "./colorDecisions";
 import { generateGetColorOptionsHexTsCode, generateColorOptionsTsCode } from "./colorOptions";
 import { getProjectRoot } from "../../../src/bin/tools/getProjectRoot";
 import { generateTypographyTsCode } from "./typography";
@@ -58,42 +58,43 @@ export function cssToTs(params: {
         )
     );
 
+    const targetGetColorDecisionsHexFilePath = pathJoin(
+        generatedDirPath,
+        "getColorDecisionsHex.ts"
+    );
+
     fs.writeFileSync(
-        pathJoin(generatedDirPath, "getColorDecisions.ts"),
+        targetGetColorDecisionsHexFilePath,
         Buffer.from(
             [
                 warningMessage,
                 `import type { ColorOptions } from "./${pathBasename(
                     targetColorOptionsFilePath
                 ).replace(/\.ts$/, "")}";`,
                 ``,
-                generateGetColorDecisionsTsCode(rawDsfrCssCode).replace(
-                    "export function getColorDecisions",
-                    "function getColorDecisions_noReturnType"
-                ),
-                ``,
-                `type IsHex<T> = T extends \`#\${string}\` ? T : never;`,
-                ``,
-                `type OnlyHex<T> = {`,
-                `    [K in keyof T]: T[K] extends string ? IsHex<T[K]> : OnlyHex<T[K]>`,
-                `};`,
-                ``,
-                `type IsCssVar<T> = T extends \`var(--\${string})\` ? T : never;`,
-                `type OnlyCssVar<T> = {`,
-                `    [K in keyof T]: T[K] extends string ? IsCssVar<T[K]> : OnlyCssVar<T[K]>`,
-                `};`,
+                generateGetColorDecisionsHexTsCode(rawDsfrCssCode),
+                ``
+            ].join("\n"),
+            "utf8"
+        )
+    );
+
+    const targetColorDecisionsFilePath = pathJoin(generatedDirPath, "colorDecisions.ts");
+
+    fs.writeFileSync(
+        targetColorDecisionsFilePath,
+        Buffer.from(
+            [
+                warningMessage,
                 ``,
-                `export type ColorDecisions<Format extends "css var" | "hex" = "css var"> =`,
-                `    Format extends "css var" ? OnlyCssVar<ReturnType<typeof getColorDecisions_noReturnType>> :`,
-                `    OnlyHex<ReturnType<typeof getColorDecisions_noReturnType>>;`,
+                `import type { getColorDecisionsHex } from "./${pathBasename(
+                    targetGetColorDecisionsHexFilePath
+                ).replace(/\.ts$/, "")}";`,
                 ``,
-                `export function getColorDecisions<Format extends "css var" | "hex">(params: {`,
-                `    colorOptions: ColorOptions<Format>;`,
+                generateColorDecisionsTsCode(rawDsfrCssCode),
                 ``,
-                `}): ColorDecisions<Format> {`,
-                `    // ${"@"}ts-expect-error: We are intentionally sacrificing internal type safety for a more accurate type annotation.`,
-                `    return getColorDecisions_noReturnType(params);`,
-                `}`,
+                `export type ColorDecisions<Format extends "css var" | "hex"= "css var"> = `,
+                `  Format extends "css var" ? typeof colorDecisions : ReturnType<typeof getColorDecisionsHex>;`,
                 ``
             ].join("\n"),
             "utf8"
diff --git a/src/fr/colors.ts b/src/fr/colors.ts
@@ -1,6 +1,7 @@
 import { colorOptions, type ColorOptions } from "./generatedFromCss/colorOptions";
 import { getColorOptionsHex } from "./generatedFromCss/getColorOptionsHex";
-import { getColorDecisions, type ColorDecisions } from "./generatedFromCss/getColorDecisions";
+import { colorDecisions, type ColorDecisions } from "./generatedFromCss/colorDecisions";
+import { getColorDecisionsHex } from "./generatedFromCss/getColorDecisionsHex";
 
 export type Colors = {
     options: ColorOptions<"css var">;
@@ -13,12 +14,12 @@ export type Colors = {
 
 export const colors: Colors = {
     "options": colorOptions,
-    "decisions": getColorDecisions({ colorOptions }),
+    "decisions": colorDecisions,
     "getHex": (() => {
         const getHex: Colors["getHex"] = ({ isDark }) => {
             const options = getColorOptionsHex({ isDark });
 
-            const decisions = getColorDecisions({ colorOptions });
+            const decisions = getColorDecisionsHex({ "colorOptions": options });
 
             return {
                 options,
diff --git a/src/fr/index.ts b/src/fr/index.ts
@@ -7,7 +7,7 @@ import { cx } from "./cx";
 export type { FrCxArg } from "./cx";
 export type { Colors } from "./colors";
 export type { ColorOptions } from "./generatedFromCss/colorOptions";
-export type { ColorDecisions } from "./generatedFromCss/getColorDecisions";
+export type { ColorDecisions } from "./generatedFromCss/colorDecisions";
 import { colors } from "./colors";
 export type { FrClassName, FrIconClassName, RiIconClassName } from "./generatedFromCss/classNames";
 import { typography } from "./generatedFromCss/typography";
diff --git a/test/runtime/scripts/colorDecisions/generateGetColorDecisionsTsCode.test.ts b/test/runtime/scripts/colorDecisions/generateGetColorDecisionsTsCode.test.ts
@@ -1,5 +1,5 @@
 import { it, expect } from "vitest";
-import { generateGetColorDecisionsTsCode } from "../../../../scripts/build/cssToTs/colorDecisions";
+import { generateGetColorDecisionsHexTsCode } from "../../../../scripts/build/cssToTs/colorDecisions";
 
 it("Generates the correct TS code for breakpoints", () => {
     const input = `
@@ -35,9 +35,9 @@ it("Generates the correct TS code for breakpoints", () => {
 `;
 
     const expected = `
-export function getColorDecisions<Format extends "css var" | "hex">(
+export function getColorDecisionsHex(
     params: {
-        colorOptions: ColorOptions<Format>;
+        colorOptions: ColorOptions<"hex">;
     }
 ) {
 
@@ -72,7 +72,7 @@ export function getColorDecisions<Format extends "css var" | "hex">(
     } as const;
 }`.replace(/^\n/, "");
 
-    const got = generateGetColorDecisionsTsCode(input);
+    const got = generateGetColorDecisionsHexTsCode(input);
 
     expect(got).toBe(expected);
 });
diff --git a/test/runtime/scripts/colorDecisions/parseColorDecisions.test.ts b/test/runtime/scripts/colorDecisions/parseColorDecisions.test.ts
@@ -1,5 +1,5 @@
 import { it, expect } from "vitest";
-import { parseColorDecision } from "../../../../scripts/build/cssToTs/colorDecisions";
+import { parseColorDecisions } from "../../../../scripts/build/cssToTs/colorDecisions";
 import type { ColorDecision } from "../../../../scripts/build/cssToTs/colorDecisions";
 
 it("Color decisions to be successfully parsed", () => {
@@ -35,7 +35,7 @@ it("Color decisions to be successfully parsed", () => {
 @media (min-width: 78em) { }
 `;
 
-    const got = parseColorDecision(rawCssCode);
+    const got = parseColorDecisions(rawCssCode);
 
     const expected: ColorDecision[] = [
         {
