Comment utiliser avec Ant Design

Conseil

Le contenu de cette page provient de cette issue.

PurgeCSS fonctionne en comparant les sélecteurs de vos fichiers de contenu avec ceux de vos fichiers CSS. Lors de l'utilisation de bibliothèques de composants avec leur propre CSS, il arrive que le CSS soit supprimé car le contenu n'est pas trouvé. Vous devez alors spécifier où le contenu peut être trouvé.

Dans le cas d'ant-design, la liste des sélecteurs utilisés dans ant-design ne peut pas être facilement récupérée à partir de son contenu.

Voici une façon d'utiliser PurgeCSS avec Ant Design et React. Le projet a été créé avec create-react-app. Ensuite, il utilise react-app-rewired pour étendre la configuration.

const glob = require("glob-all");
const paths = require("react-scripts/config/paths");

const { override, addPostcssPlugins } = require("customize-cra");

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: [
    paths.appHtml,
    ...glob.sync(`${paths.appSrc}/**/*.js`, { nodir: true }),
    ...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`, {
      nodir: true,
    }),
  ],
  extractors: [
    {
      extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
      extensions: ["css"],
    },
  ],
});

module.exports = override(
  addPostcssPlugins([
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ])
);

J'ai essentiellement ajouté un chemin vers le fichier CSS d'antd que je veux conserver. Dans l'exemple ci-dessous, button.

...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`,

Pour conserver antd entièrement, vous pouvez remplacer par

...glob.sync(`${paths.appNodeModules}/antd/es/**/*.css`,

et j'ai écrit un extracteur pour les fichiers CSS qui a pour but de récupérer les sélecteurs depuis le fichier :

  extractors: [
    {
      extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
      extensions: ["css"],
    },
  ],