Make all test passes but typography

garronej · garronej · commit 05986a2a0ff4 · 2022-10-24T23:29:03.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,9 @@ jspm_packages
 /dist_test
 /src/lib/generatedFromCss/
 
+
+# tmp!
+/typo.css
+/typography.ts
+/view.json
+
diff --git a/src/bin/css_to_ts/colorOptions.ts b/src/bin/css_to_ts/colorOptions.ts
@@ -7,6 +7,7 @@ import { multiReplace } from "../tools/multiReplace";
 import { createGetCssVariable } from "./cssVariable";
 import memoize from "memoizee";
 import * as crypto from "crypto";
+import { cssColorRegexp } from "../tools/cssColorRegexp";
 
 export type ColorScheme = "light" | "dark";
 
@@ -344,26 +345,17 @@ export const parseColorOptions = memoize((rawCssCode: string): ColorOption[] =>
         return { declarations };
     })();
 
-    const htmlColorRegexp = /^#[0-9a-f]{3,6}$/;
-
     return declarations
+        .filter(({ value }: any) => cssColorRegexp.test(value))
         .map(({ property }: any) => {
-            console.log({ property });
-
             const cssVariableValue = getCssVariable(property);
 
-            console.log({ cssVariableValue });
-
             const colorLight = cssVariableValue.root.light;
 
-            if (!htmlColorRegexp.test(colorLight)) {
-                return undefined;
-            }
-
             const colorDark = cssVariableValue.root.dark;
 
             assert(typeof colorDark === "string");
-            assert(htmlColorRegexp.test(colorDark), `${colorDark} doesn't seem to be a color`);
+            assert(cssColorRegexp.test(colorDark), `${colorDark} doesn't seem to be a color`);
 
             const parsedName = parseColorOptionName(property);
 
diff --git a/src/bin/css_to_ts/cssVariable.ts b/src/bin/css_to_ts/cssVariable.ts
@@ -4,6 +4,11 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { exclude } from "tsafe/exclude";
 import memoize from "memoizee";
+import type { ColorScheme } from "./colorOptions";
+
+const orderedColorScheme = ["light", "dark"] as const;
+
+assert<Equals<typeof orderedColorScheme[number], ColorScheme>>();
 
 export type CssVariableValue = Record<
     "root" | keyof MediaQueryByBreakpoint,
@@ -28,7 +33,7 @@ export const createGetCssVariable = memoize((rawCssCode: string) => {
         orderedBreakpoints.forEach(breakpoint => {
             const rules = rulesByBreakpoint[breakpoint];
 
-            (["light", "dark"] as const).forEach(colorScheme => {
+            orderedColorScheme.forEach(colorScheme => {
                 const [declaration] = rules
                     .filter(
                         (rule: any) =>
@@ -60,8 +65,6 @@ export const createGetCssVariable = memoize((rawCssCode: string) => {
                     );
                 }
 
-                //TODO: Fix! It's more complex than that!
-
                 const value = declaration?.value as string | undefined;
 
                 if (value === undefined) {
@@ -70,10 +73,26 @@ export const createGetCssVariable = memoize((rawCssCode: string) => {
 
                 const match = value.match(/^var\((--[^)]+)\)$/);
 
-                cssVariableValue[breakpoint][colorScheme] =
-                    match === null
-                        ? value
-                        : getCssVariable(match[1] as any)[breakpoint][colorScheme];
+                for (
+                    let i = orderedBreakpoints.indexOf(breakpoint);
+                    i < orderedBreakpoints.length;
+                    i++
+                ) {
+                    const breakpoint = orderedBreakpoints[i];
+
+                    for (
+                        let j = orderedColorScheme.indexOf(colorScheme);
+                        j < orderedColorScheme.length;
+                        j++
+                    ) {
+                        const colorScheme = orderedColorScheme[j];
+
+                        (cssVariableValue[breakpoint] ??= {} as any)[colorScheme] =
+                            match === null
+                                ? value
+                                : getCssVariable(match[1] as any)[breakpoint][colorScheme];
+                    }
+                }
             });
         });
 
diff --git a/src/bin/tools/cssColorRegexp.ts b/src/bin/tools/cssColorRegexp.ts
@@ -0,0 +1,2 @@
+export const cssColorRegexp =
+    /(#(?:[0-9a-fA-F]{2}){2,4}$|(#[0-9a-fA-F]{3}$)|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\)$|black$|silver$|gray$|whitesmoke$|maroon$|red$|purple$|fuchsia$|green$|lime$|olivedrab$|yellow$|navy$|blue$|teal$|aquamarine$|orange$|aliceblue$|antiquewhite$|aqua$|azure$|beige$|bisque$|blanchedalmond$|blueviolet$|brown$|burlywood$|cadetblue$|chartreuse$|chocolate$|coral$|cornflowerblue$|cornsilk$|crimson$|darkblue$|darkcyan$|darkgoldenrod$|darkgray$|darkgreen$|darkgrey$|darkkhaki$|darkmagenta$|darkolivegreen$|darkorange$|darkorchid$|darkred$|darksalmon$|darkseagreen$|darkslateblue$|darkslategray$|darkslategrey$|darkturquoise$|darkviolet$|deeppink$|deepskyblue$|dimgray$|dimgrey$|dodgerblue$|firebrick$|floralwhite$|forestgreen$|gainsboro$|ghostwhite$|goldenrod$|gold$|greenyellow$|grey$|honeydew$|hotpink$|indianred$|indigo$|ivory$|khaki$|lavenderblush$|lavender$|lawngreen$|lemonchiffon$|lightblue$|lightcoral$|lightcyan$|lightgoldenrodyellow$|lightgray$|lightgreen$|lightgrey$|lightpink$|lightsalmon$|lightseagreen$|lightskyblue$|lightslategray$|lightslategrey$|lightsteelblue$|lightyellow$|limegreen$|linen$|mediumaquamarine$|mediumblue$|mediumorchid$|mediumpurple$|mediumseagreen$|mediumslateblue$|mediumspringgreen$|mediumturquoise$|mediumvioletred$|midnightblue$|mintcream$|mistyrose$|moccasin$|navajowhite$|oldlace$|olive$|orangered$|orchid$|palegoldenrod$|palegreen$|paleturquoise$|palevioletred$|papayawhip$|peachpuff$|peru$|pink$|plum$|powderblue$|rosybrown$|royalblue$|saddlebrown$|salmon$|sandybrown$|seagreen$|seashell$|sienna$|skyblue$|slateblue$|slategray$|slategrey$|snow$|springgreen$|steelblue$|tan$|thistle$|tomato$|transparent$|turquoise$|violet$|wheat$|white$|yellowgreen$|rebeccapurple$)/i;
diff --git a/src/test/bin/breakpoints/generateBreakpointsTsCode.ts b/src/test/bin/breakpoints/generateBreakpointsTsCode.ts
@@ -65,9 +65,6 @@ assert<Extends<typeof breakpointValues, Record<BreakpointKeys, number>>>();
 
 const got = generateBreakpointsTsCode(input);
 
-console.log(JSON.stringify(got));
-console.log(JSON.stringify(expected));
-
 assert(got === expected);
 
 console.log("PASS");
diff --git a/src/test/bin/colorDecisions/generateGetColorDecisionsTsCode.test.ts b/src/test/bin/colorDecisions/generateGetColorDecisionsTsCode.test.ts
@@ -5,11 +5,11 @@ console.log(`Running test ${__filename}`);
 
 const input = `
 :root {
-  --grey-1000-50-hover: #FFFFFF;
-  --grey-1000-50: #FFFFFF;
-  --orange-terre-battue-850-200: #FFFFFF;
-  --grey-975-100-hover: #FFFFFF;
-  --grey-950-150: #FFFFFF;
+  --grey-1000-50-hover: #ffffff;
+  --grey-1000-50: #ffffff;
+  --orange-terre-battue-850-200: #ffffff;
+  --grey-975-100-hover: #ffffff;
+  --grey-950-150: #ffffff;
 
   --background-default-grey-hover: var(--grey-1000-50-hover);
   --background-default-grey: var(--grey-1000-50);
@@ -75,6 +75,6 @@ export function getColorDecisions(
 
 const got = generateGetColorDecisionsTsCode(input);
 
-assert(got === expected, "xxxx::");
+assert(got === expected);
 
 console.log("PASS");
diff --git a/src/test/bin/colorDecisions/parseColorDecision.test.ts b/src/test/bin/colorDecisions/parseColorDecision.test.ts
@@ -7,11 +7,11 @@ console.log(`Running test ${__filename}`);
 
 const rawCssCode = `
 :root {
-  --grey-1000-50-hover: #FFFFFF;
-  --grey-1000-50: #FFFFFF;
-  --orange-terre-battue-850-200: #FFFFFF;
-  --grey-975-100-hover: #FFFFFF;
-  --grey-950-150: #FFFFFF;
+  --grey-1000-50-hover: #ffffff;
+  --grey-1000-50: #ffffff;
+  --orange-terre-battue-850-200: #ffffff;
+  --grey-975-100-hover: #ffffff;
+  --grey-950-150: #ffffff;
 
   --background-default-grey-hover: var(--grey-1000-50-hover);
   --background-default-grey: var(--grey-1000-50);
diff --git a/src/test/bin/colorDecisions/parseColorDecisionName.test.ts b/src/test/bin/colorDecisions/parseColorDecisionName.test.ts
@@ -7,12 +7,12 @@ console.log(`Running test ${__filename}`);
 
 const rawCssCode = `
 :root {
-  --grey-1000-50-hover: #FFFFFF;
-  --grey-1000-50: #FFFFFF;
-  --orange-terre-battue-850-200: #FFFFFF;
-  --grey-975-100-hover: #FFFFFF;
-  --grey-950-150: #FFFFFF;
-  --blue-france-sun-113-625: #FFFFFF;
+  --grey-1000-50-hover: #ffffff;
+  --grey-1000-50: #ffffff;
+  --orange-terre-battue-850-200: #ffffff;
+  --grey-975-100-hover: #ffffff;
+  --grey-950-150: #ffffff;
+  --blue-france-sun-113-625: #ffffff;
 
   --background-default-grey-hover: var(--grey-1000-50-hover);
   --background-default-grey: var(--grey-1000-50);
@@ -38,12 +38,8 @@ const rawCssCode = `
 @media (min-width: 62em) { }
 `;
 
-console.log("before");
-
 const { parseColorDecisionName } = createParseColorDecisionName(rawCssCode);
 
-console.log("after");
-
 {
     const expected: ParsedColorDecisionName = {
         "context": "background",
diff --git a/src/test/bin/colorOptions/generateGetColorOptionsTsCode.test.ts b/src/test/bin/colorOptions/generateGetColorOptionsTsCode.test.ts
@@ -48,6 +48,11 @@ const input = `
   --name1-name2-sun-111-hover: #000003;
   --blue-france-main-525: #00000f;
 }
+
+@media (min-width: 36em) { }
+@media (min-width: 48em) { }
+@media (min-width: 78em) { }
+@media (min-width: 62em) { }
 `;
 
 const expected = `
diff --git a/src/test/bin/colorOptions/parseColorOptions.test.ts b/src/test/bin/colorOptions/parseColorOptions.test.ts
@@ -50,6 +50,11 @@ const rawCssCode = `
   --name1-name2-sun-111-hover: #000003;
   --blue-france-main-525: #00000f;
 }
+
+@media (min-width: 36em) { }
+@media (min-width: 48em) { }
+@media (min-width: 78em) { }
+@media (min-width: 62em) { }
 `;
 
 const got = parseColorOptions(rawCssCode);
diff --git a/src/test/bin/cssVariable.test.ts b/src/test/bin/cssVariable.test.ts
@@ -0,0 +1,152 @@
+import { createGetCssVariable } from "../../bin/css_to_ts/cssVariable";
+import type { CssVariableValue } from "../../bin/css_to_ts/cssVariable";
+import { same } from "evt/tools/inDepth";
+import { assert } from "tsafe/assert";
+
+const rawCssCode = `
+:root {
+	--my-var: #ffffff;
+	--my-var-2: #ffffff;
+	--my-var-3: #ffffff;
+	--my-var-4: #ffffff;
+}
+
+:root:where([data-fr-theme="dark"]) {
+	--my-var-2: #000000;
+}
+
+
+@media (min-width: 36em) { }
+
+@media (min-width: 48em) { 
+
+    :root:where([data-fr-theme="dark"]) {
+        --my-var-4: #000000;
+    }
+
+}
+
+@media (min-width: 78em) { 
+	--my-var-3: #000001;
+}
+
+@media (min-width: 62em) { }
+`;
+
+const { getCssVariable } = createGetCssVariable(rawCssCode);
+
+{
+    const expected: CssVariableValue = {
+        "root": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "sm": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "md": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "lg": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "xl": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        }
+    };
+
+    const got = getCssVariable("--my-var");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: CssVariableValue = {
+        "root": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "sm": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "md": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "lg": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "xl": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        }
+    };
+
+    const got = getCssVariable("--my-var-2");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: CssVariableValue = {
+        "root": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "sm": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "md": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "lg": {
+            "light": "#000001",
+            "dark": "#000001"
+        },
+        "xl": {
+            "light": "#000001",
+            "dark": "#000001"
+        }
+    };
+
+    const got = getCssVariable("--my-var-3");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: CssVariableValue = {
+        "root": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "sm": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+        },
+        "md": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "lg": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        },
+        "xl": {
+            "light": "#ffffff",
+            "dark": "#000000"
+        }
+    };
+
+    const got = getCssVariable("--my-var-4");
+
+    assert(same(got, expected));
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const cssColorRegexp =`
	`2`	+ /(#(?:[0-9a-fA-F]{2}){2,4}$\|(#[0-9a-fA-F]{3}$)\|(rgb\|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\)$\|black$\|silver$\|gray$\|whitesmoke$\|maroon$\|red$\|purple$\|fuchsia$\|green$\|lime$\|olivedrab$\|yellow$\|navy$\|blue$\|teal$\|aquamarine$\|orange$\|aliceblue$\|antiquewhite$\|aqua$\|azure$\|beige$\|bisque$\|blanchedalmond$\|blueviolet$\|brown$\|burlywood$\|cadetblue$\|chartreuse$\|chocolate$\|coral$\|cornflowerblue$\|cornsilk$\|crimson$\|darkblue$\|darkcyan$\|darkgoldenrod$\|darkgray$\|darkgreen$\|darkgrey$\|darkkhaki$\|darkmagenta$\|darkolivegreen$\|darkorange$\|darkorchid$\|darkred$\|darksalmon$\|darkseagreen$\|darkslateblue$\|darkslategray$\|darkslategrey$\|darkturquoise$\|darkviolet$\|deeppink$\|deepskyblue$\|dimgray$\|dimgrey$\|dodgerblue$\|firebrick$\|floralwhite$\|forestgreen$\|gainsboro$\|ghostwhite$\|goldenrod$\|gold$\|greenyellow$\|grey$\|honeydew$\|hotpink$\|indianred$\|indigo$\|ivory$\|khaki$\|lavenderblush$\|lavender$\|lawngreen$\|lemonchiffon$\|lightblue$\|lightcoral$\|lightcyan$\|lightgoldenrodyellow$\|lightgray$\|lightgreen$\|lightgrey$\|lightpink$\|lightsalmon$\|lightseagreen$\|lightskyblue$\|lightslategray$\|lightslategrey$\|lightsteelblue$\|lightyellow$\|limegreen$\|linen$\|mediumaquamarine$\|mediumblue$\|mediumorchid$\|mediumpurple$\|mediumseagreen$\|mediumslateblue$\|mediumspringgreen$\|mediumturquoise$\|mediumvioletred$\|midnightblue$\|mintcream$\|mistyrose$\|moccasin$\|navajowhite$\|oldlace$\|olive$\|orangered$\|orchid$\|palegoldenrod$\|palegreen$\|paleturquoise$\|palevioletred$\|papayawhip$\|peachpuff$\|peru$\|pink$\|plum$\|powderblue$\|rosybrown$\|royalblue$\|saddlebrown$\|salmon$\|sandybrown$\|seagreen$\|seashell$\|sienna$\|skyblue$\|slateblue$\|slategray$\|slategrey$\|snow$\|springgreen$\|steelblue$\|tan$\|thistle$\|tomato$\|transparent$\|turquoise$\|violet$\|wheat$\|white$\|yellowgreen$\|rebeccapurple$)/i;