How do I use PurgeCSS with Next.js and module.scss files?

Question

I've got component level .scss files (filename.module.scss) and I want to purge unused css from these files.

Since the styling classnames get hashed. I was wondering how I can get purgeCSS to work with a next.js app that uses module.scss files for most of the styling.

https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181 this issue here goes over it but for a react application

Klinges

Have you tried what's in the official documentation: purgecss.com/guides/next.html#next-js? What does your PostCSS config file look like? – Narthex

@Narthex I did but the issue was that my styling from my modules was removed. I have fileName.module.scss for every component / page file and they went poof. – Klinges

A few of my packages that require extra css seem to also have all their CSS just removed. – Klinges

Edit: Seems like its working now (modules) using the config from that link you sent me - but some library styles are missing (react-multi-carousel has import "react-multi-carousel/lib/styles.css"; imported in _app.js) – Klinges

I tried adding their class names to the whitelist in postcss.config.js ``` safelist: ["html", "body", /^react-/, /^navbar-/] ``` but this didn't do anything – Klinges

did you make it work? – Internuncio

Answer 1

You can use a dedicated NPM package next-purge-css-modules, made just for this purpose:

npm install next-purge-css-modules

and in your next.config.js, use:

const withPurgeCSSModules = require('next-purge-css-modules');
const nextConfig = { ... };

module.exports = withPurgeCSSModules(nextConfig);

Frigorific

withPurgeCSSModules is not in the list of allowed properties for nextConfig. Also the package is outdated. – Gramps