Feat. a function that resolves color hex code to DSFR palette decision

Author: garronej

src/fr/colorResolver.ts

@@ -0,0 +1,47 @@
+import { colorOptions, colorDecisions } from "./generatedFromCss/colorResolution";
+import { exclude } from "tsafe/exclude";
+
+type ColorDecision = {
+    cssVarName: `--${string}`;
+    decisionObjectPath: readonly string[];
+    option: {
+        color: `#${string}` | { light: `#${string}`; dark: `#${string}` };
+        optionObjectPath: readonly string[];
+        cssVarName: `--${string}`;
+    };
+};
+
+export function resolveColorHexCodeToDecision(params: {
+    hexColorCode: `#${string}`;
+}): ColorDecision[] {
+    const { hexColorCode } = params;
+
+    const options = colorOptions
+        .filter(({ color }) =>
+            typeof color === "string"
+                ? color === hexColorCode
+                : color.dark === hexColorCode || color.light === hexColorCode
+        )
+        .map((colorOption): ColorDecision["option"] => ({
+            "color": colorOption.color,
+            "optionObjectPath": colorOption.themePath,
+            "cssVarName": colorOption.colorOptionName
+        }));
+
+    return colorDecisions
+        .map(colorDecision => {
+            const option = options.find(
+                ({ optionObjectPath }) =>
+                    optionObjectPath.join(".") === colorDecision.optionThemePath.join(".")
+            );
+            return option === undefined ? undefined : ([colorDecision, option] as const);
+        })
+        .filter(exclude(undefined))
+        .map(
+            ([{ colorDecisionName, themePath }, option]): ColorDecision => ({
+                "cssVarName": colorDecisionName,
+                "decisionObjectPath": themePath,
+                option
+            })
+        );
+}

src/scripts/build/cssToTs/colorDecisions.ts

@@ -9,6 +9,7 @@ import { is } from "tsafe/is";
 import { parseColorOptionName, getThemePath as getColorOptionThemePath } from "./colorOptions";
 import * as crypto from "crypto";
 import { multiReplace } from "../../tools/multiReplace";
+import memoize from "memoizee";
 
 const contexts = ["background", "text", "border", "artwork"] as const;
 
@@ -159,11 +160,12 @@ export function getThemePath(parsedColorDecisionName: ParsedColorDecisionName) {
 }
 
 export type ColorDecision = {
+    colorDecisionName: `--${string}`;
     themePath: string[];
     optionThemePath: string[];
 };
 
-export function parseColorDecision(rawCssCode: string): ColorDecision[] {
+export const parseColorDecision = memoize((rawCssCode: string): ColorDecision[] => {
     const { parseColorDecisionName } = createParseColorDecisionName(rawCssCode);
 
     const parsedCss = parseCss(rawCssCode);
@@ -179,13 +181,13 @@ export function parseColorDecision(rawCssCode: string): ColorDecision[] {
 
         assert(node !== undefined);
 
-        const { declarations } = node as any;
+        const { declarations } = node as { declarations: { property: string; value: string }[] };
 
         return { declarations };
     })();
 
     return declarations
-        .map(({ property, value }: { property: string; value: string }) => {
+        .map(({ property, value }) => {
             const mathArray = value.match(/^var\((--[^)]+)\)$/);
 
             if (mathArray === null) {
@@ -203,12 +205,13 @@ export function parseColorDecision(rawCssCode: string): ColorDecision[] {
             assert(is<`--${string}`>(property));
 
             return {
+                "colorDecisionName": property,
                 "themePath": getThemePath(parseColorDecisionName(property)),
                 "optionThemePath": getColorOptionThemePath(parseColorOptionName(colorOptionName))
             };
         })
         .filter(exclude(undefined));
-}
+});
 
 export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
     const obj: any = {};

src/scripts/build/cssToTs/colorOptions.ts

@@ -321,7 +321,7 @@ export type ColorOption = {
     colorOptionName: `--${string}`;
     themePath: string[];
     color:
-        | string
+        | `#${string}`
         | {
               light: `#${string}`;
               dark: `#${string}`;

src/scripts/build/cssToTs/colorResolution.ts

@@ -0,0 +1,19 @@
+import { parseColorOptions } from "./colorOptions";
+import { parseColorDecision } from "./colorDecisions";
+
+export function generateColorResolutionTsCode(rawCssCode: string): string {
+    return [
+        `export const colorOptions= ${JSON.stringify(
+            parseColorOptions(rawCssCode),
+            null,
+            4
+        )} as const;`,
+        ``,
+        `export const colorDecisions= ${JSON.stringify(
+            parseColorDecision(rawCssCode),
+            null,
+            4
+        )} as const;`,
+        ``
+    ].join("\n");
+}

src/scripts/build/cssToTs/cssToTs.ts

@@ -5,6 +5,7 @@ import { getProjectRoot } from "../../../bin/tools/getProjectRoot";
 import { generateTypographyTsCode } from "./typography";
 import { generateSpacingTsCode } from "./spacing";
 import { generateClassNamesTsCode } from "./classNames";
+import { generateColorResolutionTsCode } from "./colorResolution";
 import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename, relative as pathRelative } from "path";
 import type { Icon } from "../../../bin/only-include-used-icons";
@@ -111,4 +112,12 @@ export function cssToTs(params: {
             "utf8"
         )
     );
+
+    fs.writeFileSync(
+        pathJoin(generatedDirPath, "colorResolution.ts"),
+        Buffer.from(
+            [warningMessage, ``, generateColorResolutionTsCode(rawDsfrCssCode), ``].join("\n"),
+            "utf8"
+        )
+    );
 }

test/runtime/lib/colorResolver.test.ts

@@ -0,0 +1,61 @@
+import { it, expect } from "vitest";
+import { resolveColorHexCodeToDecision } from "../../../src/fr/colorResolver";
+
+it("Resolve to the correct color decision", () => {
+    const got = resolveColorHexCodeToDecision({
+        "hexColorCode": "#474747"
+    });
+
+    const expected = [
+        {
+            "cssVarName": "--background-default-grey-active",
+            "decisionObjectPath": ["background", "default", "grey", "active"],
+            "option": {
+                "color": {
+                    "light": "#ededed",
+                    "dark": "#474747"
+                },
+                "optionObjectPath": ["grey", "_1000_50", "active"],
+                "cssVarName": "--grey-1000-50-active"
+            }
+        },
+        {
+            "cssVarName": "--background-contrast-grey-hover",
+            "decisionObjectPath": ["background", "contrast", "grey", "hover"],
+            "option": {
+                "color": {
+                    "light": "#d2d2d2",
+                    "dark": "#474747"
+                },
+                "optionObjectPath": ["grey", "_950_100", "hover"],
+                "cssVarName": "--grey-950-100-hover"
+            }
+        },
+        {
+            "cssVarName": "--background-overlap-grey-hover",
+            "decisionObjectPath": ["background", "overlap", "grey", "hover"],
+            "option": {
+                "color": {
+                    "light": "#f6f6f6",
+                    "dark": "#474747"
+                },
+                "optionObjectPath": ["grey", "_1000_100", "hover"],
+                "cssVarName": "--grey-1000-100-hover"
+            }
+        },
+        {
+            "cssVarName": "--background-alt-raised-grey-hover",
+            "decisionObjectPath": ["background", "altRaised", "grey", "hover"],
+            "option": {
+                "color": {
+                    "light": "#dfdfdf",
+                    "dark": "#474747"
+                },
+                "optionObjectPath": ["grey", "_975_100", "hover"],
+                "cssVarName": "--grey-975-100-hover"
+            }
+        }
+    ];
+
+    expect(got).toStrictEqual(expected);
+});

test/runtime/scripts/colorDecisions/parseColorDecision.test.ts

@@ -39,22 +39,27 @@ it("Color decisions to be successfully parsed", () => {
 
     const expected: ColorDecision[] = [
         {
+            "colorDecisionName": "--background-default-grey-hover",
             "themePath": ["background", "default", "grey", "hover"],
             "optionThemePath": ["grey", "_1000_50", "hover"]
         },
         {
+            "colorDecisionName": "--background-default-grey",
             "themePath": ["background", "default", "grey", "default"],
             "optionThemePath": ["grey", "_1000_50", "default"]
         },
         {
+            "colorDecisionName": "--border-action-low-orange-terre-battue",
             "themePath": ["border", "actionLow", "orangeTerreBattue", "default"],
             "optionThemePath": ["orangeTerreBattue", "_850_200", "default"]
         },
         {
+            "colorDecisionName": "--background-alt-raised-grey-hover",
             "themePath": ["background", "altRaised", "grey", "hover"],
             "optionThemePath": ["grey", "_975_100", "hover"]
         },
         {
+            "colorDecisionName": "--background-contrast-overlap-grey",
             "themePath": ["background", "contrastOverlap", "grey", "default"],
             "optionThemePath": ["grey", "_950_150", "default"]
         }