Astroturf class/animation names break when useAltLoader enabled

[lostfictions]

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:
   

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

   
   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:

   

   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>:

   

   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).

   

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 #667 (comment).

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

[lostfictions]

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.