core-as-postcss-plugin.test.ts — tailwindcss Source File

Architecture documentation for core-as-postcss-plugin.test.ts, a typescript file in the tailwindcss codebase. 3 imports, 0 dependents.

File typescript Oxide 3 imports

Entity Profile

Oxide→ core-as-postcss-plugin.test.ts — tailwindcss Source File

Dependency Diagram

graph LR
  d49ad779_b4b6_84be_f39f_c6bbdbaaa43e["core-as-postcss-plugin.test.ts"]
  7600373a_3645_efb1_bcbb_e7c3fcb813ac["utils.ts"]
  d49ad779_b4b6_84be_f39f_c6bbdbaaa43e --> 7600373a_3645_efb1_bcbb_e7c3fcb813ac
  44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04["test"]
  d49ad779_b4b6_84be_f39f_c6bbdbaaa43e --> 44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  d49ad779_b4b6_84be_f39f_c6bbdbaaa43e --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style d49ad779_b4b6_84be_f39f_c6bbdbaaa43e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe } from 'vitest'
import { css, js, json, test } from '../utils'

const variantConfig = {
  string: {
    'postcss.config.js': js`
      module.exports = {
        plugins: {
          tailwindcss: {},
        },
      }
    `,
  },
  ESM: {
    'postcss.config.mjs': js`
      import tailwindcss from 'tailwindcss'
      export default {
        plugins: [tailwindcss()],
      }
    `,
  },
  CJS: {
    'postcss.config.cjs': js`
      let tailwindcss = require('tailwindcss')
      module.exports = {
        plugins: [tailwindcss()],
      }
    `,
  },
}

describe.each(Object.keys(variantConfig))('%s', (variant) => {
  test(
    `can not use \`tailwindcss\` as a postcss module`,
    {
      fs: {
        ...variantConfig[variant],
        'package.json': json`
          {
            "dependencies": {
              "postcss": "^8",
              "postcss-cli": "^10",
              "tailwindcss": "workspace:^"
            }
          }
        `,
        'src/index.css': css`@import 'tailwindcss';`,
      },
    },
    async ({ exec, expect }) => {
      await expect(
        exec('pnpm postcss src/index.css --output dist/out.css', undefined, { ignoreStdErr: true }),
      ).rejects.toThrowError(
        `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`,
      )
    },
  )
})