Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astroturf class/animation names break when useAltLoader enabled #706

Open
lostfictions opened this issue Jun 1, 2021 · 1 comment
Open

Comments

@lostfictions
Copy link
Contributor

lostfictions commented Jun 1, 2021

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

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

@lostfictions
Copy link
Contributor Author

lostfictions commented Jun 1, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant