next-purge-css-modules

Easily remove unused css-module code in your Next.js application

Usage no npm install needed!

<script type="module">
  import nextPurgeCssModules from 'https://cdn.skypack.dev/next-purge-css-modules';
</script>

README


:construction_worker:

next-purge-css-modules


Easily remove unused css-module code in your Next.js application



yarn add next-purge-css-modules --dev

Contents

Installation

next-purge-css-modules can be installed using your favourite JavaScript package manager.

yarn add next-purge-css-modules --dev

npm install next-purge-css-modules --save-dev

Example Usage

If your Next.js project does not already contain one, create a next.config.js file in the root of your project directory.

const withPurgeCSSModules = require('next-purge-css-modules');

const nextConfig = { ... };

module.exports = withPurgeCSSModules(nextConfig);

You can read more about the advanced configuration of Next.js on the official documentation site.

Configuration

This plugin comes preconfigured with some sensible defaults options. However, you are free to alter this configuration to suit your project needs with the use of the custom next config object via the next.config.js file.

interface PurgeCSSModulesOptions {
  content: string | string[];
  enableDevPurge: boolean;
}

const path = require('path');
const withPurgeCSSModules = require('next-purge-css-modules');

const nextConfig = {
  purgeCSSModules: {
    content: path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx}'),
    enableDevPurge: true,
  }
};

module.exports = withPurgeCSSModules(nextConfig);

content

This option tells next-purge-css-modules which files to look through to check for unused css-modules. You can either supply these files as absolute paths or as file path globs and can either be a single path or as an array.

The default value looks at all JavaScript/TypeScript files in the two default Next.js pages directorys (pages/**/*.{js,jsx,ts,tsx} and src/pages/**/*.{js,jsx,ts,tsx}).

enableDevPurge

By default, your css-module code will only be purged when a production build is generated. You can set this flag to true to enable css-modules purging when running your Next.js project in development mode.

Usage With Sass

next-purge-css-modules works directly out of the box with Next.js projects set up to use Sass.

You can refer to the official Next.js Sass documentation to ensure your project is set up correctly.

Contributing

Thanks for taking the time to contribute! Before you get started, please take a moment to read through our contributing guide. The focus area for next-purge-css-modules right now is fixing potential bugs.

However, all issues and PRs are welcome!

License

MIT - see the LICENSE.md file for details