Skip to content

Conversation

@thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Aug 26, 2025

This PR fixes two issues:

  • When a variant is defined by matchVariant it could match unknown values but not apply the variant (because it's unknown). This would result in a utility being output that is the same as a bare utility without variants but a longer name. These were intended to be discarded but weren't done so correctly.
  • Similarly, when we encounter a known value but its not a string the same thing would happen where we'd output a utility without applying the variant. This was also intended to be discarded.

Basically given this code:

matchVariant(
  "foo",
  (value) => `&:is([data-foo='${value}'])`,
  {
    values: {
      DEFAULT: "",
      bar: "bar",
      obj: { some: "object" },
    },
  }
)

And this HTML:

<div class="foo-bar:bg-none foo-[baz]:bg-none foo-baz:bg-none foo-obj:bg-none"></div>

This CSS would be produced:

@layer utilities {
  .foo-bar\:bg-none {
    &:is([data-foo='bar']) {
      background-image: none;
    }
  }
  /* this one shouldn't be here */
  .foo-baz\:bg-none {
    background-image: none;
  }
  /* this one shouldn't be here */
  .foo-obj\:bg-none {
    background-image: none;
  }
  .foo-\[baz\]\:bg-none {
    &:is([data-foo='baz']) {
      background-image: none;
    }
  }
}
@thecrypticace thecrypticace marked this pull request as ready for review August 26, 2025 13:46
@thecrypticace thecrypticace requested a review from a team as a code owner August 26, 2025 13:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants