How to force hotreload when using a 'new' class?

[realtebo]

I try to explain the situation.

I am importing bootstrap

@import "~bootstrap/scss/bootstrap";

Then in my Index pge

const Index = () => (
  <div className="bg-success">
    <p className='text-warning'>Hello Next.js</p>
  </div>
)

export default Index

As you can see, I asked to have a red background (using bg-success) className. And this works.

Then I remove bg-success.

And hot reload works

Then I add 'bg-danger'

Next see the difference, the css is recreated, but the new .css is not used; i must press F5 to reload. manually.

Is there a way to keep working the hot reload?

[lucleray]

That's a good point !

A workaround to avoid this is to disable the plugin when using next dev, like this :

// next.config.js
const withPurgeCss = require('next-purgecss')
const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')

module.exports = phase =>
  phase !== PHASE_DEVELOPMENT_SERVER ?
    withCss(withPurgeCss()) :
    withCss()

I'll try to see if this can be solved without this workaround 🙂

[realtebo]

Thanks for your kindle suggestion, but I do not want to disable nothing in development.

Is this a bug? A wanted featured? ... Or what ?

[realtebo]

Also, Adding 2 duplicated defs, the plugin do not remove one of them neither after

npm run build
npm start

[lucleray]

I would say it's a bug, but I'm not sure it's something this package can solve. I'll try to dig further.

Otherwise it's either nextjs or purgecss-webpack-plugin.

For the duplicate defs, then it's something related to purgecss itself, you should open an issue there 🙂

[millette]

I use a workaround similar to @lucleray:

const withPurgeCss =
  process.env.NODE_ENV === "production" ? require("next-purgecss") : (x) => x

which simply passes through its argument in dev.

[AlexVipond]

I added pull request #20 to make it easier for users to enable/disable the plugin based on environment

[millette]

Can we consider this issue closed now that https://github.com/lucleray/next-purgecss#purgecssenabled is avalable?

[AlexVipond]

I think purgeCssEnabled doesn't directly solve @realtebo 's problem but offers a best practice that should be followed instead: during development, just don't purge your CSS.

If there are still issues with hot reloading after disabling purgecss, the problem is coming from somewhere else in the webpack config and not with next-purgecss or its dependencies.

I vote safe to close 🚀

[lucleray]

I'll close 🙂