Migrate CLI test to the new integration test setup

Author: philipp-spiess

integrations/cli/index.test.ts

@@ -0,0 +1,93 @@
+import path from 'node:path'
+import { expect } from 'vitest'
+import { css, html, js, json, stripTailwindComment, test, yaml } from '../utils'
+
+test(
+  'works with production builds',
+  {
+    fs: {
+      'package.json': json` {} `,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - a
+      `,
+      'a/package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'a/index.html': html`
+        <div
+          class="underline 2xl:font-bold hocus:underline inverted:flex"
+        ></div>
+      `,
+      'a/plugin.js': js`
+        module.exports = function ({ addVariant }) {
+          addVariant('inverted', '@media (inverted-colors: inverted)')
+          addVariant('hocus', ['&:focus', '&:hover'])
+        }
+      `,
+      'a/src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @content '../../b/src/**/*.js';
+        @plugin '../plugin.js';
+      `,
+      'a/src/index.js': js`
+        const className = "content-['a/src/index.js']"
+        module.exports = { className }
+      `,
+      'b/src/index.js': js`
+        const className = "content-['b/src/index.js']"
+        module.exports = { className }
+      `,
+    },
+  },
+  async ({ root, fs, exec }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
+      cwd: path.join(root, 'a'),
+    })
+
+    expect(stripTailwindComment(await fs.read('a/dist/out.css'))).toMatchInlineSnapshot(`
+      ".underline {
+        text-decoration-line: underline;
+      }
+      .content-\\[\\'a\\/src\\/index\\.js\\'\\] {
+        --tw-content: 'a/src/index.js';
+        content: var(--tw-content);
+      }
+      .content-\\[\\'b\\/src\\/index\\.js\\'\\] {
+        --tw-content: 'b/src/index.js';
+        content: var(--tw-content);
+      }
+      .inverted\\:flex {
+        @media (inverted-colors: inverted) {
+          display: flex;
+        }
+      }
+      .hocus\\:underline {
+        &:focus {
+          text-decoration-line: underline;
+        }
+        &:hover {
+          text-decoration-line: underline;
+        }
+      }
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+      @property --tw-content {
+        syntax: "*";
+        inherits: false;
+        initial-value: "";
+      }"
+    `)
+  },
+)

integrations/utils.ts

@@ -11,27 +11,38 @@ import { test as defaultTest } from 'vitest'
 export let css = dedent
 export let html = dedent
 export let ts = dedent
+export let js = dedent
 export let json = dedent
+export let yaml = dedent
 
 const REPO_ROOT = path.join(__dirname, '..')
+const PUBLIC_PACKAGES = (await fs.readdir(path.join(REPO_ROOT, 'dist'))).map((name) =>
+  name.replace('tailwindcss-', '@tailwindcss/').replace('.tgz', ''),
+)
 
 interface SpawnedProcess {
   dispose: () => void
   onStdout: (predicate: (message: string) => boolean) => Promise<void>
   onStderr: (predicate: (message: string) => boolean) => Promise<void>
 }
 
+interface ChildProcessOptions {
+  cwd?: string
+}
+
 interface TestConfig {
   fs: {
     [filePath: string]: string
   }
 }
 interface TestContext {
-  exec(command: string): Promise<string>
-  spawn(command: string): Promise<SpawnedProcess>
+  root: string
+  exec(command: string, options?: ChildProcessOptions): Promise<string>
+  spawn(command: string, options?: ChildProcessOptions): Promise<SpawnedProcess>
   getFreePort(): Promise<number>
   fs: {
     write(filePath: string, content: string): Promise<void>
+    read(filePath: string): Promise<string>
     glob(pattern: string): Promise<[string, string][]>
   }
 }
@@ -59,7 +70,7 @@ export function test(
       let full = path.join(root, filename)
 
       if (filename.endsWith('package.json')) {
-        content = overwriteVersionsInPackageJson(content)
+        content = await overwriteVersionsInPackageJson(content)
       }
 
       // Ensure that files written on Windows use \r\n line ending
@@ -92,10 +103,15 @@ export function test(
     options.onTestFinished(dispose)
 
     let context = {
-      async exec(command: string) {
-        return execSync(command, { cwd: root }).toString()
+      root,
+      async exec(command: string, childProcessOptions: ChildProcessOptions = {}) {
+        return execSync(command, {
+          cwd: root,
+          stdio: 'pipe',
+          ...childProcessOptions,
+        }).toString()
       },
-      async spawn(command: string) {
+      async spawn(command: string, childProcessOptions: ChildProcessOptions = {}) {
         let resolveDisposal: (() => void) | undefined
         let rejectDisposal: ((error: Error) => void) | undefined
         let disposePromise = new Promise<void>((resolve, reject) => {
@@ -109,6 +125,7 @@ export function test(
           env: {
             ...process.env,
           },
+          ...childProcessOptions,
         })
 
         function dispose() {
@@ -217,6 +234,9 @@ export function test(
       },
       fs: {
         write,
+        async read(filePath: string) {
+          return await fs.readFile(path.join(root, filePath), 'utf8')
+        },
         async glob(pattern: string) {
           let files = await fastGlob(pattern, { cwd: root })
           return Promise.all(
@@ -242,26 +262,30 @@ function pkgToFilename(name: string) {
   return `${name.replace('@', '').replace('/', '-')}.tgz`
 }
 
-function overwriteVersionsInPackageJson(content: string): string {
+async function overwriteVersionsInPackageJson(content: string): Promise<string> {
   let json = JSON.parse(content)
 
   // Resolve all workspace:^ versions to local tarballs
-  ;['dependencies', 'devDependencies', 'peerDependencies'].forEach((key) => {
-    let dependencies = json[key] || {}
-    for (let dependency in dependencies) {
-      if (dependencies[dependency] === 'workspace:^') {
-        dependencies[dependency] = resolveVersion(dependency)
+  ;['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'].forEach(
+    (key) => {
+      let dependencies = json[key] || {}
+      for (let dependency in dependencies) {
+        if (dependencies[dependency] === 'workspace:^') {
+          dependencies[dependency] = resolveVersion(dependency)
+        }
       }
-    }
-  })
+    },
+  )
 
   // Inject transitive dependency overwrite. This is necessary because
   // @tailwindcss/vite internally depends on a specific version of
   // @tailwindcss/oxide and we instead want to resolve it to the locally built
   // version.
   json.pnpm ||= {}
   json.pnpm.overrides ||= {}
-  json.pnpm.overrides['@tailwindcss/oxide'] = resolveVersion('@tailwindcss/oxide')
+  for (let pkg of PUBLIC_PACKAGES) {
+    json.pnpm.overrides[pkg] = resolveVersion(pkg)
+  }
 
   return JSON.stringify(json, null, 2)
 }

packages/@tailwindcss-cli/package.json

@@ -36,10 +36,10 @@
     "picocolors": "^1.0.1",
     "postcss": "8.4.24",
     "postcss-import": "^16.1.0",
-    "tailwindcss": "workspace:^",
-    "internal-postcss-fix-relative-paths": "workspace:^"
+    "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/postcss-import": "^14.0.3"
+    "@types/postcss-import": "^14.0.3",
+    "internal-postcss-fix-relative-paths": "workspace:^"
   }
 }

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -2,6 +2,7 @@ import watcher from '@parcel/watcher'
 import { clearCache, scanDir, type ChangedContent, type GlobEntry } from '@tailwindcss/oxide'
 import fixRelativePathsPlugin from 'internal-postcss-fix-relative-paths'
 import { Features, transform } from 'lightningcss'
+import { createRequire } from 'module'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
@@ -20,6 +21,7 @@ import {
 } from '../../utils/renderer'
 import { resolve } from '../../utils/resolve'
 import { drainStdin, outputFile } from './utils'
+const require = createRequire(import.meta.url)
 
 const css = String.raw