CSS values don't cause cascading updates

[tj]

Not sure where to report, but I'm seeing that only files that you edit are receiving value (https://github.com/css-modules/postcss-modules-values) changes. Is this the intended behaviour or possibly a bug? Took me a few minutes to realize what was going on, results popping in minutes later. Also if you have a file like colors.css, edit a value, nothing sees the change, until you edit those files.

I don't know the underlying mechanism for browserify etc so I can't comment on what would be going on, but it seems broken.

cheers

[tivac]

Are you using watchify? It looks like css-modulesify doesn't listen for the update event from watchify and remove the updated files from its cache.

I ran into that with modular-css as well, tivac/modular-css#30 and fixed it by adding an update listener to my browserify plugin that removes the changed files from its cache so it can use the updated file contents.

https://github.com/tivac/modular-css/blob/master/src/browserify.js#L123-L127

[tj]

Ahh interesting, yep I am using browserify/watchify via the CLI

[joshwnj]

Thanks for reporting it, definitely a bug.

And thanks for the notes @tivac

I haven't looked at fixing this in css-modulesify yet, as there are a couple of other improvements to make. Instead, I've been trying out an alternate approach which is now pretty close to feature parity with css-modulesify but fixes things like the bug described here.

There are still some changes I want to make, and then we'll consider whether it will replace css-modulesify (as a major version) or stay its own thing: https://github.com/joshwnj/cmify

Also works great with hot reloading (via browserify-hmr): https://github.com/joshwnj/css-modules-starter-kit/tree/postcss

[tj]

hmm seems like it never detects a change to produce the --output file actually. Refresh works fine but otherwise no file is created, preventing things like browsersync from working.

[joshwnj]

Interesting, I haven't used browsersync. @tj are you using browsersync in a way that wouldn't also be be suitably solved by browserify-hmr?

[tj]

Is browserify-hmr supposed to support CSS? I was using it for a while but ended up removing it since only it only supports stateful components and I didn't want to sprinkle the 'ud' module all over. I just thought that when you edit the css that it would save out to whatever your --output happens to be. I'm not really sure what state of the art is to be honest haha, too many options

[gersomvg]

I've got the same issue here. I need to do an additional save on one of the involved CSS files before the result of a changed value in colors.css actually streams to the browser with BrowserSync. Let me know if there are any workarounds! 😄

[joshwnj]

Quick status update, I've got a solution for this working locally that I hope to put into a PR, once I've checked it a bit more thoroughly. So far @values are being propagated correctly in things like browser-sync and budo.

[spenserw]

@joshwnj What is the status on that PR?

[joshwnj]

@spenserw ow, it's been a while hasn't it :P Life got suddenly busy. I'll put some more heat on this one.

[joshwnj]

@spenserw back from holidays now :) when you have a moment could you please try #108 and let me know if it's working for you?

[spenserw]

@joshwnj Will try as soon as I get a chance, thanks for the quick turnaround time!