[generatedFromCss] classes manquantes

[edugouvfr]

Bonjour, je viens de voir que certaines classes CSS ne sont pas extraites par le parser, il s'agit des classes comportant le caractère '@' comme dans l'exemple ci-dessous :

.fr-tile--vertical\@md {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

[garronej]

Thanks for reporting!
Do you want to try submiting a PR? I can provide guidance.

[enguerranws]

I can take a look if you need @garronej @edugouvfr, sounds interesting to check it.

[garronej]

@enguerranws yes please !

[enguerranws]

Hi @garronej,

I made some investigation on this.

1. first issue, we're filtering CSS classes to only match the ones that starts by .fr- here, the regex doesn't capture characters like \@. This is easily fixable
2. it seems that the DSFR team uses @ as part of their naming convention. From what I understand, backslash is only there to tell CSS not to parse @ as it should (media queries, etc.), and only use it as a common character. So, in the CSS, we have .fr-tile--vertical\@md but, in the DOM (and in fr.cx) we should use fr-tile--vertical@md.

I'm preparing a PR, updating the test and the code.