Ignore --tw- variables during internal signature computation

[RobinMalfait]

This PR improves some of the signature computation logic. Right now, when you want to convert [font-weight:400] to font-normal it's not going to work because the signatures don't like up:

/* [font-weight:400] */
.x {
  font-weight: 400;
}

/* font-normal */
.x {
  --tw-font-weight: 400;
  font-weight: 400;
}

So this PR essentially ignores --tw-{property} if the {property} exists with the exact same value.

The main reason we have this, is to make composition of utilities easier.

As with any of these upgrades, they are the expected behavior in most cases, but there could always be a case where you don't want this, but that's why the upgrade tool requires you to review each change before applying it. Intellisense will recommend the simplified class, but it's up to you to decide if you want to apply it or not.

There is a known edge case for leading-{num}, because the property is line-height and the CSS variable is --tw-leading. Right now we map --tw-leading to line-height but we can also update the leading classes to use --tw-line-height instead but that feels like a bigger breaking change if people rely on these internal CSS variables...

[philipp-spiess]

@RobinMalfait Is this an issue of utilities like the filter stuff that all emit the same declarations but only varying variables?

Also being nitpicky: The PR title is a bit confusing. It could help if you prefix it with "Signature Computation: …"

[RobinMalfait]

@RobinMalfait Is this an issue of utilities like the filter stuff that all emit the same declarations but only varying variables?

Also being nitpicky: The PR title is a bit confusing. It could help if you prefix it with "Signature Computation: …"

Updated the title 👍

It is also an issue with filter and stuff, but that's much more scary to even try and normalize imo. This is the current implementation for backdrop-blur-sm (simplified by ignoring all the @property stuff).

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(var(--blur-sm, 8px));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}

I also don't think it's super realistic to to try and migrate [backdrop-filter:blur(8px)] all the way to backdrop-blur-sm because the arbitrary property will only set the blur(8px), but the moment you translate it, then all other filters will take effect which maybe not be what you want?

If we do want something like that, then I think that should be a separate PR 🤔

We also have the issue where -webkit-* properties exists, but that's also a different PR if we want that.

[philipp-spiess]

@RobinMalfait What I'm thinking is if we remove --tw-* from the signature, all filter utilities will have the same signature?

 .blur {
  /* --tw-blur: blur(8px); */
  filter: var(--tw-blur,) var(--tw-brightness,)
    var(--tw-contrast,) var(--tw-grayscale,)
    var(--tw-hue-rotate,) var(--tw-invert,)
    var(--tw-saturate,) var(--tw-sepia,)
    var(--tw-drop-shadow,);
}

.contrast-100 {
  /* --tw-contrast: contrast(100%); */
  filter: var(--tw-blur,) var(--tw-brightness,)
    var(--tw-contrast,) var(--tw-grayscale,)
    var(--tw-hue-rotate,) var(--tw-invert,)
    var(--tw-saturate,) var(--tw-sepia,)
    var(--tw-drop-shadow,);
}

[RobinMalfait]

We're only removing --tw-foo: value; if foo: value exists with the exact same value. So in case of blur --tw-blur: blur(8px) exists, but blur: blur(8px); does not exist because it's a filter property, so the --tw-* is kept.

So the final signature looks like this:

/* blur */
.x {
  --tw-blur: blur(8px);
  filter: var(--tw-blur,)_var(--tw-brightness,)_var(--tw-contrast,)_var(--tw-grayscale,)_var(--tw-hue-rotate,)_var(--tw-invert,)_var(--tw-saturate,)_var(--tw-sepia,)_var(--tw-drop-shadow,);
}

/* contrast-100 */
.x {
  --tw-contrast: contrast(100%);
  filter: var(--tw-blur,)_var(--tw-brightness,)_var(--tw-contrast,)_var(--tw-grayscale,)_var(--tw-hue-rotate,)_var(--tw-invert,)_var(--tw-saturate,)_var(--tw-sepia,)_var(--tw-drop-shadow,);
}