import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test, vi } from 'vitest'
import type { UserConfig } from '../../../../tailwindcss/src/compat/config/types'
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
import * as versions from '../../utils/version'
import { migrateArbitraryVariants } from './migrate-arbitrary-variants'
import { migrateEmptyArbitraryValues } from './migrate-handle-empty-arbitrary-values'
import { migrateModernizeArbitraryValues } from './migrate-modernize-arbitrary-values'
import { migratePrefix } from './migrate-prefix'
vi.spyOn(versions, 'isMajor').mockReturnValue(true)
const css = String.raw
function migrate(designSystem: DesignSystem, userConfig: UserConfig | null, rawCandidate: string) {
for (let migration of [
migrateEmptyArbitraryValues,
migratePrefix,
migrateModernizeArbitraryValues,
migrateArbitraryVariants,
(designSystem: DesignSystem, _: UserConfig | null, rawCandidate: string) => {
return designSystem.canonicalizeCandidates([rawCandidate]).pop() ?? rawCandidate
},
]) {
rawCandidate = migration(designSystem, userConfig, rawCandidate)
}
return rawCandidate
}
test.each([
['group-[]:flex', 'in-[.group]:flex'],
['group-[]/name:flex', 'in-[.group\\/name]:flex'],
['peer-[]:flex', 'peer-[&]:flex'],
['peer-[]/name:flex', 'peer-[&]/name:flex'],
['has-group-[]:flex', 'has-in-[.group]:flex'],
['has-group-[]/name:flex', 'has-in-[.group\\/name]:flex'],
['not-group-[]:flex', 'not-in-[.group]:flex'],
['not-group-[]/name:flex', 'not-in-[.group\\/name]:flex'],
])('%s => %s (%#)', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem(
css`
@import 'tailwindcss';
@theme {
--*: initial;
}
`,
{ base: __dirname },
)
expect(migrate(designSystem, {}, candidate)).toEqual(result)
})
test.each([
['[.foo_&]:tw-flex', 'tw:in-[.foo]:flex'],
['group-[]:tw-flex', 'tw:in-[.tw\\:group]:flex'],
['group-[]/name:tw-flex', 'tw:in-[.tw\\:group\\/name]:flex'],
['peer-[]:tw-flex', 'tw:peer-[&]:flex'],
['peer-[]/name:tw-flex', 'tw:peer-[&]/name:flex'],
['[.group_&]:tw-flex', 'tw:in-[.group]:flex'],
['has-group-[]:tw-flex', 'tw:has-in-[.tw\\:group]:flex'],
['has-group-[]/name:tw-flex', 'tw:has-in-[.tw\\:group\\/name]:flex'],
['not-group-[]:tw-flex', 'tw:not-in-[.tw\\:group]:flex'],
['not-group-[]/name:tw-flex', 'tw:not-in-[.tw\\:group\\/name]:flex'],
])('%s => %s (%#)', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem(
css`
@import 'tailwindcss' prefix(tw);
@theme {
--*: initial;
}
`,
{ base: __dirname },
)
expect(migrate(designSystem, { prefix: 'tw-' }, candidate)).toEqual(result)
})