Fix decoration utility ambiguity (#6217)

* remove `any` data type for decoration color plugin

The main reason for the `any` type is so that we don't have to parse the
value and can assume that this plugin handles "any" value you give it.

This is useful because `decoration-[var(--something)]` would be
correctly translated to the correct decoration property. However, we
introduce another plugin with the same `decoration` prefix.

This means that now both `textDecorationColor` and
`textDecorationThickness` have the same base utility name: `decoration`.

- `textDecorationColor` had ['color', 'any']
- `textDecorationThickness` had ['length', 'percentage']

This means that `3px` fit both in the `length` data type of the
`textDecorationThickness` plugin and in the `any` data type of the
`textDecorationColor` plugin.

Removing the `any` fixes this.

TL;DR: Only have `any` when there are no conflicting utility names.

* remove utility that doesn't generate css

Having `decoration-[var(--abc)]` is ambiguous because there are multiple
plugins that have a `decoration` utility name. In order for this to work
you have to prefix it with the type: `decoration-[color:var(--abc)]`
which is already tested in this file.
This commit is contained in:
Robin Malfait 2021-11-29 15:25:43 +01:00 • committed by GitHub
parent 6b82ca89bc
commit 12ea363e1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 5 deletions

View file

@ -1670,7 +1670,7 @@ export let corePlugins = {
return { 'text-decoration-color': toColorValue(value) }
},
},
{ values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
{ values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
)
},