Gatsby

Vous pouvez supprimer le CSS inutilisé des fichiers et modules css/sass/less/stylus dans votre projet Gatsby en utilisant PurgeCSS. Compatible avec tailwind, bootstrap, bulma, etc.

📘 Lire la dernière documentation ici. • Journal des modifications •

Démonstration

Lors de l'utilisation dans gatsby-starter-bootstrap

Lors de l'utilisation dans gatsby-starter-bootstrap-cv (installé par défaut)

Fichiers supportés

• .css , .module.css
• .scss, .sass, .module.scss, .module.sass (via gatsby-plugin-sass)
• .less, .module.less (via gatsby-plugin-less)
• .styl, .module.styl (via gatsby-plugin-stylus)

Installation

npm i gatsby-plugin-purgecss

Utilisation

Ajoutez le plugin APRÈS les autres plugins css/postcss

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Ajouter après ces plugins s'ils sont utilisés
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Affiche les sélecteurs supprimés et les noms des fichiers traités
        // develop: true, // Activer lors de l'utilisation de `gatsby develop`
        // tailwind: true, // Activer le support de tailwindcss
        // whitelist: ['whitelist'], // Ne pas supprimer ce sélecteur
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignorer les fichiers/dossiers
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purger uniquement ces fichiers/dossiers
      }
    }
  ]
};

En résumé

• Définissez les options dans gatsby-config.js, pas dans purgecss.config.js.
• Si vous utilisez tailwindcss, utilisez l'option tailwind: true.
• Utilisez l'option printRejected: true pour afficher les sélecteurs supprimés.
• Seuls les fichiers traités par Webpack seront purgés.
• my-selector ne correspondra pas à mySelector.
• Ajoutez à la liste blanche les sélecteurs requis ou ignorez les fichiers/dossiers en utilisant le guide Solutions de liste blanche.
• Ignorez des packages complets avec ignore: ['packagename/'].
• Pour purger uniquement des fichiers/packages spécifiques, utilisez purgeOnly: ['fileOrPackage/'].
• Seuls les fichiers js, jsx, ts, tsx sont analysés pour les sélecteurs par défaut. Si vous souhaitez ajouter md ou mdx, utilisez content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')] ou mieux encore, ajoutez simplement les sélecteurs requis à la liste blanche.