Scoped CSS

[marin42]

Bonjour à tous,

Nous utilisons depuis peu la lib sur le repo du Service National Universel.

Nous n'utilisons en revanche le DSFR que sur la partie inscription de l'app. Et les règles globales de css utilisées par react-dsfr cassent totalement toute la partie "Non DSFR" de l'application, ce qui nous oblige à charger les css de react-dsfr uniquement sur des pages full DSFR, et ceci rend complètement impossible l'utilisation d'un composant "dsfr" sur une page non compliant.

Est il envisageable de scoper le css de react-dsfr ?

Un scope global de type .dsfr suffirait à nous débloquer sur de nombreux sujets.

[garronej]

Salut @marin42,

Malheureusement je crois qu'on ne va rien pouvoir faire pour toi pour le coup.

Le DSFR est comme ça, il applique un certain nombre de règles CSS global il n'y a rien que nous puissions faire au niveau de l'integration React.

[garronej]

Peut être que la solution serait d'augmenter la spécificité de votre CSS custom.

Quelle est le framework CSS que vous utilisez?

[garronej]

@marin42, On a eu une discution avec @ledouxm hier qui semble avoir une solution "artisanal" au problème.

Elle est cependant difficile a appliquer a notre niveau car elle implique de modifier la feuille de style CSS.

[ledouxm]

J'ai fait un script qui, après le DL du dsfr, transforme le fichier dsfr.min.css en mettant tout (sauf les blocks :root et :root[data-fr-theme=dark] et les @font-face) dans un @layer dsfr { ... } dans mon cas mais ce serait une class dans le votre.

Le script utilise des regex, il serait peut être plus propre de parcourir l'AST avec css-tree

[marin42]

Merci pour vos réponses à tous, je vais jeter un oeil à ton script @ledouxm