Apply PurgeCSS after build was created

[hk86]

I would like to purge my css. The problem I have is, that I use the package semantic-ui-react. Since I import the components from semantic-ui-react in my own components the purger does not know which css classnames are used.

Is it possible to build the pages and then run the css purger? With the current config a lot of css classes are missing.

Currently my next.config.js looks like this:

const withPurgeCss = require('next-purgecss')
module.exports = withPurgeCss()

[GautierT]

Hey ! Did you find a solution to this ? I'm trying to do the same on a gatsby website. Thanks

[Sangdt]

Did you import the Semantic UI css files in _app.js and the css still get purged ? If you do then u having the same problem with me, i tried to import css file from other library in node_modules but it still get purged when building the projects.

I fixed with this postcss.config.js :

plugins: [
     //other plugins...
    ['@fullhuman/postcss-purgecss',
      process.env.NODE_ENV === 'production' ? {
        content: [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/**/*.{js,jsx,ts,tsx}',
          './node_modules/react-toastify/**/*.{js,jsx,ts,tsx}',
          './node_modules/tocbot/**/*.{js,jsx,ts,tsx}',
          './node_modules/react-tabs/**/*.{js,jsx,ts,tsx}',
          './node_modules/react-block-ui/**/*.{js,jsx,ts,tsx}',
          './node_modules/react-glider/**/*.{js,jsx,ts,tsx}',
        ],
        defaultExtractor: content => {
          // Capture as liberally as possible, including things like `h-(screen-1.5)`
          const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

          // Capture classes within other delimiters like .block(class="w-1/2") in Pug
          const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

          return broadMatches.concat(innerMatches)
        }
      } : false
    ],
  ],

since i didnt use withPurgeCss so maybe the config can be a little bit difference but this may help.

There is another way to do this is using cdn link to the css file.

[hk86]

Since NextJS 10 you can import css files on component level:

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

@Sangdt Nice approach!

My solution was, since my post is already a couple months old, to move away from semantic ui. I use tailwindcss now.