Skip to content

Fix decoration utility ambiguity #6217

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

Merged
merged 2 commits into from
Nov 29, 2021
Merged

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Nov 29, 2021

This PR makes decoration-[3px] work automatically.

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.

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.
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.
@RobinMalfait RobinMalfait force-pushed the fix-decoration-ambiguity branch from d9e62fe to 052534e Compare November 29, 2021 14:23
@RobinMalfait RobinMalfait merged commit 12ea363 into master Nov 29, 2021
@RobinMalfait RobinMalfait deleted the fix-decoration-ambiguity branch November 29, 2021 14:25
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.

1 participant