parseColorDecision

Author: garronej

src/bin/css_to_ts/colorDecisions.ts

@@ -3,6 +3,10 @@ import { states } from "./colorOptions";
 import { id } from "tsafe/id";
 import { assert } from "tsafe/assert";
 import { capitalize } from "tsafe/capitalize";
+import css from "css";
+import { exclude } from "tsafe/exclude";
+import { is } from "tsafe/is";
+import { parseColorOptionName, getThemePath as getColorOptionThemePath } from "./colorOptions";
 
 const contexts = ["background", "text", "border", "artwork"] as const;
 
@@ -31,26 +35,26 @@ export function createParseColorDecisionName(params: {
 
     function parseColorDecisionName(colorDecisionName: `--${string}`): ParsedColorDecisionName {
         /*
-		colorDecisionName: 
-		--background-default-grey-hover
-		--background-default-grey
-		--border-action-low-orange-terre-battue
-		--background-alt-raised-grey-hover
-		--background-contrast-overlap-grey
-		*/
+        colorDecisionName: 
+        --background-default-grey-hover
+        --background-default-grey
+        --border-action-low-orange-terre-battue
+        --background-alt-raised-grey-hover
+        --background-contrast-overlap-grey
+        */
 
         const parsedColorDecisionName: ParsedColorDecisionName = {} as any;
 
         let arr = colorDecisionName.replace(/^--/, "").split("-");
 
         /*
-		arr: 
-		[ "background", "default", "grey", "hover" ]
-		[ "background", "default", "grey" ]
-		[ "border", "action-low", "orange", "terre", "battue"]
-		[ "background", "alt", "raised", "grey", "hover" ]
-		[ "background", "contrast-overlap", "grey" ]
-		*/
+        arr: 
+        [ "background", "default", "grey", "hover" ]
+        [ "background", "default", "grey" ]
+        [ "border", "action-low", "orange", "terre", "battue"]
+        [ "background", "alt", "raised", "grey", "hover" ]
+        [ "background", "contrast-overlap", "grey" ]
+        */
 
         //parse context
         {
@@ -144,3 +148,67 @@ export function getThemePath(parsedColorDecisionName: ParsedColorDecisionName) {
         parsedColorDecisionName.state ?? "default"
     ];
 }
+
+export type ColorDecision = {
+    themePath: string[];
+    optionThemePath: string[];
+};
+
+export function createParseColorDecision(params: {
+    /** Like [ "grey", "blueFrance", ... ]
+     * All the the color name in camel case that we deduce from Options
+     * it help parsing without making assumption on what is a valid Usage
+     */
+    colorNames: string[];
+    /** ["--grey-1000-50-hover", "--grey-1000-50", ... ] */
+    colorOptionNames: `--${string}`[];
+}) {
+    const { colorNames, colorOptionNames } = params;
+
+    const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
+
+    function parseColorDecision(rawCssCode: string): ColorDecision[] {
+        const parsedCss = css.parse(rawCssCode);
+
+        const { declarations } = (() => {
+            const node = parsedCss.stylesheet?.rules.find(
+                rule => rule.type === "rule" && (rule as any)?.selectors?.[0] === ":root"
+            );
+
+            assert(node !== undefined);
+
+            const { declarations } = node as any;
+
+            return { declarations };
+        })();
+
+        return declarations
+            .map(({ property, value }: { property: string; value: string }) => {
+                const mathArray = value.match(/^var\((--[^)]+)\)$/);
+
+                if (mathArray === null) {
+                    return undefined;
+                }
+
+                const colorOptionName = mathArray[1];
+
+                assert(is<`--${string}`>(colorOptionName));
+
+                if (!id<string[]>(colorOptionNames).includes(colorOptionName)) {
+                    return undefined;
+                }
+
+                assert(is<`--${string}`>(property));
+
+                return {
+                    "themePath": getThemePath(parseColorDecisionName(property)),
+                    "optionThemePath": getColorOptionThemePath(
+                        parseColorOptionName(colorOptionName)
+                    )
+                };
+            })
+            .filter(exclude(undefined));
+    }
+
+    return { parseColorDecision };
+}

src/bin/css_to_ts/colorOptions.ts

@@ -46,7 +46,6 @@ export declare namespace ParsedColorOptionName {
     };
 }
 
-/** Exported only for tests */
 export function parseColorOptionName(colorOptionName: `--${string}`): ParsedColorOptionName {
     const parsedColorOptionName: ParsedColorOptionName.Variadic = {
         "colorName": "",

src/test/bin/colorDecisions/index.ts

@@ -1 +1,2 @@
 import "./parseColorDecisionName.test";
+import "./parseColorDecision.test";

src/test/bin/colorDecisions/parseColorDecision.test.ts

@@ -0,0 +1,56 @@
+import { createParseColorDecision } from "../../../bin/css_to_ts/colorDecisions";
+import type { ColorDecision } from "../../../bin/css_to_ts/colorDecisions";
+import { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth/same";
+
+console.log(`Running test ${__filename}`);
+
+const { parseColorDecision } = createParseColorDecision({
+    "colorNames": ["grey", "orangeTerreBattue"],
+    "colorOptionNames": [
+        "--grey-1000-50-hover",
+        "--grey-1000-50",
+        "--orange-terre-battue-850-200",
+        "--grey-975-100-hover",
+        "--grey-950-150"
+    ]
+});
+
+const rawCssCode = `
+:root {
+  --background-default-grey-hover: var(--grey-1000-50-hover);
+  --background-default-grey: var(--grey-1000-50);
+  --border-action-low-orange-terre-battue: var(--orange-terre-battue-850-200);
+  --background-alt-raised-grey-hover: var(--grey-975-100-hover);
+  --background-contrast-overlap-grey: var(--grey-950-150);
+}
+`;
+
+const got = parseColorDecision(rawCssCode);
+
+const expected: ColorDecision[] = [
+    {
+        "themePath": ["background", "default", "normal", "grey", "hover"],
+        "optionThemePath": ["grey", "_1000_50", "hover"]
+    },
+    {
+        "themePath": ["background", "default", "normal", "grey", "default"],
+        "optionThemePath": ["grey", "_1000_50", "default"]
+    },
+    {
+        "themePath": ["border", "action", "low", "orangeTerreBattue", "default"],
+        "optionThemePath": ["orangeTerreBattue", "_850_200", "default"]
+    },
+    {
+        "themePath": ["background", "altRaised", "normal", "grey", "hover"],
+        "optionThemePath": ["grey", "_975_100", "hover"]
+    },
+    {
+        "themePath": ["background", "contrastOverlap", "normal", "grey", "default"],
+        "optionThemePath": ["grey", "_950_150", "default"]
+    }
+];
+
+assert(same(got, expected));
+
+console.log("PASS");