Integrations setup (#4354)

* add integration test tools

* setup jest in the integrations folder

* add `test:integrations` script

The default `npm test` script will ignore all the tests in the
`integrations` folder.

* add integration tests with `webpack 5`

* add integration tests with `postcss-cli`

* add `npm run install:integrations` script

This script will run `npm install` in every integration, and in the
integrations folder itself (to setup Jest for example).

* add `toIncludeCss` custom matcher

* increate Jest timeout for integration tests

* add integration tests with `vite`

* add integration tests with `webpack 4`

* add isomorphic fetch

* add the ability to wait for specific stdout/stderr output

* write vite tests, assert using API calls

We will wait for the correct stdout/stderr output, once we know that we
can request the fresh css, we will fetch it and make assertions
accordingly.

Port is currently hardcoded, maybe we should use a packaage to ensure
that we use a free port.

* add integration tests with `rollup`

* add integration tests with `parcel`

* run all integration tests in band

* add .gitignore in integrations folder

integrations/postcss-cli/.gitignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+!tailwind.config.js
+!index.html

integrations/postcss-cli/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "postcss-cli",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "NODE_ENV=production postcss ./src/index.css -o ./dist/main.css",
+    "test": "jest"
+  },
+  "jest": {
+    "displayName": "PostCSS CLI",
+    "setupFilesAfterEnv": [
+      "<rootDir>/../../jest/customMatchers.js"
+    ]
+  },
+  "devDependencies": {
+    "postcss": "^8.2.15",
+    "postcss-cli": "^8.3.1"
+  }
+}

integrations/postcss-cli/postcss.config.js

@@ -0,0 +1,5 @@
+let path = require('path')
+
+module.exports = {
+  plugins: [require(path.resolve('..', '..'))],
+}

integrations/postcss-cli/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

integrations/postcss-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>

integrations/postcss-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: [],
+}

integrations/postcss-cli/tests/integration.test.js

@@ -0,0 +1,238 @@
+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 $('postcss ./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 = $('postcss ./src/index.css -o ./dist/main.css -w', {
+      env: { TAILWIND_MODE: 'watch' },
+    })
+
+    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 = $('postcss ./src/index.css -o ./dist/main.css -w', {
+      env: { TAILWIND_MODE: 'watch' },
+    })
+
+    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 = $('postcss ./src/index.css -o ./dist/main.css -w', {
+      env: { TAILWIND_MODE: 'watch' },
+    })
+
+    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()
+  })
+})