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
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
convert arbitrary values to bare values
RobinMalfait committed Oct 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit e32e6849b351fc8055ca8cae2af1ddf0dd6cc320
Original file line number Diff line number Diff line change
@@ -3,6 +3,23 @@ import { expect, test } from 'vitest'
import { arbitraryValueToBareValue } from './arbitrary-value-to-bare-value'

test.each([
['aspect-[12/34]', 'aspect-12/34'],
['aspect-[1.2/34]', 'aspect-[1.2/34]'],
['col-start-[7]', 'col-start-7'],
['flex-[2]', 'flex-2'], // `flex` is implemented as static and functional utilities

// Only 50-200% (inclusive) are valid:
// https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage
['font-stretch-[50%]', 'font-stretch-50%'],
['font-stretch-[201%]', 'font-stretch-[201%]'],
['font-stretch-[49%]', 'font-stretch-[49%]'],
// Should stay as-is
['font-stretch-[1/2]', 'font-stretch-[1/2]'],

// This test in itself is a bit flawed because `text-[1/2]` currently
// generates something. Converting it to `text-1/2` doesn't produce anything.
['text-[1/2]', 'text-[1/2]'],

['data-[selected]:flex', 'data-selected:flex'],
['data-[foo=bar]:flex', 'data-[foo=bar]:flex'],

@@ -22,6 +39,10 @@ test.each([
['group-has-aria-[selected]:flex', 'group-has-aria-[selected]:flex'],

['max-lg:hover:data-[selected]:flex!', 'max-lg:hover:data-selected:flex!'],
[
'data-[selected]:aria-[selected="true"]:aspect-[12/34]',
'data-selected:aria-selected:aspect-12/34',
],
])('%s => %s', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
base: __dirname,
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Config } from 'tailwindcss'
import { parseCandidate, type Candidate, type Variant } from '../../../../tailwindcss/src/candidate'
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
import { isPositiveInteger } from '../../../../tailwindcss/src/utils/infer-data-type'
import { segment } from '../../../../tailwindcss/src/utils/segment'
import { printCandidate } from '../candidates'

@@ -12,6 +13,74 @@ export function arbitraryValueToBareValue(
for (let candidate of parseCandidate(rawCandidate, designSystem)) {
let clone = structuredClone(candidate)
let changed = false

// Convert font-stretch-* utilities
if (
clone.kind === 'functional' &&
clone.value?.kind === 'arbitrary' &&
clone.value.dataType === null &&
clone.root === 'font-stretch'
) {
if (clone.value.value.endsWith('%')) {
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

}
}
}

// Convert arbitrary values with positive integers to bare values
// Convert arbitrary values with fractions to bare values
else if (
clone.kind === 'functional' &&
clone.value?.kind === 'arbitrary' &&
clone.value.dataType === null
) {
let parts = segment(clone.value.value, '/')
if (parts.every((part) => isPositiveInteger(part))) {
changed = true

let currentValue = clone.value
let currentModifier = clone.modifier

// E.g.: `col-start-[12]`
// ^^
if (parts.length === 1) {
clone.value = {
kind: 'named',
value: clone.value.value,
fraction: null,
}
}

// E.g.: `aspect-[12/34]`
// ^^ ^^
else {
clone.value = {
kind: 'named',
value: parts[0],
fraction: clone.value.value,
}
clone.modifier = {
kind: 'named',
value: parts[1],
}
}

// Double check that the new value compiles correctly
if (designSystem.compileAstNodes(clone).length === 0) {
clone.value = currentValue
clone.modifier = currentModifier
changed = false
}
}
}

for (let variant of variants(clone)) {
// Convert `data-[selected]` to `data-selected`
if (