Parse breakpoint value

Author: garronej

package.json

@@ -76,6 +76,9 @@
         "tsafe": "^1.0.1"
     },
     "devDependencies": {
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
+        "@mui/material": "^5.10.7",
         "@types/css": "^0.0.33",
         "@types/node": "^18.7.18",
         "@types/react": "18.0.21",
@@ -93,7 +96,6 @@
         "react": "18.2.0",
         "rimraf": "^3.0.2",
         "ts-node": "^10.2.1",
-        "@mui/material": "^5.10.7",
         "typescript": "^4.8.3"
     }
 }

src/bin/css_to_ts/breakpoints.ts

@@ -0,0 +1,67 @@
+import css from "css";
+import { assert } from "tsafe/assert";
+
+export type BreakpointsValues = {
+    unit: string /* em, px ... */;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+
+export function parseBreakpointsValues(rawCssCode: string): BreakpointsValues {
+    const parsedCss = css.parse(rawCssCode);
+
+    let prevUnit: string | undefined = undefined;
+
+    const values: number[] = [];
+
+    parsedCss.stylesheet?.rules
+        .filter(rule => rule.type === "media")
+        .forEach(rule => {
+            const match = (rule as { media: string }).media.match(
+                /^\(min-width:\s*([0-9]+)([^)]+)\)$/
+            );
+
+            if (match === null) {
+                return;
+            }
+
+            const [, valueStr, unit] = match;
+
+            if (prevUnit === undefined) {
+                prevUnit = unit;
+            } else {
+                assert(prevUnit === unit);
+            }
+
+            values.push(parseFloat(valueStr));
+        });
+
+    assert(values.length === 4);
+    assert(prevUnit !== undefined);
+
+    const [sm, md, lg, xl] = values;
+
+    return {
+        "unit": prevUnit,
+        sm,
+        md,
+        lg,
+        xl
+    };
+}
+
+export function generateBreakpointsValuesTsCode(breakpointsValues: BreakpointsValues): string {
+    return [
+        `export const breakpointsValues = {`,
+        JSON.stringify(breakpointsValues, null, 2)
+            .replace(/^{\n/, "")
+            .replace(/\n}$/, "")
+            .split("\n")
+            .map(line => line.replace(/^[ ]{2}/, ""))
+            .map(line => `    ${line}`)
+            .join("\n"),
+        `} as const;`
+    ].join("\n");
+}

src/bin/css_to_ts/colorDecisions.ts

@@ -174,7 +174,7 @@ export function parseColorDecision(params: {
 
     const { declarations } = (() => {
         const node = parsedCss.stylesheet?.rules.find(
-            rule => rule.type === "rule" && (rule as any)?.selectors?.[0] === ":root"
+            rule => rule.type === "rule" && (rule as any).selectors?.[0] === ":root"
         );
 
         assert(node !== undefined);

src/bin/css_to_ts/colorOptions.ts

@@ -345,7 +345,7 @@ export function parseColorOptions(rawCssCode: string): ColorOption[] {
         const node = parsedCss.stylesheet?.rules.find(
             rule =>
                 rule.type === "rule" &&
-                (rule as any)?.selectors?.[0] === `:root:where([${data_fr_theme}="dark"])`
+                (rule as any).selectors?.[0] === `:root:where([${data_fr_theme}="dark"])`
         );
 
         assert(node !== undefined);

src/lib/mui.tsx

@@ -12,6 +12,19 @@ function createMuiDsfrThemeFromTheme(params: { theme: Theme }): MuiTheme {
 
     /*
 	const muiTheme = createMuiTheme({
+		"shape": {
+			"borderRadius": 0
+		},
+		"breakpoints": {
+			"unit": "em",
+			"values": { 
+				"xs": 0,  
+				"sm": number,
+				"md": number,
+				"lg": number,
+				"xl": number,
+			},
+		},
 		"typography": createMuiTypographyOptions({
 			typographyDesc,
 		}),
@@ -21,9 +34,6 @@ function createMuiDsfrThemeFromTheme(params: { theme: Theme }): MuiTheme {
 			useCases,
 		}),
 		spacing,
-		"breakpoints": {
-			"values": { "xs": 0, ...breakpointsValues },
-		},
 		"components": {
 			"MuiLink": {
 				"defaultProps": {

src/test/bin/breakpoints/generateBreakpointsValuesTsCode.ts

@@ -0,0 +1,28 @@
+import { generateBreakpointsValuesTsCode } from "../../../bin/css_to_ts/breakpoints";
+import type { BreakpointsValues } from "../../../bin/css_to_ts/breakpoints";
+import { assert } from "tsafe/assert";
+
+console.log(`Running test ${__filename}`);
+
+const input: BreakpointsValues = {
+    "unit": "em",
+    "sm": 36,
+    "md": 48,
+    "lg": 62,
+    "xl": 78
+};
+
+const expected = `
+export const breakpointsValues = {
+    "unit": "em",
+    "sm": 36,
+    "md": 48,
+    "lg": 62,
+    "xl": 78
+} as const;`.replace(/^\n/, "");
+
+const got = generateBreakpointsValuesTsCode(input);
+
+assert(got === expected);
+
+console.log("PASS");

src/test/bin/breakpoints/index.ts

@@ -0,0 +1,2 @@
+import "./parseBreakpointsValues";
+import "./generateBreakpointsValuesTsCode";

src/test/bin/breakpoints/parseBreakpointsValues.ts

@@ -0,0 +1,59 @@
+import { parseBreakpointsValues } from "../../../bin/css_to_ts/breakpoints";
+import type { BreakpointsValues } from "../../../bin/css_to_ts/breakpoints";
+import { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth/same";
+
+console.log(`Running test ${__filename}`);
+
+const input = `
+@media (min-width: 36em) {
+  /*! media sm */
+
+  /*! media sm */
+  .fr-hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 48em) {
+	/*! media md */
+
+	/*! media md */
+	h6 {
+	  font-size: 1.25rem;
+	  line-height: 1.75rem;
+	}
+}
+
+@media (min-width: 62em) {
+	/*! media lg */
+  
+	/*! media lg */
+	.fr-hidden-lg {
+	  display: none !important;
+	}
+}
+
+@media (min-width: 78em) {
+	/*! media xl */
+  
+	/*! media xl */
+	.fr-hidden-xl {
+	  display: none !important;
+	}
+}
+`;
+
+const expected: BreakpointsValues = {
+    "unit": "em",
+    "sm": 36,
+    "md": 48,
+    "lg": 62,
+    "xl": 78
+};
+
+const got = parseBreakpointsValues(input);
+
+assert(same(got, expected));
+
+console.log("PASS");

src/test/bin/main.ts

@@ -1,2 +1,3 @@
 import "./colorOptions";
 import "./colorDecisions";
+import "./breakpoints";