Erreur de minification du CSS par lightningcss lors d'un build vite : @media zero hack

[leopold-gravier]

Description

Bonjour,
Depuis la version 8 de vite, la feuille de style @codegouvfr/react-dsfr/main.css provoque une erreur lors d'un build. Elle ne peut pas être minifiée par lightningcss car elle contient un "hack @media zero", apparemment pour la compatibilité avec les anciens navigateurs.

Message d'erreur

[plugin vite:css-post]
SyntaxError: [lightningcss minify] Invalid media query.
This file contains @media zero hack (e.g. `@media (min-width: 0\0)`), which was used in the past to support old Internet Explorer versions. This is not a valid CSS syntax and will be ignored by modern browsers. 
While this is not supported by LightningCSS, you can set `css.lightningcss.errorRecovery: true` to strip these codes.
24623 |    }
24624 |  }
24625 |  @media screen and (min-width: 0\0) and (min-resolution: 72dpi) and (min-width: 0\0) and (min-resolution: 72dpi) {
      |                              ^
24626 |    .fr-enlarge-link,
24627 |    .fr-enlarge-button {

Étapes pour reproduire

Créer un nouveau projet avec npm, vite, React et typescript.

1. Commencer un nouveau projet npm create vite@latest, choisir React puis typescript
2. Aller dans le répertoire créé
3. Installer les dépendances npm install

Installer react-dsfr d'après initial setup

5. Installer react-dsfr npm install @codegouvfr/react-dsfr
6. Ajouter les scripts 'predev' et 'prebuild' à package.json, puis lancer npm install.

"scripts": {
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
}

7. Ajouter les icônes et la feuille CSS à index.html

<link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
<link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />

<link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />

8. Ajouter le DSFR à src/main.tsx

import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
startReactDsfr({ defaultColorScheme: "system" });

Impossible de faire un build

9. npm run build
10. Le build échoue avec le message d'erreur ci-dessus

[leopold-gravier]

Voici un exemple de projet qui présente l'erreur : leopold-gravier/dsfr-css-error