Export an API for perfoming media queries on breakpoints

Author: garronej

.gitignore

@@ -44,5 +44,5 @@ jspm_packages
 /.yarn_home
 /dsfr
 /dist_test
-/src/lib/useTheme/generated
+/src/lib/generatedFromCss/
 

package.json

@@ -73,7 +73,7 @@
     },
     "dependencies": {
         "@gouvfr/dsfr": "1.7.2",
-        "tsafe": "^1.0.1"
+        "tsafe": "^1.1.1"
     },
     "devDependencies": {
         "@emotion/react": "^11.10.4",

src/bin/css_to_ts/breakpoints.ts

@@ -1,5 +1,7 @@
 import css from "css";
 import { assert } from "tsafe/assert";
+import { objectKeys } from "tsafe/objectKeys";
+import { exclude } from "tsafe/exclude";
 
 export type BreakpointsValues = {
     unit: string /* em, px ... */;
@@ -41,7 +43,7 @@ export function parseBreakpointsValues(rawCssCode: string): BreakpointsValues {
     assert(values.length === 4);
     assert(prevUnit !== undefined);
 
-    const [sm, md, lg, xl] = values;
+    const [sm, md, lg, xl] = values.sort();
 
     return {
         "unit": prevUnit,
@@ -53,15 +55,42 @@ export function parseBreakpointsValues(rawCssCode: string): BreakpointsValues {
 }
 
 export function generateBreakpointsValuesTsCode(breakpointsValues: BreakpointsValues): string {
+    const sortedKeys = objectKeys(breakpointsValues)
+        .filter(exclude("unit"))
+        .sort((a, b) => breakpointsValues[a] - breakpointsValues[b]);
+
     return [
-        `export const breakpointsValues = {`,
-        JSON.stringify(breakpointsValues, null, 2)
+        `import { assert } from "tsafe/assert";`,
+        `import type { Extends } from "tsafe";`,
+        ``,
+        `export const breakpointValuesUnit = "em";`,
+        ``,
+        `export const breakpointKeys = ["xs", ${sortedKeys
+            .map(key => `"${key}"`)
+            .join(", ")}] as const;`,
+        ``,
+        `export type BreakpointKeys = typeof breakpointKeys[number];`,
+        ``,
+        `export const breakpointValues = {`,
+        JSON.stringify(
+            Object.fromEntries(
+                (["xs", ...sortedKeys] as const).map(key => [
+                    key,
+                    key === "xs" ? 0 : breakpointsValues[key]
+                ])
+            ),
+            null,
+            2
+        )
             .replace(/^{\n/, "")
             .replace(/\n}$/, "")
             .split("\n")
             .map(line => line.replace(/^[ ]{2}/, ""))
             .map(line => `    ${line}`)
             .join("\n"),
-        `} as const;`
+        `} as const;`,
+        ``,
+        `assert<Extends<typeof breakpointValues, Record<BreakpointKeys, number>>>();`,
+        ``
     ].join("\n");
 }

src/bin/css_to_ts/css_to_ts.ts

@@ -1,5 +1,6 @@
 import { generateGetColorOptionsTsCode, parseColorOptions } from "./colorOptions";
 import { generateGetColorDecisionsTsCode, parseColorDecision } from "./colorDecisions";
+import { parseBreakpointsValues, generateBreakpointsValuesTsCode } from "./breakpoints";
 import { getProjectRoot } from "../tools/getProjectRoot";
 import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename, relative as pathRelative } from "path";
@@ -8,7 +9,7 @@ const projectRoot = getProjectRoot();
 
 const rawCssCode = fs.readFileSync(pathJoin(projectRoot, "dsfr", "dsfr.css")).toString("utf8");
 
-const generatedDirPath = pathJoin(projectRoot, "src", "lib", "useTheme", "generated");
+const generatedDirPath = pathJoin(projectRoot, "src", "lib", "generatedFromCss");
 
 fs.mkdirSync(generatedDirPath, { "recursive": true });
 
@@ -63,3 +64,17 @@ fs.writeFileSync(
         "utf8"
     )
 );
+
+const targetBreakpointsValuesFilePath = pathJoin(generatedDirPath, "breakpoints.ts");
+
+fs.writeFileSync(
+    targetBreakpointsValuesFilePath,
+    Buffer.from(
+        [
+            warningMessage,
+            ``,
+            generateBreakpointsValuesTsCode(parseBreakpointsValues(rawCssCode))
+        ].join("\n"),
+        "utf8"
+    )
+);

src/lib/breakpoints.ts

@@ -0,0 +1,38 @@
+import type { BreakpointKeys } from "./generatedFromCss/breakpoints";
+import {
+    breakpointValues as values,
+    breakpointValuesUnit as unit,
+    breakpointKeys as keys
+} from "./generatedFromCss/breakpoints";
+
+export type { BreakpointKeys };
+
+const epsilon = 0.003125;
+
+export const breakpoints = {
+    "up": (key: BreakpointKeys) => `@media (min-width:${values[key]}${unit})`,
+    "down": (key: BreakpointKeys) => `@media (max-width:${values[key] - epsilon}${unit})`,
+    "between": (start: BreakpointKeys, end: BreakpointKeys) =>
+        [
+            `@media (min-width:${values[start]}${unit})`,
+            `(max-width:${values[end] - epsilon}${unit})`
+        ].join(" and "),
+    "only": (key: BreakpointKeys) =>
+        keys.indexOf(key) + 1 < keys.length
+            ? breakpoints.between(key, keys[keys.indexOf(key) + 1])
+            : breakpoints.up(key),
+    "not": (key: BreakpointKeys) => {
+        // handle first and last key separately, for better readability
+        const keyIndex = keys.indexOf(key);
+        if (keyIndex === 0) {
+            return breakpoints.up(keys[1]);
+        }
+        if (keyIndex === keys.length - 1) {
+            return breakpoints.down(keys[keyIndex]);
+        }
+
+        return breakpoints
+            .between(key, keys[keys.indexOf(key) + 1])
+            .replace("@media", "@media not all and");
+    }
+};

src/lib/index.ts

@@ -1,4 +1,5 @@
 export { $colorScheme, useIsDark } from "./useColorScheme";
+export * from "./breakpoints";
 export { useTheme } from "./useTheme";
 export type { Theme } from "./useTheme";
 export type { ColorScheme } from "./useColorScheme";

src/lib/useTheme/useTheme.ts renamed to src/lib/useTheme.ts

@@ -1,9 +1,9 @@
 import { useMemo } from "react";
-import { getColorOptions } from "./generated/getColorOptions";
-import type { ColorOptions } from "./generated/getColorOptions";
-import { getColorDecisions } from "./generated/getColorDecisions";
-import type { ColorDecisions } from "./generated/getColorDecisions";
-import { useIsDark } from "../useColorScheme";
+import { getColorOptions } from "./generatedFromCss/getColorOptions";
+import type { ColorOptions } from "./generatedFromCss/getColorOptions";
+import { getColorDecisions } from "./generatedFromCss/getColorDecisions";
+import type { ColorDecisions } from "./generatedFromCss/getColorDecisions";
+import { useIsDark } from "./useColorScheme";
 
 export type Theme = {
     isDark: boolean;

src/lib/useTheme/index.ts

@@ -13,16 +13,31 @@ const input: BreakpointsValues = {
 };
 
 const expected = `
-export const breakpointsValues = {
-    "unit": "em",
+import { assert } from "tsafe/assert";
+import type { Extends } from "tsafe";
+
+export const breakpointValuesUnit = "em";
+
+export const breakpointKeys = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export type BreakpointKeys = typeof breakpointKeys[number];
+
+export const breakpointValues = {
+    "xs": 0,
     "sm": 36,
     "md": 48,
     "lg": 62,
     "xl": 78
-} as const;`.replace(/^\n/, "");
+} as const;
+
+assert<Extends<typeof breakpointValues, Record<BreakpointKeys, number>>>();
+`.replace(/^\n/, "");
 
 const got = generateBreakpointsValuesTsCode(input);
 
+console.log(JSON.stringify(got));
+console.log(JSON.stringify(expected));
+
 assert(got === expected);
 
 console.log("PASS");

src/test/bin/breakpoints/generateBreakpointsValuesTsCode.ts

@@ -25,20 +25,20 @@ const input = `
 	}
 }
 
-@media (min-width: 62em) {
-	/*! media lg */
+@media (min-width: 78em) {
+	/*! media xl */
   
-	/*! media lg */
-	.fr-hidden-lg {
+	/*! media xl */
+	.fr-hidden-xl {
 	  display: none !important;
 	}
 }
 
-@media (min-width: 78em) {
-	/*! media xl */
+@media (min-width: 62em) {
+	/*! media lg */
   
-	/*! media xl */
-	.fr-hidden-xl {
+	/*! media lg */
+	.fr-hidden-lg {
 	  display: none !important;
 	}
 }