decaporg / gatsby-starter-decap-cms

Example Gatsby + Decap CMS project
https://gatsby-netlify-cms.netlify.app/
MIT License
2.07k stars 979 forks source link

Attempting to use any button styles form the Bulma stylesheet will not work if you enable purge-css-plugin #656

Closed filozweb closed 2 years ago

filozweb commented 3 years ago

What is the current behavior? I created a fork for gatsby-starter-netlify-cms and proceeded to us it as a base for my project. I had observed that the plugin purge-css-plugin is too eager to purge all.sass and removes styles used by my project.

In particular, bulma has several button styles like is-medium, or is-primary, and these styles gets purged even though I have added purge-css-plugin whitelist options like whitelist or whitelistPatterns.

If I disable the plugin purge-css-plugin, these button styles are not purged and will now work.

This may be an issue with the plugin purge-css-plugin, however, it is bundled with gatsby-starter-netlify-cms, so it will trip up anyone using it, specially when one wants to use styles from bulma.

maxcell commented 2 years ago

The purge-css-plugin has since changed its APIs to use a nested structure and also uses the keyword safelist now (source):


    {
      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
      options: {
        purgeCSSOptions: {
          safelist: ['class-to-keep'] // <--- List of classes to keep
        },
        develop: true, // Activates purging in npm run develop
        purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
      },
    }
``