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

Migrate arbitrary values to bare values #14669

Merged
merged 3 commits into from
Oct 15, 2024
Merged

Conversation

RobinMalfait
Copy link
Member

This PR adds a codemod that can convert arbitrary values to the cleaner bare values if we can.

For example, some classes use arbitrary values such as col-start-[16], but in v4 we have bare values for some plugins that don't really need to adhere to your design system.

In this case, we can convert col-start-[16] to just col-start-16.

Another use case is for utilities that use fractions. For example the aspect-* plugin.

A custom aspect ratio such as aspect-[16/9] can be converted to aspect-16/9.

There are some rules attached to this migration:

  1. We can only migrate arbitrary values that is a single positive integer, or an arbitrary value that is a fraction where the numerator and denominator are both positive integers.
  2. We make sure that some CSS can be generated once its converted to a bare value.

Comment on lines 25 to 32
let percentage = parseFloat(clone.value.value)
if (percentage >= 50 && percentage <= 200) {
changed = true
clone.value = {
kind: 'named',
value: clone.value.value,
fraction: null,
}
Copy link
Member

Choose a reason for hiding this comment

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

I think only whole numbers are valid for bare values but this might also convert e.g. font-stretch-[50.5%] now

Copy link
Member Author

Choose a reason for hiding this comment

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

font-stretch-50.5% does work, but don't know if that should though.... wrote something on Discord about it because it feels a bit inconsistent compared to let's say opacity-50% (doesn't do anything), but opacity-50 does 😅

image

Copy link
Member Author

Choose a reason for hiding this comment

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

Alright, let's clean that up. Created a separate PR to solve the actual issue in the utility: #14670

@RobinMalfait RobinMalfait force-pushed the feat/bare-value-codemods branch from d9ee84f to b436ef9 Compare October 15, 2024 09:28
@RobinMalfait RobinMalfait force-pushed the feat/bare-value-codemods branch from b436ef9 to 0d31180 Compare October 15, 2024 09:40
@RobinMalfait RobinMalfait enabled auto-merge (squash) October 15, 2024 09:44
@RobinMalfait RobinMalfait merged commit 2b13547 into next Oct 15, 2024
1 check passed
@RobinMalfait RobinMalfait deleted the feat/bare-value-codemods branch October 15, 2024 09:45
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.

2 participants