plugins.test.ts — tailwindcss Source File

Source Code

import { candidate, css, html, json, test } from '../utils'

test(
  'builds the `@tailwindcss/typography` plugin utilities',
  {
    fs: {
      'package.json': json`
        {
          "dependencies": {
            "@tailwindcss/typography": "^0.5.14",
            "tailwindcss": "workspace:^",
            "@tailwindcss/cli": "workspace:^"
          }
        }
      `,
      'index.html': html`
        <div className="prose prose-stone prose-invert">
          <h1>Headline</h1>
          <p>
            Until now, trying to style an article, document, or blog post with Tailwind has been a
            tedious task that required a keen eye for typography and a lot of complex custom CSS.
          </p>
        </div>
      `,
      'src/index.css': css`
        @import 'tailwindcss';
        @plugin '@tailwindcss/typography';
      `,
    },
  },
  async ({ fs, exec, expect }) => {
    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')

    // Verify that `prose-stone` is defined before `prose-invert`
    {
      let contents = await fs.read('dist/out.css')
      let proseInvertIdx = contents.indexOf('.prose-invert')
      let proseStoneIdx = contents.indexOf('.prose-stone')

      expect(proseStoneIdx).toBeLessThan(proseInvertIdx)
    }

    await fs.expectFileToContain('dist/out.css', [
      candidate`prose`,
      ':where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))',
      ':where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *))',
    ])
  },
)

test(
  'builds the `@tailwindcss/forms` plugin utilities',
  {
    fs: {
      'package.json': json`
        {
          "dependencies": {
            "@tailwindcss/forms": "^0.5.7",
            "tailwindcss": "workspace:^",
            "@tailwindcss/cli": "workspace:^"
// ... (150 more lines)