CSS hot reloading does not work in v6

Are you reporting a bug?

Yes.

Environment

1. react-static -v: 6.0.0-beta.21
2. node -v: v10.11.0
3. yarn --version or npm -v: 1.10.1
4. Operating system: macOS

Steps to Reproduce the problem

1. npm i -g react-static@6.0.0-beta.21
2. react-static create
3. choose basic
4. yarn start
5. modify app.css

Expected Behavior

CSS should hot reload, but it doesn’t

I’ve been using react-static@6 beta since 6.0.0-beta.14 and css hot reloading never worked for me.

[LABCAT]

@SleeplessByte tested on both windows 10 and Ubuntu 18 with both blank and basic installation. Changing the CSS doesn’t result in any changes until you refresh your browser.

Works fine when using “create react app” so nothing to do with the set up I’m using 😃 Care to share your configuration?

Should I create a new bug report? or does someone want to reopen this one?

[pztrick]

I encountered this on a vanilla project after adding only the react-static-plugin-stylus plugin.

HMR didn’t work for my Stylus stylesheets.

My work-around is below:

// index.js

import './stylesheets/index.styl'

// ...

if (module && module.hot) {
    module.hot.accept('./app', () => {
        render(App)
    })
    module.hot.addStatusHandler(status=>{
        if(status !== 'apply'){
            return
        }
        (async () => {
            let head = document.getElementsByTagName('head')[0]
            let cssRef = head.querySelector('link')
            let newRef = document.createElement('link')
            newRef.setAttribute('rel', 'stylesheet')
            newRef.setAttribute('type', 'text/css')
            newRef.setAttribute('href', `main.css?c=${Date.now().toString()}`)
            head.appendChild(newRef)
            setImmediate(()=>{cssRef.remove()})
        })()
    })
}

This will reload the transpiled CSS on all code changes. I’m sure there is a better way to do things but I’m not familiar with the HMR life-cycle and API.

Hope this helps someone.