Canonicalize dimensions (#19101)

Author: RobinMalfait

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

@@ -1,4 +1,5 @@
 import { cloneCandidate } from '../../../../tailwindcss/src/candidate'
+import { createSignatureOptions } from '../../../../tailwindcss/src/canonicalize-candidates'
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import {
@@ -14,8 +15,9 @@ export function migrateArbitraryVariants(
   _userConfig: Config | null,
   rawCandidate: string,
 ): string {
-  let signatures = computeVariantSignature.get(designSystem)
-  let variants = preComputedVariants.get(designSystem)
+  let signatureOptions = createSignatureOptions(designSystem)
+  let signatures = computeVariantSignature.get(signatureOptions)
+  let variants = preComputedVariants.get(signatureOptions)
 
   for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
     // We are only interested in the variants

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

@@ -17,7 +17,7 @@ function migrate(designSystem: DesignSystem, userConfig: UserConfig | null, rawC
     migratePrefix,
     migrateModernizeArbitraryValues,
     migrateArbitraryVariants,
-    (designSystem: DesignSystem, _, rawCandidate: string) => {
+    (designSystem: DesignSystem, _: UserConfig | null, rawCandidate: string) => {
       return designSystem.canonicalizeCandidates([rawCandidate]).pop() ?? rawCandidate
     },
   ]) {

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

@@ -1,5 +1,6 @@
 import fs from 'node:fs/promises'
 import path, { extname } from 'node:path'
+import { createSignatureOptions } from '../../../../tailwindcss/src/canonicalize-candidates'
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { computeUtilitySignature } from '../../../../tailwindcss/src/signatures'
@@ -39,11 +40,10 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   migrateModernizeArbitraryValues,
 ]
 
-let migrateCached = new DefaultMap<
-  DesignSystem,
-  DefaultMap<Config | null, DefaultMap<string, Promise<string>>>
->((designSystem) => {
-  return new DefaultMap((userConfig) => {
+let migrateCached = new DefaultMap((designSystem: DesignSystem) => {
+  let options = createSignatureOptions(designSystem)
+
+  return new DefaultMap((userConfig: Config | null) => {
     return new DefaultMap(async (rawCandidate) => {
       let original = rawCandidate
 
@@ -57,7 +57,7 @@ let migrateCached = new DefaultMap<
       // Verify that the candidate actually makes sense at all. E.g.: `duration`
       // is not a valid candidate, but it will parse because `duration-<number>`
       // exists.
-      let signature = computeUtilitySignature.get(designSystem).get(rawCandidate)
+      let signature = computeUtilitySignature.get(options).get(rawCandidate)
       if (typeof signature !== 'string') return original
 
       return rawCandidate

packages/tailwindcss/src/canonicalize-candidates.test.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, test } from 'vitest'
 import { __unstable__loadDesignSystem } from '.'
+import type { CanonicalizeOptions } from './intellisense'
 import { DefaultMap } from './utils/default-map'
 
 const css = String.raw
@@ -63,7 +64,12 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     return candidate
   }
 
-  async function expectCanonicalization(input: string, candidate: string, expected: string) {
+  async function expectCanonicalization(
+    input: string,
+    candidate: string,
+    expected: string,
+    options?: CanonicalizeOptions,
+  ) {
     candidate = prepare(candidate)
     expected = prepare(expected)
 
@@ -72,7 +78,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     }
 
     let designSystem = await designSystems.get(__dirname).get(input)
-    let [actual] = designSystem.canonicalizeCandidates([candidate])
+    let [actual] = designSystem.canonicalizeCandidates([candidate], options)
 
     try {
       expect(actual).toBe(expected)
@@ -937,3 +943,22 @@ describe('theme to var', () => {
     ])
   })
 })
+
+describe('options', () => {
+  test('normalize `rem` units to `px`', async () => {
+    let designSystem = await __unstable__loadDesignSystem(
+      css`
+        @tailwind utilities;
+        @theme {
+          --spacing: 0.25rem;
+        }
+      `,
+      { base: __dirname },
+    )
+
+    expect(designSystem.canonicalizeCandidates(['m-[16px]'])).toEqual(['m-[16px]'])
+    expect(designSystem.canonicalizeCandidates(['m-[16px]'], { rem: 16 })).toEqual(['m-4'])
+    expect(designSystem.canonicalizeCandidates(['m-[16px]'], { rem: 64 })).toEqual(['m-1'])
+    expect(designSystem.canonicalizeCandidates(['m-[16px]'])).toEqual(['m-[16px]']) // Ensure options don't influence shared state
+  })
+})