Do the patching of the dsfr.css ahead of time

Author: garronej

package.json

@@ -70,8 +70,7 @@
     "dependencies": {
         "@gouvfr/dsfr": "1.7.2",
         "remixicon": "^2.5.0",
-        "tsafe": "^1.1.1",
-        "css": "^3.0.0"
+        "tsafe": "^1.1.1"
     },
     "devDependencies": {
         "@emotion/react": "^11.10.4",

src/bin/copy_dsfr_dist_to_root.ts

@@ -1,6 +1,10 @@
 import { join as pathJoin } from "path";
 import * as fs from "fs";
 import { getProjectRoot } from "./tools/getProjectRoot";
+import {
+    pathOfPatchedRawCssCodeForCompatWithRemixIconRelativeToDsfrDist,
+    getPatchedRawCssCodeForCompatWithRemixIcon
+} from "./css_to_ts/icons";
 
 const projectRootDirPath = getProjectRoot();
 
@@ -13,3 +17,15 @@ if (fs.existsSync(dsfrDirPath)) {
 fs.cpSync(pathJoin(projectRootDirPath, "node_modules", "@gouvfr", "dsfr", "dist"), dsfrDirPath, {
     "recursive": true
 });
+
+(async () => {
+    fs.writeFileSync(
+        pathJoin(dsfrDirPath, pathOfPatchedRawCssCodeForCompatWithRemixIconRelativeToDsfrDist),
+        Buffer.from(
+            await getPatchedRawCssCodeForCompatWithRemixIcon({
+                "rawCssCode": fs.readFileSync(pathJoin(dsfrDirPath, "dsfr.css")).toString("utf8")
+            }),
+            "utf8"
+        )
+    );
+})();

src/bin/css_to_ts/icons.ts

@@ -1,16 +1,14 @@
-import memoize from "memoizee";
 import type { Icon } from "./css_to_ts";
-import { parseCss } from "./parseCss";
-import * as css from "css";
 import { exclude } from "tsafe/exclude";
+import { join as pathJoin } from "path";
 
 type IconLike = Icon.Dsfr | Omit<Icon.Remixicon, "rawSvgCode">;
 
 export function generateIconsRawCssCode(params: {
     usedIcons: IconLike[];
-    rawCssCode: string;
+    patchedRawCssCodeForCompatWithRemixIcon: string;
 }): string {
-    const { usedIcons, rawCssCode } = params;
+    const { usedIcons, patchedRawCssCodeForCompatWithRemixIcon } = params;
 
     const buildRule = (icon: IconLike, isHighContrast: boolean) => {
         const { iconId, prefix } = icon;
@@ -52,17 +50,24 @@ export function generateIconsRawCssCode(params: {
                   `}`,
                   ``
               ]),
-        ...(usedIcons.find(({ prefix }) => prefix === "ri-") !== undefined
-            ? [
-                  `/* This is all the parts of dsfr.css related to icons with .fr-icon- replaced by .ri- so that we can use remixicon as dsfr icons*/`,
-                  getPatchedRawCssCodeForCompatWithRemixIcon(rawCssCode)
-              ]
-            : [])
+        ...(usedIcons.find(({ prefix }) => prefix === "ri-") === undefined
+            ? []
+            : [patchedRawCssCodeForCompatWithRemixIcon])
     ].join("\n");
 }
 
-export const getPatchedRawCssCodeForCompatWithRemixIcon = memoize((rawCssCode: string) => {
-    const parsedCss = parseCss(rawCssCode);
+export const pathOfPatchedRawCssCodeForCompatWithRemixIconRelativeToDsfrDist = pathJoin(
+    "utility",
+    "icons",
+    "dsfr_remixicon.css"
+);
+
+export async function getPatchedRawCssCodeForCompatWithRemixIcon(params: { rawCssCode: string }) {
+    const { rawCssCode } = params;
+
+    const css = await import("css");
+
+    const parsedCss = css.parse(rawCssCode);
 
     const prefixRegExp = /fr-icon-[^-]/;
 
@@ -103,4 +108,4 @@ export const getPatchedRawCssCodeForCompatWithRemixIcon = memoize((rawCssCode: s
         .filter(exclude(undefined));
 
     return css.stringify(parsedCss).replace(/fr-icon-/g, "ri-");
-});
+}

src/bin/only_include_used_icons.ts

@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 import { collectIcons } from "./css_to_ts";
-import { generateIconsRawCssCode } from "./css_to_ts/icons";
+import {
+    generateIconsRawCssCode,
+    pathOfPatchedRawCssCodeForCompatWithRemixIconRelativeToDsfrDist
+} from "./css_to_ts/icons";
 import { getProjectRoot } from "./tools/getProjectRoot";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
@@ -137,7 +140,14 @@ import type { Equals } from "tsafe";
 
     const rawIconCssCodeBuffer = Buffer.from(
         generateIconsRawCssCode({
-            "rawCssCode": fs.readFileSync(pathJoin(dsfrDistDirPath, "dsfr.css")).toString("utf8"),
+            "patchedRawCssCodeForCompatWithRemixIcon": fs
+                .readFileSync(
+                    pathJoin(
+                        dsfrDistDirPath,
+                        pathOfPatchedRawCssCodeForCompatWithRemixIconRelativeToDsfrDist
+                    )
+                )
+                .toString("utf8"),
             usedIcons
         }),
         "utf8"

test/behavior/bin/icons/generateIconsRawCssCode.test.ts

@@ -2,13 +2,9 @@ import { it, expect } from "vitest";
 import { generateIconsRawCssCode } from "../../../../src/bin/css_to_ts/icons";
 
 it("Successfully css with only used icons", () => {
-    const rawCssCode = `
-[target=_blank]::after {
-  flex: 0 0 auto;
-}
-
-[target=_blank][class^=fr-icon-]::after,
-[target=_blank][class*=" fr-icon-"]::after,
+    const patchedRawCssCodeForCompatWithRemixIcon = `
+[target=_blank][class^=ri-]::after,
+[target=_blank][class*=" ri-"]::after,
 [target=_blank][class^=fr-fi-]::after,
 [target=_blank][class*=" fr-fi-"]::after {
   flex: 0 0 auto;
@@ -26,19 +22,14 @@ it("Successfully css with only used icons", () => {
   margin-left: 0.25rem;
 }
 
-.fr-icon--xs::before,
-.fr-icon--xs::after {
-  --icon-size: 0.75rem;
-}
-
-.fr-btns-group--sm .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) {
+.fr-btns-group--sm .fr-btn:not([class^=ri-]):not([class*=" ri-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) {
   font-size: 0.875rem;
   line-height: 1.5rem;
   min-height: 2rem;
   padding: 0.25rem 0.75rem;
 }
 
-.fr-follow__social .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) {
+.fr-follow__social .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=ri-]):not([class*=" ri-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) {
   font-size: 1rem;
   line-height: 1.5rem;
   min-height: 2.5rem;
@@ -52,18 +43,8 @@ it("Successfully css with only used icons", () => {
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .fr-enlarge-link [href] {
-    text-decoration: none;
-  }
-
-  [href],
-  .fr-reset-link {
-    text-decoration: underline;
-  }
-
-
-  [class^=fr-icon-]::before,
-  [class*=" fr-icon-"]::before,
+  [class^=ri-]::before,
+  [class*=" ri-"]::before,
   [class^=fr-fi-]::before,
   [class*=" fr-fi-"]::before {
     background-color: transparent;
@@ -72,22 +53,7 @@ it("Successfully css with only used icons", () => {
     width: 1.5rem;
     height: 1.5rem;
   }
-
-  .fr-icon--xs::before {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-}
-
-@media (min-width: 36em) { }
-
-@media (min-width: 48em) { }
-
-@media (min-width: 62em) { }
-
-@media (min-width: 78em) { }
-`;
+}`.replace(/^\n/, "");
 
     const expected = `
 .fr-icon-ancient-gate-fill::before,
@@ -126,7 +92,6 @@ it("Successfully css with only used icons", () => {
     
 }
 
-/* This is all the parts of dsfr.css related to icons with .fr-icon- replaced by .ri- so that we can use remixicon as dsfr icons*/
 [target=_blank][class^=ri-]::after,
 [target=_blank][class*=" ri-"]::after,
 [target=_blank][class^=fr-fi-]::after,
@@ -180,7 +145,7 @@ it("Successfully css with only used icons", () => {
 }`.replace(/^\n/, "");
 
     const got = generateIconsRawCssCode({
-        rawCssCode,
+        patchedRawCssCodeForCompatWithRemixIcon,
         "usedIcons": [
             {
                 "prefix": "fr-icon-",

test/behavior/bin/icons/getPatchedRawCssCodeForCompatWithRemixIcon.test.ts

@@ -1,7 +1,7 @@
 import { it, expect } from "vitest";
 import { getPatchedRawCssCodeForCompatWithRemixIcon } from "../../../../src/bin/css_to_ts/icons";
 
-it("Successfully generates patched css for remixicon support", () => {
+it("Successfully generates patched css for remixicon support", async () => {
     const rawCssCode = `
 [target=_blank]::after {
   flex: 0 0 auto;
@@ -142,7 +142,7 @@ it("Successfully generates patched css for remixicon support", () => {
   }
 }`.replace(/^\n/, "");
 
-    const got = getPatchedRawCssCodeForCompatWithRemixIcon(rawCssCode);
+    const got = await getPatchedRawCssCodeForCompatWithRemixIcon({ rawCssCode });
 
     expect(got).toEqual(expected);
 });