search

astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

css-loader 6.4.0 breaks astroturf #728

Open jsg2021 opened 2 years ago

jsg2021 commented 2 years ago

See https://github.com/webpack-contrib/css-loader/issues/1384#issuecomment-942170586 for more details. The tl;dr is this probably needs to add more data to the virtual module so class names generate correctly.

jquense commented 2 years ago

Looks like there isn't really anything i can do until the team adds an alternative, which they've said they are working on. I would pin the css-loader version below 6.4.0 until then. Or use the older loader option (and lose persistent cache as well)

jquense commented 2 years ago

err maybe if the locals convention was configured to use content hash that would work?

jsg2021 commented 2 years ago

@jquense yep, I've already done so. I'm following along on the css-loader issue

jsg2021 commented 2 years ago

err maybe if the locals convention was configured to use content hash that would work?

Sorry, I just noticed this. Could you elaborate? Is [contenthash] available for localIdentName?

jquense commented 2 years ago

it seems like it? I didn't think so but the webpack thread suggested it was

evnp commented 2 years ago

Hey, just wondering if any changes were planned around this. We're currently working around it by pinning css-loader@6.3.0, needed due to combination of webpack 5 and astroturf+useAltLoader (we've had trouble making the non-alt loader work in dev with webpack 5's caching).

Would be happy to try and help if there's anything that can be done. I unfortunately don't have enough experience with astroturf to understand much of this thread. Really appreciate the library in general, it's a great tool.

jquense commented 2 years ago

I don't think there is anything i can do to fix this without help from the webpack team. If you want to chime in on the webpack issue it might help. I'm happy to do whatever, but currently they left us broken with no real alternative :/

evnp commented 2 years ago

Thanks for the reply, I asked over there. Will try and build some personal understanding of the issue so perhaps I can be of more help.

robbprescott commented 1 year ago

We were having an issue that I think is related to this and I wanted to document it here in case this helps anyone that stumbles in here like I did.

Our CSS-in-JS was being built correctly on the first build and would rebuild correctly once, if a change was made in the CSS-in-JS first, but then after that it completely stopped getting rebuilt and the server had to be restarted to get any new changes. To see that this was happening, I created a dummy loader that just printed out when it was being called so I could see when the CSS and JS files were being compiled.

Adding the useAltLoader: true option for astroturf/loader successfully gets the CSS to rebuild every time.

I'm not exactly sure what's going on there, it seems like the virtual file changes aren't getting picked up by webpack after the first time, but it is really weird that they would get build once. I don't know if this is related to css-loader at all since I wasn't even seeing that get run after the first CSS build went through.

Anyway, it would be nice to have a bit of documentation on useAltLoader, I just stumbled upon it in the code and figured I'd try it out and surprisingly it worked.