"gatsby-plugin-purgecss" added all used CSS of every page to all pages, there is a way to prevent that?

Question

I m using the Bulma framework I have added "gatsby-plugin-purgecss" to remove unused CSS, it is working fine but when I take a look at the pages in the public folder all CSS is the same on all pages.

how to make it add only the CSS used by the same page, i have about 22k page and every page have his style CSS.

example: I m using className="table" on the home page but I m never use it on the other pages, I have seen that all page include ".table" CSS. there is a way to prevent that?

Answer 1

You have two problems there:

1. The wrong style importation
2. The purge of the CSS

The first one should be fixed with a standard folder and importation structure. Let's say you have a homepage that extends from the layout.js. In that case, your table styles should be in a CSS that is only imported in your homepage. So:

• Create a homepage.css inside a styles folder
• Add your table styles in homepage.css
• Import the styles only in the index.js page. If you add the styles in the layout or some other shared component, your styles will be imported in every component and in every page that is using the file, creating a wasting of compilation and computation time.

Once you've fixed the first issue, you can focus on the second one. If not, you are trying to add a kind of logic to your plugin, making it know in what page should or shouldn't purge the styles. gatsby-plugin-purgecss adds a bunch of options to whitelisting or ignore some files and folders:

{ 
  resolve: `gatsby-plugin-purgecss`,
  options: {
    // whitelist: ['whitelist'], // Don't remove this selector
    // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
    // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
  }
}

In the ignore and purgeOnly arrays you can include the desired folders to ignore or the opposite, to force the purging (note the directory structure).