Complete typograpy parser

Author: garronej

src/bin/css_to_ts/cssVariable.ts

@@ -5,6 +5,8 @@ import type { Equals } from "tsafe";
 import { exclude } from "tsafe/exclude";
 import memoize from "memoizee";
 import type { ColorScheme } from "./colorOptions";
+import { objectKeys } from "tsafe/objectKeys";
+import { same } from "evt/tools/inDepth/same";
 
 const orderedColorScheme = ["light", "dark"] as const;
 
@@ -101,3 +103,27 @@ export const createGetCssVariable = memoize((rawCssCode: string) => {
 
     return { getCssVariable };
 });
+
+export function isInvariantAcrossTheme(cssVariableValue: CssVariableValue): boolean {
+    for (const breakpoint of objectKeys(cssVariableValue)) {
+        const { light, dark } = cssVariableValue[breakpoint];
+
+        if (light !== dark) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export function isInvariantAcrossScreenSizes(cssVariableValue: CssVariableValue): boolean {
+    const lightAndDark = cssVariableValue["root"];
+
+    for (const breakpoint of objectKeys(cssVariableValue).filter(exclude("root"))) {
+        if (!same(lightAndDark, cssVariableValue[breakpoint])) {
+            return false;
+        }
+    }
+
+    return true;
+}

src/bin/css_to_ts/typography.ts

@@ -1,6 +1,12 @@
 import { getRulesByBreakpoint, parseBreakpointsValues } from "./breakpoints";
-import { createGetCssVariable } from "./cssVariable";
+import {
+    createGetCssVariable,
+    isInvariantAcrossScreenSizes,
+    isInvariantAcrossTheme
+} from "./cssVariable";
 import { objectKeys } from "tsafe/objectKeys";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
 
 // Object that represent a set of CSS rules, see https://www.npmjs.com/package/csstype
 // It's the argument of the `css()` function of @emotion/css.
@@ -20,8 +26,6 @@ export function parseTypographyVariants(rawCssCode: string): TypographyVariant[]
 
     const { getCssVariable } = createGetCssVariable(rawCssCode);
 
-    console.log("TODO use", getCssVariable);
-
     objectKeys(rulesByBreakpoint).forEach(breakpoint => {
         const mediaQuery = breakpoint === "root" ? undefined : mediaQueryByBreakpoint[breakpoint];
 
@@ -34,7 +38,39 @@ export function parseTypographyVariants(rawCssCode: string): TypographyVariant[]
 
             const style: CSSObject = {};
 
-            //TODO: fill up style
+            rule.declarations.forEach(
+                declaration =>
+                    (style[(declaration as any).property] = (() => {
+                        const value = declaration.value as string;
+
+                        int: {
+                            const n = parseInt(value);
+
+                            if (isNaN(n)) {
+                                break int;
+                            }
+
+                            return n;
+                        }
+
+                        return value.replace(/var\((--[^)]+)\)/g, (...[, cssVariableName]) => {
+                            assert(is<`--${string}`>(cssVariableName));
+
+                            const cssVariableValue = getCssVariable(cssVariableName);
+
+                            assert(
+                                isInvariantAcrossTheme(cssVariableValue),
+                                "CSS variable for TypoGraphy that depends on the theme have been introduce, the alg need to be made a bit more sophisticated."
+                            );
+                            assert(
+                                isInvariantAcrossScreenSizes(cssVariableValue),
+                                "CSS variable for TypoGraphy that depends on screen width have been introduce, the alg need to be made a bit more sophisticated."
+                            );
+
+                            return cssVariableValue.root.light;
+                        });
+                    })())
+            );
 
             matchedSelectors.forEach(selector => {
                 const typographyVariant = typographyVariants.find(

src/test/bin/cssVariable.test.ts

@@ -1,4 +1,8 @@
-import { createGetCssVariable } from "../../bin/css_to_ts/cssVariable";
+import {
+    createGetCssVariable,
+    isInvariantAcrossTheme,
+    isInvariantAcrossScreenSizes
+} 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";
@@ -59,6 +63,9 @@ const { getCssVariable } = createGetCssVariable(rawCssCode);
         }
     };
 
+    assert(isInvariantAcrossScreenSizes(expected));
+    assert(isInvariantAcrossTheme(expected));
+
     const got = getCssVariable("--my-var");
 
     assert(same(got, expected));
@@ -88,6 +95,9 @@ const { getCssVariable } = createGetCssVariable(rawCssCode);
         }
     };
 
+    assert(isInvariantAcrossScreenSizes(expected));
+    assert(!isInvariantAcrossTheme(expected));
+
     const got = getCssVariable("--my-var-2");
 
     assert(same(got, expected));
@@ -117,6 +127,9 @@ const { getCssVariable } = createGetCssVariable(rawCssCode);
         }
     };
 
+    assert(!isInvariantAcrossScreenSizes(expected));
+    assert(isInvariantAcrossTheme(expected));
+
     const got = getCssVariable("--my-var-3");
 
     assert(same(got, expected));
@@ -146,6 +159,9 @@ const { getCssVariable } = createGetCssVariable(rawCssCode);
         }
     };
 
+    assert(!isInvariantAcrossScreenSizes(expected));
+    assert(!isInvariantAcrossTheme(expected));
+
     const got = getCssVariable("--my-var-4");
 
     assert(same(got, expected));

src/test/bin/main.ts

@@ -1,4 +1,5 @@
 import "./breakpoints";
 import "./colorDecisions";
 import "./colorOptions";
-//import "./typography";
+import "./cssVariable.test";
+import "./typography";

src/test/bin/typography/index.ts

@@ -1,2 +1,2 @@
-import "./parseTypographyVariants.test.ts";
-import "./generateTypographyTsCode.test.ts.disabled";
+import "./generateTypographyTsCode.test";
+import "./parseTypographyVariants.test";

src/test/bin/typography/parseTypographyVariants.test.ts

@@ -347,6 +347,14 @@ sup {
   }
 
 }
+
+@media (min-width: 36em) { }
+
+
+@media (min-width: 78em) { }
+
+@media (min-width: 62em) { }
+
 `;
 
 const got = parseTypographyVariants(rawCssCode);