Feature useBreakpointsValues

Author: garronej

package.json

@@ -129,6 +129,7 @@
         "./next-pagesdir": "./dist/next-pagesdir.js",
         "./useIsDark": "./dist/useIsDark/index.js",
         "./useColors": "./dist/useColors.js",
+        "./useBreakpointsValues": "./dist/useBreakpointsValues.js",
         "./mui": "./dist/mui.js",
         "./tss": "./dist/tss.js",
         "./tools/cx": "./dist/tools/cx.js",

src/fr/breakpoints.ts

@@ -1,13 +1,17 @@
 import type { BreakpointKeys } from "./generatedFromCss/breakpoints";
 import {
-    breakpointValues as values,
-    breakpointValuesUnit as unit,
+    BreakpointsValues as values,
+    BreakpointsValuesUnit as unit,
     breakpointKeys as keys
 } from "./generatedFromCss/breakpoints";
-import { assert } from "tsafe/assert";
+import { type Equals, assert } from "tsafe/assert";
+import { getBaseFontSizePx } from "../tools/getBaseFontSizePx";
 
 export type { BreakpointKeys };
 
+/** Breakpoint values in px */
+export type BreakpointsValues = Record<BreakpointKeys, number>;
+
 const epsilon = 0.003125;
 
 export const breakpoints = {
@@ -38,5 +42,22 @@ export const breakpoints = {
         return breakpoints
             .between(key, keys[keys.indexOf(key) + 1])
             .replace("@media", "@media not all and");
+    },
+    /**
+     * Returns the breakpoint values in px.
+     *
+     * Warning: It reflects the values at a given time, if the root font size changes so will the breakpointsValues.
+     * Plus this function is rather expensive to call.
+     * If you're in react you should use the
+     * import { useBreakpointsValues } from "@codegouvfr/react-dsfr/useBreakpointsValues";
+     */
+    "getBreakpointsValues": (): BreakpointsValues => {
+        assert<Equals<typeof unit, "em">>();
+
+        const factor = getBaseFontSizePx();
+
+        return Object.fromEntries(
+            Object.entries(values).map(([key, value]) => [key, value * factor])
+        ) as any;
     }
 };

src/mui.tsx

@@ -2,7 +2,6 @@
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React, { useMemo, type ReactNode } from "react";
-import { breakpointValues } from "./fr/generatedFromCss/breakpoints";
 import type { Theme as MuiTheme, ThemeOptions } from "@mui/material/styles";
 import { createTheme, ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import type { Shadows } from "@mui/material/styles";
@@ -14,9 +13,13 @@ import { spacingTokenByValue } from "./fr/generatedFromCss/spacing";
 import { assert } from "tsafe/assert";
 import { objectKeys } from "tsafe/objectKeys";
 import { id } from "tsafe/id";
+import { useBreakpointsValues, type BreakpointsValues } from "./useBreakpointsValues";
 
-export function getMuiDsfrThemeOptions(params: { isDark: boolean }): ThemeOptions {
-    const { isDark } = params;
+export function getMuiDsfrThemeOptions(params: {
+    isDark: boolean;
+    breakpointsValues: BreakpointsValues;
+}): ThemeOptions {
+    const { isDark, breakpointsValues } = params;
 
     const { options, decisions } = getColors(isDark);
 
@@ -25,11 +28,9 @@ export function getMuiDsfrThemeOptions(params: { isDark: boolean }): ThemeOption
             "borderRadius": 0
         },
         "breakpoints": {
-            //"unit": breakpointValuesUnit,
+            //NOTE: We would use "unit": breakpointsValuesUnit but only "px" works.
             "unit": "px",
-            "values": Object.fromEntries(
-                Object.entries(breakpointValues).map(([key, value]) => [key, value * 16])
-            ) as any
+            "values": breakpointsValues
         },
         "palette": {
             "mode": isDark ? "dark" : "light",
@@ -244,7 +245,10 @@ export function getMuiDsfrThemeOptions(params: { isDark: boolean }): ThemeOption
  *
  * @returns — A complete, ready-to-use mui theme object.
  */
-export function createMuiDsfrTheme(params: { isDark: boolean }, ...args: object[]): MuiTheme {
+export function createMuiDsfrTheme(
+    params: { isDark: boolean; breakpointsValues: BreakpointsValues },
+    ...args: object[]
+): MuiTheme {
     const muiTheme = createTheme(getMuiDsfrThemeOptions(params), ...args);
 
     return muiTheme;
@@ -273,8 +277,10 @@ export function createMuiDsfrThemeProvider(params: {
 
         const { isDark } = useIsDark_props();
 
+        const { breakpointsValues } = useBreakpointsValues();
+
         const theme = useMemo(() => {
-            const nonAugmentedMuiTheme = createMuiDsfrTheme({ isDark });
+            const nonAugmentedMuiTheme = createMuiDsfrTheme({ isDark, breakpointsValues });
 
             return augmentMuiTheme === undefined
                 ? nonAugmentedMuiTheme

src/scripts/build/cssToTs/breakpoints.ts

@@ -143,15 +143,15 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
         `import { assert } from "tsafe/assert";`,
         `import type { Extends } from "tsafe";`,
         ``,
-        `export const breakpointValuesUnit = "em";`,
+        `export const BreakpointsValuesUnit = "em";`,
         ``,
         `export const breakpointKeys = ["xs", ${sortedKeys
             .map(key => `"${key}"`)
             .join(", ")}] as const;`,
         ``,
         `export type BreakpointKeys = typeof breakpointKeys[number];`,
         ``,
-        `export const breakpointValues = {`,
+        `export const BreakpointsValues = {`,
         JSON.stringify(
             Object.fromEntries(
                 (["xs", ...sortedKeys] as const).map(key => [
@@ -170,7 +170,7 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
             .join("\n"),
         `} as const;`,
         ``,
-        `assert<Extends<typeof breakpointValues, Record<BreakpointKeys, number>>>();`,
+        `assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();`,
         ``
     ].join("\n");
 }

src/scripts/list-exports.ts

@@ -25,6 +25,7 @@ const newExports = {
     "./next-pagesdir": "./dist/next-pagesdir.js",
     "./useIsDark": "./dist/useIsDark/index.js",
     "./useColors": "./dist/useColors.js",
+    "./useBreakpointsValues": "./dist/useBreakpointsValues.js",
     "./mui": "./dist/mui.js",
     "./tss": "./dist/tss.js",
     "./tools/cx": "./dist/tools/cx.js",

src/tools/getBaseFontSizePx.ts

@@ -0,0 +1,19 @@
+import { assert } from "tsafe/assert";
+import { isBrowser } from "./isBrowser";
+
+export function getBaseFontSizePx(): number {
+    if (!isBrowser) {
+        return 16;
+    }
+
+    const htmlElement = document.querySelector("html");
+
+    assert(htmlElement !== null);
+
+    const computedStyle = window.getComputedStyle(htmlElement);
+    const fontSize = computedStyle.getPropertyValue("font-size");
+
+    const fontSizeInPixels = parseFloat(fontSize);
+
+    return fontSizeInPixels;
+}

src/useBreakpointsValues.ts

@@ -0,0 +1,51 @@
+import { useReducer, useEffect, useMemo } from "react";
+import { assert } from "tsafe/assert";
+import { breakpoints, type BreakpointKeys, type BreakpointsValues } from "./fr/breakpoints";
+
+export type { BreakpointKeys, BreakpointsValues };
+
+/** Return the breakpoint values in px, the values ger refreshed
+ *  when the base font size change.  */
+export function useBreakpointsValues() {
+    const [breakpointsValuesDependency, triggerRefresh] = useReducer(() => ({}), {});
+
+    useEffect(() => {
+        const htmlElement = document.querySelector("html");
+
+        assert(htmlElement !== null);
+
+        // Create a new MutationObserver to detect changes in the base font size
+        const observer = new MutationObserver(mutationsList => {
+            if (
+                mutationsList.find(
+                    mutation =>
+                        mutation.target === htmlElement &&
+                        mutation.attributeName === "style" &&
+                        (assert(mutation.oldValue !== null), mutation.oldValue).indexOf(
+                            "font-size"
+                        ) !== -1
+                ) !== undefined
+            ) {
+                triggerRefresh();
+            }
+        });
+
+        // Observe changes to the style attribute of the html element
+        observer.observe(htmlElement, {
+            "attributes": true,
+            "attributeOldValue": true,
+            "attributeFilter": ["style"]
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    const breakpointsValues = useMemo(
+        () => breakpoints.getBreakpointsValues(),
+        [breakpointsValuesDependency]
+    );
+
+    return { breakpointsValues };
+}

test/runtime/scripts/breakpoints/generateBreakpointsTsCode.test.ts

@@ -45,21 +45,21 @@ it("Generation of TS code for breakpoints", () => {
 import { assert } from "tsafe/assert";
 import type { Extends } from "tsafe";
 
-export const breakpointValuesUnit = "em";
+export const BreakpointsValuesUnit = "em";
 
 export const breakpointKeys = ["xs", "sm", "md", "lg", "xl"] as const;
 
 export type BreakpointKeys = typeof breakpointKeys[number];
 
-export const breakpointValues = {
+export const BreakpointsValues = {
     "xs": 0,
     "sm": 36,
     "md": 48,
     "lg": 62,
     "xl": 78
 } as const;
 
-assert<Extends<typeof breakpointValues, Record<BreakpointKeys, number>>>();
+assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();
 `.replace(/^\n/, "");
 
     const got = generateBreakpointsTsCode(input);