index.test.ts

import dedent from 'dedent'
import { mkdir, mkdtemp, readFile, rm, unlink, writeFile } from 'node:fs/promises'
import { tmpdir } from 'node:os'
import path from 'path'
import postcss from 'postcss'
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
import { pretty } from '../../tailwindcss/src/test-utils/run'
import tailwindcss from './index'

// We give this file path to PostCSS for processing.
// This file doesn't exist, but the path is used to resolve imports.
// We place it in packages/ because Vitest runs in the monorepo root,
// and packages/tailwindcss must be a sub-folder for
// @import 'tailwindcss' to work.
function inputCssFilePath() {
  // Including the current test name to ensure that the cache is invalidated per
  // test otherwise the cache will be used across tests.
  return `${__dirname}/fixtures/example-project/input.css?test=${expect.getState().currentTestName}`
}

const css = dedent

async function run(plugin: any, from: string, input: string): Promise<string> {
  let ast = postcss.parse(input)
  for (let runner of plugin.plugins) {
    if (runner.Once) {
      await runner.Once(ast, { postcss, result: { opts: { from }, messages: [] } })
    }
  }
  return ast.toString()
}

test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(`@import 'tailwindcss'`, { from: inputCssFilePath() })

  expect(pretty(result.css)).toMatchSnapshot()

  // Check for dependency messages
  expect(result.messages).toContainEqual({
    type: 'dependency',
    file: expect.stringMatching(/index.html$/g),
    parent: expect.any(String),
    plugin: expect.any(String),
  })
  expect(result.messages).toContainEqual({
    type: 'dependency',
    file: expect.stringMatching(/index.js$/g),
    parent: expect.any(String),
    plugin: expect.any(String),
  })
  expect(result.messages).toContainEqual({
    type: 'dir-dependency',
    dir: expect.stringMatching(/example-project[/|\\]src$/g),
    glob: expect.stringMatching(/^\*\*\/\*/g),
    parent: expect.any(String),
    plugin: expect.any(String),
  })
})

test('output is optimized by Lightning CSS', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(
    css`
      @layer utilities {
        .foo {
          @apply text-[black];
        }
      }

      @layer utilities {
        .bar {
          color: red;
        }
      }
    `,
    { from: inputCssFilePath() },
  )

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    @layer utilities {
      .foo {
        color: #000;
      }

      .bar {
        color: red;
      }
    }
    "
  `)
})

test('@apply can be used without emitting the theme in the CSS file', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(
    css`
      @reference 'tailwindcss/theme.css';
      .foo {
        @apply text-red-500;
      }
    `,
    { from: inputCssFilePath() },
  )

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    .foo {
      color: var(--color-red-500, oklch(63.7% .237 25.331));
    }
    "
  `)
})

describe('processing without specifying a base path', () => {
  let filepath: string
  let dir: string

  beforeEach(async () => {
    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
    await mkdir(dir, { recursive: true })
    filepath = path.join(dir, 'my-test-file.html')
    await writeFile(filepath, `<div class="md:[&:hover]:content-['testing_default_base_path']">`)
  })
  afterEach(() => unlink(filepath))

  test('the current working directory is used by default', async () => {
    using spy = vi.spyOn(process, 'cwd')
    spy.mockReturnValue(dir)

    let processor = postcss([tailwindcss({ optimize: { minify: false } })])

    let result = await processor.process(`@import "tailwindcss"`, { from: inputCssFilePath() })

    expect(result.css).toContain(
      ".md\\:\\[\\&\\:hover\\]\\:content-\\[\\'testing_default_base_path\\'\\]",
    )

    expect(result.messages).toContainEqual({
      type: 'dependency',
      file: expect.stringMatching(/my-test-file.html$/g),
      parent: expect.any(String),
      plugin: expect.any(String),
    })
  })
})

test('fallback to `base` directory when `result.opts.from` is not provided', async () => {
  using _ = vi.spyOn(console, 'warn').mockImplementation(() => {})

  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(`@import 'tailwindcss'`)

  expect(result.css.length).toBeGreaterThan(0)
})

describe('plugins', () => {
  test('local CJS plugin', async () => {
    let processor = postcss([
      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
    ])

    let result = await processor.process(
      css`
        @import 'tailwindcss/utilities';
        @plugin './plugin.js';
      `,
      { from: inputCssFilePath() },
    )

    expect(pretty(result.css)).toMatchInlineSnapshot(`
      "
      .underline {
        text-decoration-line: underline;
      }

      @media (inverted-colors: inverted) {
        .inverted\\:flex {
          display: flex;
        }
      }

      .hocus\\:underline:focus, .hocus\\:underline:hover {
        text-decoration-line: underline;
      }
      "
    `)
  })

  test('local CJS plugin from `@import`-ed file', async () => {
    let processor = postcss([
      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
    ])

    let result = await processor.process(
      css`
        @import 'tailwindcss/utilities';
        @import '../example-project/src/relative-import.css';
      `,
      { from: `${__dirname}/fixtures/another-project/input.css` },
    )

    expect(pretty(result.css)).toMatchInlineSnapshot(`
      "
      .underline {
        text-decoration-line: underline;
      }

      @media (inverted-colors: inverted) {
        .inverted\\:flex {
          display: flex;
        }
      }

      .hocus\\:underline:focus, .hocus\\:underline:hover {
        text-decoration-line: underline;
      }
      "
    `)
  })

  test('published CJS plugin', async () => {
    let processor = postcss([
      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
    ])

    let result = await processor.process(
      css`
        @import 'tailwindcss/utilities';
        @plugin 'internal-example-plugin';
      `,
      { from: inputCssFilePath() },
    )

    expect(pretty(result.css)).toMatchInlineSnapshot(`
      "
      .underline {
        text-decoration-line: underline;
      }

      @media (inverted-colors: inverted) {
        .inverted\\:flex {
          display: flex;
        }
      }

      .hocus\\:underline:focus, .hocus\\:underline:hover {
        text-decoration-line: underline;
      }
      "
    `)
  })
})

test('bail early when Tailwind is not used', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(
    css`
      .custom-css {
        color: red;
      }
    `,
    { from: inputCssFilePath() },
  )

  // `fixtures/example-project` includes an `underline` candidate. But since we
  // didn't use `@tailwind utilities` we didn't scan for utilities.
  expect(result.css).not.toContain('.underline {')

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    .custom-css {
      color: red;
    }
    "
  `)
})

test('handle CSS when only using a `@reference` (we should not bail early)', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(
    css`
      @reference "tailwindcss/theme.css";

      .foo {
        @variant md {
          bar: baz;
        }
      }
    `,
    { from: inputCssFilePath() },
  )

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    @media (min-width: 48rem) {
      .foo {
        bar: baz;
      }
    }
    "
  `)
})

test('handle CSS when using a `@variant` using variants that do not rely on the `@theme`', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(
    css`
      .foo {
        @variant data-is-hoverable {
          bar: baz;
        }
      }
    `,
    { from: inputCssFilePath() },
  )

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    .foo[data-is-hoverable] {
      bar: baz;
    }
    "
  `)
})

test('runs `Once` plugins in the right order', async () => {
  let before = ''
  let after = ''
  let processor = postcss([
    {
      postcssPlugin: 'before',
      Once(root) {
        before = root.toString()
      },
    },
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
    {
      postcssPlugin: 'after',
      Once(root) {
        after = root.toString()
      },
    },
  ])

  let result = await processor.process(
    css`
      @theme {
        --color-red-500: red;
      }
      .custom-css {
        color: theme(--color-red-500);
      }
    `,
    { from: inputCssFilePath() },
  )

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    .custom-css {
      color: red;
    }
    "
  `)
  expect(pretty(before)).toMatchInlineSnapshot(`
    "
    @theme {
      --color-red-500: red;
    }
    .custom-css {
      color: theme(--color-red-500);
    }
    "
  `)
  expect(pretty(after)).toMatchInlineSnapshot(`
    "
    .custom-css {
      color: red;
    }
    "
  `)
})

describe('concurrent builds', () => {
  let dir: string
  beforeEach(async () => {
    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
    await writeFile(path.join(dir, 'index.html'), `<div class="underline"></div>`)
    await writeFile(
      path.join(dir, 'index.css'),
      css`
        @import './dependency.css';
      `,
    )
    await writeFile(
      path.join(dir, 'dependency.css'),
      css`
        @tailwind utilities;
      `,
    )
  })
  afterEach(() => rm(dir, { recursive: true, force: true }))

  test('does experience a race-condition when calling the plugin two times for the same change', async () => {
    using spy = vi.spyOn(process, 'cwd')
    spy.mockReturnValue(dir)

    let from = path.join(dir, 'index.css')
    let input = (await readFile(path.join(dir, 'index.css'))).toString()

    let plugin = tailwindcss({ optimize: { minify: false } })

    let result = await run(plugin, from, input)

    expect(result).toContain('.underline')

    // Ensure that the mtime is updated
    await new Promise((resolve) => setTimeout(resolve, 100))
    await writeFile(
      path.join(dir, 'dependency.css'),
      css`
        @tailwind utilities;
        .red {
          color: red;
        }
      `,
    )

    let promise1 = run(plugin, from, input)
    let promise2 = run(plugin, from, input)

    expect(await promise1).toContain('.red')
    expect(await promise2).toContain('.red')
  })
})

test('rebuilds when the input CSS changes even if the `from` file on disk did not', async () => {
  let dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
  // The `from` file exists on disk with a stable mtime. The input CSS is handed
  // to the plugin directly (as a preprocessor like Sass would produce it), so it
  // can change without `from`'s mtime ever changing.
  await writeFile(path.join(dir, 'index.css'), '')

  let from = path.join(dir, 'index.css')
  let plugin = tailwindcss({ base: dir, optimize: { minify: false } })

  let first = await run(
    plugin,
    from,
    css`
      @tailwind utilities;
      .first {
        @apply underline;
      }
    `,
  )
  let second = await run(
    plugin,
    from,
    css`
      @tailwind utilities;
      .second {
        @apply line-through;
      }
    `,
  )

  expect(first).toContain('.first')
  expect(second).toContain('.second')

  await rm(dir, { recursive: true, force: true })
})

test('does not register the input file as a dependency, even if it is passed in as relative path', async () => {
  let processor = postcss([
    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
  ])

  let result = await processor.process(`@tailwind utilities`, { from: './input.css' })

  expect(pretty(result.css)).toMatchInlineSnapshot(`
    "
    .underline {
      text-decoration-line: underline;
    }
    "
  `)

  // Check for dependency messages
  expect(result.messages).not.toContainEqual({
    type: 'dependency',
    file: expect.stringMatching(/input.css$/g),
    parent: expect.any(String),
    plugin: expect.any(String),
  })
})

describe('error recovery', () => {
  let dir: string
  beforeEach(async () => {
    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
    await writeFile(path.join(dir, 'index.html'), `<div class="underline"></div>`)
    await writeFile(path.join(dir, 'index.css'), css` @import './dependency.css'; `)
    await writeFile(path.join(dir, 'dependency.css'), css` @tailwind utilities; `)
  })
  afterEach(() => rm(dir, { recursive: true, force: true }))

  test('dependency messages are still emitted when a build fails outside of `optimize` mode, so watchers do not lose track of the CSS import graph', async () => {
    let from = path.join(dir, 'index.css')
    let processor = postcss([tailwindcss({ base: dir, optimize: false })])

    let dependencyFile = path.join(dir, 'dependency.css')

    // 1. A successful build establishes `dependency.css` as a known dependency.
    let ok = await processor.process(await readFile(from, 'utf8'), { from })
    expect(ok.css).toContain('.underline')
    expect(ok.messages).toContainEqual({
      type: 'dependency',
      plugin: expect.any(String),
      file: expect.stringMatching(/dependency\.css$/),
      parent: expect.stringMatching(/index\.css$/),
    })

    // Ensure the mtime below is actually observed as a change.
    await new Promise((resolve) => setTimeout(resolve, 10))

    // 2. Introduce a compile error (an unknown utility class) into that same file.
    await writeFile(
      dependencyFile,
      css`
        @tailwind utilities;
        .broken {
          @apply this-class-does-not-exist;
        }
      `,
    )

    // The build must not reject here. Tools like `postcss-loader` (used by webpack)
    // only read `result.messages` -- and therefore only register file dependencies --
    // from a *resolved* result. If this rejects instead, every dependency collected
    // above is invisible to the consumer, and the entire CSS import graph stops being
    // watched until some other, still-watched file happens to change.
    let failed = await processor.process(await readFile(from, 'utf8'), { from })

    expect(failed.warnings().length).toBeGreaterThan(0)
    expect(failed.messages).toContainEqual({
      type: 'dependency',
      plugin: expect.any(String),
      file: expect.stringMatching(/dependency\.css$/),
      parent: expect.stringMatching(/index\.css$/),
    })
  })

  test('still fails the build when `optimize` is enabled, so broken CSS is never shipped', async () => {
    let from = path.join(dir, 'index.css')
    let processor = postcss([tailwindcss({ base: dir, optimize: true })])

    await processor.process(await readFile(from, 'utf8'), { from })

    await new Promise((resolve) => setTimeout(resolve, 10))

    await writeFile(
      path.join(dir, 'dependency.css'),
      css`
        @tailwind utilities;
        .broken {
          @apply this-class-does-not-exist;
        }
      `,
    )

    await expect(processor.process(await readFile(from, 'utf8'), { from })).rejects.toThrow(
      /this-class-does-not-exist/,
    )
  })
})