tailwindcss/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.test.ts
Philipp Spiess e57a2f5a3a
Change casing of utilities with named values to kebab-case to match u… (#18017)
Fixes #16156

## Summary

This PR adds a new 3 -> 4 template migration that changes the casing of
in both utility values and modifier values from camelCase to kebab-case
to match the updated CSS variable names.

## Test plan

- Added integration test, see the diff in the PR.
2025-05-14 14:51:51 +02:00

25 lines
1022 B
TypeScript

import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test, vi } from 'vitest'
import * as versions from '../../utils/version'
import { migrateCamelcaseInNamedValue } from './migrate-camelcase-in-named-value'
vi.spyOn(versions, 'isMajor').mockReturnValue(true)
test.each([
['text-superRed', 'text-super-red'],
['text-red/superOpaque', 'text-red/super-opaque'],
['text-superRed/superOpaque', 'text-super-red/super-opaque'],
// Should not migrate named values in modifiers
['group-hover/superGroup:underline', 'group-hover/superGroup:underline'],
['hover:text-superRed', 'hover:text-super-red'],
['hover:text-red/superOpaque', 'hover:text-red/super-opaque'],
['hover:text-superRed/superOpaque', 'hover:text-super-red/super-opaque'],
])('%s => %s', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
base: __dirname,
})
expect(migrateCamelcaseInNamedValue(designSystem, {}, candidate)).toEqual(result)
})