convert arbitrary rem value to bare value

This keeps the spacing scale modifier into account to make sure the
migration is safe.

packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-utilities.test.ts

@@ -97,6 +97,9 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     // Arbitrary value with inferred data type, to more specific arbitrary value
     ['bg-[123px]', 'bg-position-[123px]'],
 
+    // Arbitrary value with spacing mul
+    ['w-[64rem]', 'w-256'],
+
     // Complex arbitrary property to arbitrary value
     [
       '[grid-template-columns:repeat(2,minmax(100px,1fr))]',
@@ -291,3 +294,56 @@ test('migrate a arbitrary property without spaces, to a theme value with spaces
   let migrated = migrate(designSystem, {}, candidate)
   expect(migrated).toEqual(expected)
 })
+
+describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', (strategy) => {
+  let testName = '%s => %s (%#)'
+  if (strategy === 'with-variant') {
+    testName = testName.replaceAll('%s', 'focus:%s')
+  } else if (strategy === 'important') {
+    testName = testName.replaceAll('%s', '%s!')
+  } else if (strategy === 'prefix') {
+    testName = testName.replaceAll('%s', 'tw:%s')
+  }
+  test.each([
+    // Default spacing scale
+    ['w-[64rem]', 'w-256', '0.25rem'],
+
+    // Keep arbitrary value if units are different
+    ['w-[124px]', 'w-[124px]', '0.25rem'],
+
+    // Keep arbitrary value if bare value doesn't fit in steps of .25
+    ['w-[0.123rem]', 'w-[0.123rem]', '0.25rem'],
+
+    // Custom pixel based spacing scale
+    ['w-[123px]', 'w-123', '1px'],
+    ['w-[256px]', 'w-128', '2px'],
+  ])(testName, async (candidate, expected, spacing) => {
+    if (strategy === 'with-variant') {
+      candidate = `focus:${candidate}`
+      expected = `focus:${expected}`
+    } else if (strategy === 'important') {
+      candidate = `${candidate}!`
+      expected = `${expected}!`
+    } else if (strategy === 'prefix') {
+      // Not only do we need to prefix the candidate, we also have to make
+      // sure that we prefix all CSS variables.
+      candidate = `tw:${candidate.replaceAll('var(--', 'var(--tw-')}`
+      expected = `tw:${expected.replaceAll('var(--', 'var(--tw-')}`
+    }
+
+    let input = css`
+      @import 'tailwindcss' ${strategy === 'prefix' ? 'prefix(tw)' : ''};
+
+      @theme {
+        --*: initial;
+        --spacing: ${spacing};
+      }
+    `
+    let designSystem = await __unstable__loadDesignSystem(input, {
+      base: __dirname,
+    })
+
+    let migrated = migrate(designSystem, {}, candidate)
+    expect(migrated).toEqual(expected)
+  })
+})

packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-utilities.ts

@@ -76,6 +76,34 @@ const baseReplacementsCache = new DefaultMap<DesignSystem, Map<string, Candidate
   () => new Map<string, Candidate>(),
 )
 
+const spacing = new DefaultMap<DesignSystem, DefaultMap<string, number | null>>((ds) => {
+  let spacingMultiplier = ds.resolveThemeValue('--spacing')
+  let value: number | null = null
+  let unit: string | null = null
+
+  if (typeof spacingMultiplier === 'string') {
+    let match = /(?<value>(\d*)?\.?\d+)(?<unit>.*)/.exec(spacingMultiplier)
+    if (match) {
+      value = Number(match.groups?.value)
+      unit = match.groups?.unit ?? null
+    }
+  }
+
+  return new DefaultMap<string, number | null>((input) => {
+    if (value === null || unit === null) return null
+
+    let match = /(?<value>(\d*)?\.?\d+)(?<unit>.*)/.exec(input)
+    if (match === null) return null
+
+    let myValue = Number(match.groups?.value)
+    let myUnit = match.groups?.unit ?? null
+
+    if (myUnit !== unit) return null
+
+    return myValue / value
+  })
+})
+
 export function migrateArbitraryUtilities(
   designSystem: DesignSystem,
   _userConfig: Config | null,
@@ -224,7 +252,10 @@ export function migrateArbitraryUtilities(
       // to find functional utilities that also set this property.
       let value =
         candidate.kind === 'arbitrary' ? candidate.value : (candidate.value?.value ?? null)
+
       if (value !== null) {
+        let bareValue = spacing.get(designSystem).get(value)
+
         for (let root of designSystem.utilities.keys('functional')) {
           // Try as bare value
           for (let replacementCandidate of parseCandidate(designSystem, `${root}-${value}`)) {
@@ -241,6 +272,25 @@ export function migrateArbitraryUtilities(
             }
           }
 
+          // Try spacing scale. E.g.:
+          //
+          // - `w-[64rem]` → `w-256`
+          if (bareValue !== null) {
+            for (let replacementCandidate of parseCandidate(designSystem, `${root}-${bareValue}`)) {
+              yield replacementCandidate
+            }
+
+            // Try spacing scale with modifier
+            if (candidate.modifier) {
+              for (let replacementCandidate of parseCandidate(
+                designSystem,
+                `${root}-${bareValue}${candidate.modifier}`,
+              )) {
+                yield replacementCandidate
+              }
+            }
+          }
+
           // Try as arbitrary value
           for (let replacementCandidate of parseCandidate(designSystem, `${root}-[${value}]`)) {
             yield replacementCandidate

packages/@tailwindcss-upgrade/src/codemods/template/signatures.ts

@@ -173,6 +173,52 @@ export const computeUtilitySignature = new DefaultMap<
             node.value = ValueParser.toCss(valueAst)
           }
 
+          // Very basic `calc(…)` constant folding to handle the spacing scale
+          // multiplier:
+          //
+          // Input:  `--spacing(4)`
+          //       → `calc(var(--spacing, 0.25rem) * 4)`
+          //       → `calc(0.25rem * 4)`       ← this is the case we will see
+          //                                     after inlining the variable
+          //       → `1rem`
+          if (node.value.includes('calc')) {
+            let folded = false
+            let valueAst = ValueParser.parse(node.value)
+            ValueParser.walk(valueAst, (valueNode, { replaceWith }) => {
+              if (valueNode.kind !== 'function') return
+              if (valueNode.value !== 'calc') return
+
+              // [
+              //   { kind: 'word', value: '0.25rem' },            0
+              //   { kind: 'separator', value: ' ' },             1
+              //   { kind: 'word', value: '*' },                  2
+              //   { kind: 'separator', value: ' ' },             3
+              //   { kind: 'word', value: '256' }                 4
+              // ]
+              if (valueNode.nodes.length !== 5) return
+              if (valueNode.nodes[2].kind !== 'word' && valueNode.nodes[2].value !== '*') return
+
+              let match = /^(?<value>-?(\d*)?\.?\d+)(?<unit>.*)$/.exec(valueNode.nodes[0].value)
+              if (match === null) return
+
+              let value = Number(match.groups?.value)
+              if (Number.isNaN(value)) return
+
+              let unit = match.groups?.unit ?? null
+              if (unit === null) return
+
+              let multiplier = Number(valueNode.nodes[4].value)
+              if (Number.isNaN(multiplier)) return
+
+              folded = true
+              replaceWith(ValueParser.parse(`${value * multiplier}${unit}`))
+            })
+
+            if (folded) {
+              node.value = ValueParser.toCss(valueAst)
+            }
+          }
+
           // We will normalize the `node.value`, this is the same kind of logic
           // we use when printing arbitrary values. It will remove unnecessary
           // whitespace.