migrate-at-apply.test.ts — tailwindcss Source File

Source Code

import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import dedent from 'dedent'
import postcss from 'postcss'
import { expect, it, vi } from 'vitest'
import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
import * as versions from '../../utils/version'
import { migrateAtApply } from './migrate-at-apply'
vi.spyOn(versions, 'isMajor').mockReturnValue(true)

const css = dedent

async function migrate(input: string, config: Config = {}) {
  let designSystem = await __unstable__loadDesignSystem(
    css`
      @import 'tailwindcss';

      /* TODO(perf): Only here to speed up the tests */
      @theme {
        --*: initial;
      }
    `,
    { base: __dirname },
  )

  return postcss()
    .use(
      migrateAtApply({
        designSystem,
        userConfig: config,
      }),
    )
    .process(input, { from: expect.getState().testPath })
    .then((result) => result.css)
}

it('should not migrate `@apply`, when there are no issues', async () => {
  expect(
    await migrate(css`
      .foo {
        @apply flex flex-col items-center;
      }
    `),
  ).toMatchInlineSnapshot(`
    ".foo {
      @apply flex flex-col items-center;
    }"
  `)
})

it('should append `!` to each utility, when using `!important`', async () => {
  expect(
    await migrate(css`
      .foo {
        @apply flex flex-col !important;
      }
    `),
  ).toMatchInlineSnapshot(`
    ".foo {
      @apply flex! flex-col!;
    }"
// ... (74 more lines)