Skip to content

Migrate bare values to named values #18000

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 7 commits into from
May 13, 2025

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented May 13, 2025

This PR improves the upgrade tool by also migrating bare values to named values defined in the @theme. It's similar to the existing migration we already had, but specialized for just bare values. This makes it a bit faster as well because we don't have to try and replace a bare value with a bare value.

Recently we shipped some updates dat allowed us to migrate arbitrary values (with square brackets), but we didn't migrate bare values yet.

That means that in this example:

<div class="aspect-[16/9]"></div>
<div class="aspect-16/9"></div>

We migrated this to:

<div class="aspect-video"></div>
<div class="aspect-16/9"></div>

With this change, we will also try and migrate the bare value to a named value. So this example:

<div class="aspect-[16/9]"></div>
<div class="aspect-16/9"></div>

Now becomes:

<div class="aspect-video"></div>
<div class="aspect-video"></div>

Test plan

  1. Added unit tests for the new functionality.
  2. Ran this on a local project

Before:
image

After:
image

This in theory can convert bare values to named values _if_ there exists
a replacement. This is the minimal amount of work required to make that
happen.

But this also means that there is additional unnecessary work involved,
such as:

1. Canonicalizing the value — we bare values don't even include
   whitespace-like characters so this is unnecessary work.
2. If we can't find a replacement using a named value, we will try
   arbitrary values... but it's already an arbitrary value.

Will tackle these in the next few commits.
This will allow us to reuse them later in other migrations, once we
split the arbitrary-utilities migration to also handle the bare value to
named value migration.
This is now moved to its own dedicated migration file
@RobinMalfait RobinMalfait requested a review from a team as a code owner May 13, 2025 14:22
? `${designSystem.theme.prefix}:${input}`
: input,
)
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't we have exactly this implementation of parseCandidate in some other migration? I feel like I've seen this before.

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah yeah, I copied this whole file and deleted what I didn't need. Can move this to the candidates.ts file but should we just call it parseCandidate or something like prefixAwareParseCandidate`

Copy link
Contributor

Choose a reason for hiding this comment

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

Just parseCandidate is fine for now. Can improve the name if we feel it's necessary later.

@RobinMalfait RobinMalfait merged commit 498f9ff into main May 13, 2025
7 checks passed
@RobinMalfait RobinMalfait deleted the feat/migrate-bare-values-to-named-values branch May 13, 2025 15:35
@sumansuhag

This comment was marked as spam.

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.

3 participants