👷
next-purge-css-modules
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');
/** @type {import('next-purge-css-modules').PurgeConfig} */
const purgeConfig = { ... };
module.exports = withPurgeCSSModules(purgeConfig);
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 purge config object via the next.config.js
file.
Additionally, you can also pass your custom next config object as the function's second argument.
interface PurgeCSSModulesOptions {
content?: string | string[];
enableDevPurge?: boolean;
fontFace?: boolean;
keyframes?: boolean;
safelist?: UserDefinedSafelist;
variables?: boolean;
}
const path = require('path');
const withPurgeCSSModules = require('next-purge-css-modules');
/** @type {import('next').NextConfig} */
const nextConfig = {
...
};
/** @type {import('next-purge-css-modules').PurgeConfig} */
const purgeConfig = {
content: path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx}'),
enableDevPurge: true,
safelist: ['body', 'html'],
};
module.exports = withPurgeCSSModules(purgeConfig, 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 they can either be a single path or an array.
The default value looks at all JavaScript/TypeScript files in the default Next.js pages directories (app/**/*.{js,jsx,ts,tsx}
, pages/**/*.{js,jsx,ts,tsx}
, src/app/**/*.{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.
fontFace
If there are any unused @font-face rules, setting this flag to true
will purge them from the final output. By default is false
.
keyframes
Any unused animation keyframes found within your css-module code will be purged from the final output when this flag is set to true
. By default is false
.
safelist
By supplying an array of CSS selectors to the safelist
option, you can tell next-purge-css-modules
which selectors you wish to ensure are not purged. By default is ['body', 'html']
To read more about the safelist
configuration option, you can refer to the official PurgeCSS documentation.
variables
When you are using Custom Properties (CSS variables), or a library using them such as Bootstrap, setting this flag to true
will purge them from the final output.
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