Compat MUI DSFR CSS

Author: garronej

src/scripts/build/build.ts

@@ -11,6 +11,7 @@ import {
 import * as child_process from "child_process";
 import { oppa } from "oppa";
 import { assert } from "tsafe/assert";
+import { patchCssForMui } from "./patchCssForMui";
 
 (async () => {
     const { args } = oppa()
@@ -46,6 +47,21 @@ import { assert } from "tsafe/assert";
         )
     );
 
+    {
+        const { rawDsfrCssCodePatchedForMui, rawDsfrCssCodePatchedForMuiMinified } = patchCssForMui(
+            { rawDsfrCssCode }
+        );
+
+        (
+            [
+                [rawDsfrCssCodePatchedForMui, ".css"],
+                [rawDsfrCssCodePatchedForMuiMinified, ".min.css"]
+            ] as const
+        ).forEach(([rawCssCode, ext]) =>
+            fs.writeFileSync(pathJoin(dsfrDirPath, `dsfr${ext}`), Buffer.from(rawCssCode, "utf8"))
+        );
+    }
+
     const icons = await collectIcons({
         "remixiconDirPath": pathJoin(nodeModuleDirPath, "remixicon"),
         "iconsCssRawCode": fs

src/scripts/build/patchCssForMui.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import * as css from "css";
+
+export function patchCssForMui(params: { rawDsfrCssCode: string }) {
+    const { rawDsfrCssCode } = params;
+
+    const parsedCss = css.parse(rawDsfrCssCode);
+
+    (function callee(rules: any[], media: string): any[] {
+        return [
+            ...rules.filter(({ type }) => type === "rule").map(rule => [rule, media]),
+            ...rules
+                .filter(({ type }) => type === "media")
+                .map(({ rules, media }) => callee(rules, media))
+                .flat()
+        ];
+    })(parsedCss.stylesheet!.rules as any[], "root").forEach(
+        ([rule, media]) =>
+            (rule.selectors = rule.selectors.map((selector: string) => {
+                if (media === "(hover: hover) and (pointer: fine)") {
+                    if (
+                        selector === "button:not(:disabled):hover" ||
+                        selector === "button:not(:disabled):active"
+                    ) {
+                        return `${selector}:not([class^="Mui"])`;
+                    }
+                }
+
+                return selector;
+            }))
+    );
+
+    return {
+        "rawDsfrCssCodePatchedForMui": css.stringify(parsedCss, { "compress": false }),
+        "rawDsfrCssCodePatchedForMuiMinified": css.stringify(parsedCss, { "compress": true })
+    };
+}