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

Astroturf class/animation names break when useAltLoader enabled #706

Open lostfictions opened 3 years ago

lostfictions commented 3 years ago

Hey there, I have a repro for a gnarly little case where Astroturf breaks when the new useAltLoader option is enabled. It works fine when useAltLoader is disabled -- but when it's disabled I instead bump into #705, which is pretty unfortunate since it means there's no working Astroturf configuration available to me.

Here's the repro: https://github.com/lostfictions/astroturf-repro (see comment below for a much simpler reproduction of the issue)

To reproduce:

  1. Clone and run yarn install.
  2. Run yarn start and open the indicated url (usually http://localhost:3000).

  3. You should see the following: image

    The dash should be animated. Inspect the svg <path> element and you should see something like these classes:

    image This class is defined inline using Astroturf in src/pages/index.tsx.

  4. Close the dev server. Now open next.config.js in the repo root and uncomment line 14: // options: { useAltLoader: true }

  5. Run the dev server with yarn start and open the localhost url again. You should see this:

    image

    The classname on our <path> is broken. In fact, if you inspect the element, you will see that all Astroturf classnames in our file have been collapsed together and applied to all React elements they've been interpolated into. Here's the classlist on our <path>:

    image

    Those same classes have been applied to the <path>'s parent <svg> element -- the same pair of classnames has been applied twice, in fact (presumably because it uses the two other Astroturf classes in our file).

    image

This repro isn't as minimal as it could be, but hopefully it helps track the bug down! Seems to be the same issue as https://github.com/4Catalyzer/astroturf/issues/667#issuecomment-828553273.

Thanks again for all your work on the v1 release, incidentally!

lostfictions commented 3 years ago

I got curious to see if this was something Next-specific -- it turns out it's not. Here's a much smaller repro that exhibits the same issue, but without using Next.js or React, just stock webpack and css-loader.

https://github.com/lostfictions/repro-astroturf1-webpack5/tree/classname-mangle-repro

Unlike the above version, it won't render anything, but you can still see the classname issue if you enter the inspector and look at the <svg> and <path> elements.