Improve new JIT-compatible CLI (#4558)

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
tailwindlabs · Jun 4, 2021 · 746a126 · 746a126
1 parent 05d26a5
commit 746a126
Show file tree

Hide file tree

Showing 19 changed files with 1,935 additions and 250 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,6 @@
 /cli
 /lib
 /docs
+/peers
 /tests/fixtures/cli-utils.js
 /stubs/*
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 /coverage
 /cli
 /lib
+/peers
 /example
 .vscode
 tailwind.config.js

diff --git a/integrations/execute.js b/integrations/execute.js
@@ -14,7 +14,7 @@ module.exports = function $(command, options = {}) {
 
   let args = command.split(' ')
   command = args.shift()
-  command = path.resolve(cwd, 'node_modules', '.bin', command)
+  command = command === 'node' ? command : path.resolve(cwd, 'node_modules', '.bin', command)
 
   let stdoutMessages = []
   let stderrMessages = []

diff --git a/integrations/tailwindcss-cli/.gitignore b/integrations/tailwindcss-cli/.gitignore
@@ -0,0 +1,4 @@
+dist/
+node_modules/
+!tailwind.config.js
+!index.html
diff --git a/integrations/tailwindcss-cli/package-lock.json b/integrations/tailwindcss-cli/package-lock.json
diff --git a/integrations/tailwindcss-cli/package.json b/integrations/tailwindcss-cli/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "tailwindcss-cli",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css",
+    "test": "jest"
+  },
+  "jest": {
+    "displayName": "Tailwind CSS CLI",
+    "setupFilesAfterEnv": [
+      "<rootDir>/../../jest/customMatchers.js"
+    ]
+  }
+}
diff --git a/integrations/tailwindcss-cli/postcss.config.js b/integrations/tailwindcss-cli/postcss.config.js
@@ -0,0 +1,5 @@
+let path = require('path')
+
+module.exports = {
+  plugins: [require(path.resolve('..', '..'))],
+}
diff --git a/integrations/tailwindcss-cli/src/index.css b/integrations/tailwindcss-cli/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/integrations/tailwindcss-cli/src/index.html b/integrations/tailwindcss-cli/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/integrations/tailwindcss-cli/tailwind.config.js b/integrations/tailwindcss-cli/tailwind.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  purge: ['./src/index.html'],
+  mode: 'jit',
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+}
diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -0,0 +1,232 @@
+let $ = require('../../execute')
+let { css, html, javascript } = require('../../syntax')
+
+let {
+  readOutputFile,
+  appendToInputFile,
+  writeInputFile,
+  waitForOutputFileCreation,
+  waitForOutputFileChange,
+} = require('../../io')({ output: 'dist', input: 'src' })
+
+describe('static build', () => {
+  it('should be possible to generate tailwind output', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+
+    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+  })
+})
+
+describe('watcher', () => {
+  test('classes are generated when the html file changes', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+        .font-normal {
+          font-weight: 400;
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-red-500 {
+          --tw-bg-opacity: 1;
+          background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+        }
+        .font-bold {
+          font-weight: 700;
+        }
+        .font-normal {
+          font-weight: 400;
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
+
+  test('classes are generated when the tailwind.config.js file changes', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold md:font-medium"></div>`)
+
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+        @media (min-width: 768px) {
+          .md\\:font-medium {
+            font-weight: 500;
+          }
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await writeInputFile(
+        '../tailwind.config.js',
+        javascript`
+          module.exports = {
+            purge: ['./src/index.html'],
+            mode: 'jit',
+            darkMode: false, // or 'media' or 'class'
+            theme: {
+              extend: {
+                screens: {
+                  md: '800px'
+                },
+                fontWeight: {
+                  bold: 'bold'
+                }
+              },
+            },
+            variants: {
+              extend: {},
+            },
+            corePlugins: {
+              preflight: false,
+            },
+            plugins: [],
+          }
+      `
+      )
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: bold;
+        }
+        @media (min-width: 800px) {
+          .md\\:font-medium {
+            font-weight: 500;
+          }
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
+
+  test('classes are generated when the index.css file changes', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold btn"></div>`)
+
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await writeInputFile(
+        'index.css',
+        css`
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+
+          @layer components {
+            .btn {
+              @apply px-2 py-1 rounded;
+            }
+          }
+        `
+      )
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .btn {
+          border-radius: 0.25rem;
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+          padding-top: 0.25rem;
+          padding-bottom: 0.25rem;
+        }
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await writeInputFile(
+        'index.css',
+        css`
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+
+          @layer components {
+            .btn {
+              @apply px-2 py-1 rounded bg-red-500;
+            }
+          }
+        `
+      )
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .btn {
+          border-radius: 0.25rem;
+          --tw-bg-opacity: 1;
+          background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
+          padding-top: 0.25rem;
+          padding-bottom: 0.25rem;
+        }
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
+})