Back to overview

Shipping minimal CSS with Next.js + purgeCSS

|2 min read

For a new project I’ll be working on, the company asked to work with Bootstrap to be able to use the built-in grid, utility classes etc. When I think of Bootstrap, I think: a lot of CSS being added to the project which is never used.

With the latest versions of Bootstrap, we have the possibility to only import the SCSS/LESS files for the features we will be using. For example:

@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";

The problem with this approach is that these separate files still include a lot of CSS we will not be using in our application.

So what I’d like to do instead, is import the whole bootstrap SCSS, and then delete the unused CSS when building the production output:

@import "~bootstrap/scss/bootstrap";

With this setup, the generated CSS has this size: cssbeforepurge

This is a big CSS chunk for the one class from Bootstrap we’re using:

export default function Home() {
  return (
    <div className="container">
      <span>Test</span>
    </div>
  );
}

So it would be nice to get rid of this CSS in our production build. To achieve this, we’ll be using purgeCSS.

We just need to add a postcss.config.js file to override the default postCSS config Next.js uses (https://nextjs.org/docs/advanced-features/customizing-postcss-config).

Our postcss.config.js will look like this:

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

Don’t forget to install the node_modules which are used by the postCSS config! (postcss-flexbugs-fixes, @fullhuman/postcss-purgecss, postcss-preset-env, autoprefixer).

When all this is done, you can create a new Next.js build (npm run build) and have the following result: cssafterpurge

Inside the CSS output, it only includes the CSS for the container class, and the CSS variables used by Bootstrap.

That’s a lot of CSS gone! Mission accomplished :-).

Did you like this post? Check out my latest blog posts:

Chrome logo repeated in a grid
4 Sept 2023

Developing a Chrome extension to convert the current url to localhost in 1 click

  • javascript
  • chrome extension
  • html
TailwindCSS logo
12 Jul 2023

Setting and using CSS variables in Tailwind with React

  • css
  • tailwind
  • react
The word update spelled out with scrabble blocks
10 Jul 2023

Keeping your dependencies up to date in a visual way using npm-check-updates

  • javascript
  • nodejs