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

Don't duplicate layer output when scanning content with variants + wildcards #7478

Merged
merged 1 commit into from
Feb 15, 2022

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Feb 15, 2022

Tailwind CSS treats * as special internally. Because of this if it scanned content which contained something like focus:* it would then generate duplicate CSS — including base layers. The best way to fix for this would be to use a Symbol in place of the special character — however the stringy-ness of class candidates is fairly well baked into assumptions across the codebase. Instead, by using new String(…), we get an identical API surface to normal strings along with the behavior of something similar to a Symbol as identity comparisons against "*" will fail since we have a unique, non-interned object.

Fixes #7204

@thecrypticace thecrypticace changed the title Fix variant + wildcard duplication issue Don't duplicate layer output when scanning content with variants + wildcards Feb 15, 2022
@thecrypticace
Copy link
Contributor Author

@RobinMalfait Does this approach seem okay? It feels pretty sound. I'm just not sure if we want to go ahead and try to use proper Symbols instead even though it'd be a good bit more work. I'm not sure if its worth the effort at the moment — thoughts?

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep the uniqueness of new String() is quite clever.
My only concern would be if you have your own custom rules that look something like:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    * {
      color: red;
    }

    .combined,
    * {
      text-align: center;
    }

    @layer base {
      * {
        color: blue;
      }
      .combined,
      * {
        color: red;
      }
    }

But it seems like that works as expected 👍

@thecrypticace
Copy link
Contributor Author

Ah, that's a good test to add though. I'll add that and then merge this in!

This would be better as a symbol but the stringy-ness of class candidates is fairly well baked into assumptions across the codebase. new String + a well placed check seems to solve the problem
@thecrypticace thecrypticace merged commit be5d5c9 into master Feb 15, 2022
@thecrypticace thecrypticace deleted the fix/variant-with-wildcard branch February 15, 2022 18:44
tmattio added a commit to tmattio/opam-repository that referenced this pull request Apr 9, 2022
CHANGES:

### Fixed

- Remove opacity variables from `:visited` pseudo class ([tmattio/opam-tailwindcss#7458](tailwindlabs/tailwindcss#7458))
- Support arbitrary values + calc + theme with quotes ([tmattio/opam-tailwindcss#7462](tailwindlabs/tailwindcss#7462))
- Don't duplicate layer output when scanning content with variants + wildcards ([tmattio/opam-tailwindcss#7478](tailwindlabs/tailwindcss#7478))
- Implement `getClassOrder` instead of `sortClassList` ([tmattio/opam-tailwindcss#7459](tailwindlabs/tailwindcss#7459))
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

Successfully merging this pull request may close these issues.

Bug: some text content can trigger multiple Tailwind builds in the same output css
2 participants