Merge pull request #242 from codegouvfr/fix/css-classnames-parsing

#226 edited regex to handle CSS selectors containing @ char

Author: garronej

scripts/build/cssToTs/classNames.ts

@@ -9,11 +9,9 @@ export const parseClassNames = memoize((rawCssCode: string): string[] => {
 
     objectKeys(rulesByBreakpoint).forEach(breakpoint => {
         const rules = rulesByBreakpoint[breakpoint];
-
         rules.forEach(({ selectors }) => {
             selectors.forEach(selector => {
-                const matchArr = selector.match(/\.fr-[a-zA-Z0-9_-]+/g);
-
+                const matchArr = selector.match(/\.fr-[a-zA-Z0-9_-]+(?:@[a-zA-Z0-9_-]+)?/g);
                 if (matchArr === null) {
                     return;
                 }
@@ -24,7 +22,6 @@ export const parseClassNames = memoize((rawCssCode: string): string[] => {
             });
         });
     });
-
     return Array.from(classNames);
 });
 

src/mui.tsx

@@ -338,7 +338,7 @@ export function createMuiDsfrTheme(
     ...args: object[]
 ): MuiTheme {
     const muiTheme = createTheme(getMuiDsfrThemeOptions(params), ...args);
-    
+
     return muiTheme;
 }
 

test/runtime/scripts/classNames/parseClassNames.test.ts

@@ -1,3 +1,4 @@
+/* eslint no-useless-escape: 0 */
 import { it, expect } from "vitest";
 import { parseClassNames } from "../../../../scripts/build/cssToTs/classNames";
 
@@ -24,6 +25,11 @@ it("Parsing of fr classnames", () => {
   color: #3a3a3a;
 }
 
+.fr-tile--vertical\@md {
+  display: flex;
+  flex-direction: column;
+}
+
 @supports (aspect-ratio: 16/9) {
   .fr-ratio-32x9 {
     aspect-ratio: 3.5555555556 !important;
@@ -34,7 +40,6 @@ it("Parsing of fr classnames", () => {
   }
 }
 
-
 @media (min-width: 36em) { }
 @media (min-width: 48em) { }
 @media (min-width: 62em) { }
@@ -50,6 +55,7 @@ it("Parsing of fr classnames", () => {
         "fr-col",
         "fr-header__navbar",
         "fr-btn--menu",
+        "fr-tile--vertical@md",
         "fr-ratio-32x9",
         "fr-ratio-16x9"
     ];