Invalidate context when main css changes (#7626)

* Invalidate context when CSS changes

* Remove invalidation count check

* Add sass integration test

* Update changelog

integrations/rollup-sass/.gitignore

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

integrations/rollup-sass/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "rollup.js",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --runInBand --forceExit"
+  },
+  "jest": {
+    "testTimeout": 10000,
+    "displayName": "rollup.js",
+    "setupFilesAfterEnv": ["<rootDir>/../../jest/customMatchers.js"]
+  },
+  "devDependencies": {
+    "rollup": "^2.48.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.49.9"
+  }
+}

integrations/rollup-sass/postcss.config.js

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

integrations/rollup-sass/rollup.config.js

@@ -0,0 +1,14 @@
+import postcss from 'rollup-plugin-postcss'
+
+export default {
+  input: './src/index.js',
+  output: {
+    file: './dist/index.js',
+    format: 'cjs',
+  },
+  plugins: [
+    postcss({
+      extract: true,
+    }),
+  ],
+}

integrations/rollup-sass/src/imported.scss

@@ -0,0 +1 @@
+// Stub

integrations/rollup-sass/src/index.html

@@ -0,0 +1,9 @@
+<!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/rollup-sass/src/index.js

@@ -0,0 +1 @@
+import './index.scss'

integrations/rollup-sass/src/index.scss

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "./imported";

integrations/rollup-sass/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: ['./src/index.html'],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+}

integrations/rollup-sass/tests/integration.test.js

@@ -0,0 +1,303 @@
+let $ = require('../../execute')
+let { css, html, javascript } = require('../../syntax')
+
+let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
+  output: 'dist',
+  input: 'src',
+})
+
+function ready(message) {
+  return message.includes('created')
+}
+
+describe('static build', () => {
+  it('should be possible to generate tailwind output', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+
+    await $('rollup -c', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    expect(await readOutputFile('index.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 = $('rollup -c --watch')
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+        .font-normal {
+          font-weight: 400;
+        }
+      `
+    )
+
+    await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .bg-red-500 {
+          --tw-bg-opacity: 1;
+          background-color: rgb(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 = $('rollup -c --watch')
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+        @media (min-width: 768px) {
+          .md\:font-medium {
+            font-weight: 500;
+          }
+        }
+      `
+    )
+
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+          module.exports = {
+            content: ['./src/index.html'],
+            theme: {
+              extend: {
+                screens: {
+                  md: '800px'
+                },
+                fontWeight: {
+                  bold: 'bold'
+                }
+              },
+            },
+            corePlugins: {
+              preflight: false,
+            },
+            plugins: [],
+          }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.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="btn font-bold"></div>`)
+
+    let runningProcess = $('rollup -c --watch')
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await writeInputFile(
+      'index.scss',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @layer components {
+          .btn {
+            @apply rounded px-2 py-1;
+          }
+        }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.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 writeInputFile(
+      'index.scss',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @layer components {
+          .btn {
+            @apply rounded bg-red-500 px-2 py-1;
+          }
+        }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .btn {
+          border-radius: 0.25rem;
+          --tw-bg-opacity: 1;
+          background-color: rgb(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()
+  })
+
+  test(`classes are generated when the imported.scss file changes`, async () => {
+    await writeInputFile('index.html', html`<div class="btn font-bold"></div>`)
+
+    let runningProcess = $('rollup -c --watch')
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await writeInputFile(
+      'index.scss',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @import './imported';
+      `
+    )
+
+    await writeInputFile(
+      'imported.scss',
+      css`
+        @layer components {
+          .btn {
+            @apply rounded px-2 py-1;
+          }
+        }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.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 writeInputFile(
+      'imported.scss',
+      css`
+        @layer components {
+          .btn {
+            @apply rounded bg-red-500 px-2 py-1;
+          }
+        }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('index.css')).toIncludeCss(
+      css`
+        .btn {
+          border-radius: 0.25rem;
+          --tw-bg-opacity: 1;
+          background-color: rgb(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()
+  })
+})