Add a type that is an union of all the avalaible classes

Author: garronej

src/bin/css_to_ts/classNames.ts

@@ -0,0 +1,38 @@
+import { getRulesByBreakpoint } from "./breakpoints";
+import memoize from "memoizee";
+import { objectKeys } from "tsafe/objectKeys";
+
+export const parseClassNames = memoize((rawCssCode: string): string[] => {
+    const rulesByBreakpoint = getRulesByBreakpoint(rawCssCode);
+
+    const classes = new Set<string>();
+
+    objectKeys(rulesByBreakpoint).forEach(breakpoint => {
+        const rules = rulesByBreakpoint[breakpoint];
+
+        rules.forEach(({ selectors }) => {
+            selectors.forEach(selector => {
+                const matchArr = selector.match(/^(\.fr-[a-zA-Z0-9_-]+)/);
+
+                if (matchArr === null) {
+                    return;
+                }
+
+                classes.add(matchArr[1]);
+            });
+        });
+    });
+
+    return Array.from(classes);
+});
+
+export function generateClassNamesTsCode(rawCssCode: string): string {
+    const classNames = parseClassNames(rawCssCode);
+
+    return [
+        `export const frClassNames= ${JSON.stringify(classNames, null, 4)} as const;`,
+        ``,
+        `export type FrClassName = typeof frClassNames[number];`,
+        ``
+    ].join("\n");
+}

src/bin/css_to_ts/css_to_ts.ts

@@ -4,6 +4,7 @@ import { generateGetColorOptionsTsCode } from "./colorOptions";
 import { getProjectRoot } from "../tools/getProjectRoot";
 import { generateTypographyTsCode } from "./typography";
 import { generateSpacingTsCode } from "./spacing";
+import { generateClassNamesTsCode } from "./classNames";
 import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename, relative as pathRelative } from "path";
 
@@ -81,3 +82,8 @@ fs.writeFileSync(
     pathJoin(generatedDirPath, "spacing.ts"),
     Buffer.from([warningMessage, ``, generateSpacingTsCode(rawCssCode), ``].join("\n"), "utf8")
 );
+
+fs.writeFileSync(
+    pathJoin(generatedDirPath, "classNames.ts"),
+    Buffer.from([warningMessage, ``, generateClassNamesTsCode(rawCssCode), ``].join("\n"), "utf8")
+);

test/behavior/bin/classNames/generateBreakpointsTsCode.test.ts

@@ -0,0 +1,44 @@
+import { it, expect } from "vitest";
+import { generateClassNamesTsCode } from "../../../../src/bin/css_to_ts/classNames";
+
+it("Generation of TS code for fr class names", () => {
+    const input = `
+.fr-text--light {
+  font-weight: 300 !important;
+}
+
+.fr-text--xl,
+.fr-text--lead {
+  font-size: 1.25rem !important;
+  line-height: 2rem !important;
+  margin: var(--text-spacing);
+}
+
+.fr-grid-row--gutters > [class^=fr-col-],
+.fr-grid-row--gutters > [class*=" fr-col-"],
+.fr-grid-row--gutters > .fr-col {
+  padding: 0.5rem;
+}
+
+@media (min-width: 36em) { }
+@media (min-width: 48em) { }
+@media (min-width: 62em) { }
+@media (min-width: 78em) { }
+
+`;
+
+    const expected = `
+export const frClassNames= [
+    ".fr-text--light",
+    ".fr-text--xl",
+    ".fr-text--lead",
+    ".fr-grid-row--gutters"
+] as const;
+
+export type FrClassName = typeof frClassNames[number];
+`.replace(/^\n/, "");
+
+    const got = generateClassNamesTsCode(input);
+
+    expect(got).toBe(expected);
+});

test/behavior/bin/classNames/parseClassNames.test.ts

@@ -0,0 +1,35 @@
+import { it, expect } from "vitest";
+import { parseClassNames } from "../../../../src/bin/css_to_ts/classNames";
+
+it("Parsing of fr classnames", () => {
+    const input = `
+.fr-text--light {
+  font-weight: 300 !important;
+}
+
+.fr-text--xl,
+.fr-text--lead {
+  font-size: 1.25rem !important;
+  line-height: 2rem !important;
+  margin: var(--text-spacing);
+}
+
+.fr-grid-row--gutters > [class^=fr-col-],
+.fr-grid-row--gutters > [class*=" fr-col-"],
+.fr-grid-row--gutters > .fr-col {
+  padding: 0.5rem;
+}
+
+@media (min-width: 36em) { }
+@media (min-width: 48em) { }
+@media (min-width: 62em) { }
+@media (min-width: 78em) { }
+
+`;
+
+    const expected = [".fr-text--light", ".fr-text--xl", ".fr-text--lead", ".fr-grid-row--gutters"];
+
+    const got = parseClassNames(input);
+
+    expect(got).toStrictEqual(expected);
+});