import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { describe, expect, test } from 'vitest'
import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
import { migrateOptimizeModifier } from './migrate-optimize-modifier'
const css = String.raw
const designSystems = new DefaultMap((base: string) => {
return new DefaultMap((input: string) => {
return __unstable__loadDesignSystem(input, { base })
})
})
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')
}
let input = css`
@import 'tailwindcss' ${strategy === 'prefix' ? 'prefix(tw)' : ''};
@theme {
--*: initial;
--color-red-500: red;
}
`
test.each([
['bg-red-500/25', 'bg-red-500/25'],
['bg-red-500/[25%]', 'bg-red-500/25'],
['bg-[#f00]/[0.16]', 'bg-[#f00]/16'],
['bg-red-500/[100%]', 'bg-red-500'],
['bg-red-500/100', 'bg-red-500'],
['group/name', 'group/name'],
])(testName, async (candidate, expected) => {
if (strategy === 'with-variant') {
candidate = `focus:${candidate}`
expected = `focus:${expected}`
} else if (strategy === 'important') {
candidate = `${candidate}!`
expected = `${expected}!`
} else if (strategy === 'prefix') {
candidate = `tw:${candidate.replaceAll('var(--', 'var(--tw-')}`
expected = `tw:${expected.replaceAll('var(--', 'var(--tw-')}`
}
let designSystem = await designSystems.get(__dirname).get(input)
let migrated = migrateOptimizeModifier(designSystem, {}, candidate)
expect(migrated).toEqual(expected)
})
})