Discussion on: Shipping minimal CSS with Next.js + purgeCSS

[Bram Hammer]

Since this is quite high in google with the terms nextjs postcss i wanted to give an updated piece of code.

Next.js > 9.3 setup:

1. Install required packages

npm i -D postcss-flexbugs-fixes postcss-preset-env @fullhuman/postcss-purgecss postcss

2a. (minimal setup) alter your postcss.config.js

module.exports = {
  plugins: {
      "postcss-flexbugs-fixes": {},
      "postcss-preset-env": {
          "autoprefixer": {
              "flexbox": "no-2009"
          },
          "stage": 3,
          "features": {
              "custom-properties": false
          }
      },
  },
}

2b. ( Our tailwind, storefront setup )

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {},
      "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}',
              './lib/**/*.{js,jsx,ts,tsx}',
              './modules/**/*.{js,jsx,ts,tsx}'
          ],
          defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
          safelist: ["html", "body"]
      }
  },
}