Add @config support (#9405)

* Refactor CLI * Add `@config` support * Update changelog Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
tailwindlabs · Sep 23, 2022 · 5ea752e · 5ea752e
1 parent bf44941
commit 5ea752e
Show file tree

Hide file tree

Showing 14 changed files with 1,095 additions and 807 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
 - Add new `collapse` utility for `visibility: collapse` ([#9181](https://github.com/tailwindlabs/tailwindcss/pull/9181))
 - Allow resolving content paths relative to the config file ([#9396](https://github.com/tailwindlabs/tailwindcss/pull/9396))
+- Add `@config` support ([#9405](https://github.com/tailwindlabs/tailwindcss/pull/9405))
 
 ### Fixed
 

diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -1,3 +1,4 @@
+let fs = require('fs')
 let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
 
@@ -88,6 +89,108 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can read from a config file from an @config directive', async () => {
+    await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @config "./tailwind.config.js";
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      'tailwind.config.js',
+      javascript`
+        module.exports = {
+          content: {
+            relative: true,
+            files: ['./index.html'],
+          },
+          theme: {
+            extend: {
+              colors: {
+                yellow: '#ff0',
+              }
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-yellow {
+          --tw-bg-opacity: 1;
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+        }
+      `
+    )
+  })
+
+  it('can read from a config file from an @config directive inside an @import from postcss-import', async () => {
+    await fs.promises.mkdir('./src/config', { recursive: true })
+
+    await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
+    await writeInputFile(
+      'config/myconfig.css',
+      css`
+        @config "../tailwind.config.js";
+      `
+    )
+    await writeInputFile(
+      'index.css',
+      css`
+        @import './config/myconfig';
+        @import 'tailwindcss/base';
+        @import 'tailwindcss/components';
+        @import 'tailwindcss/utilities';
+      `
+    )
+    await writeInputFile(
+      'tailwind.config.js',
+      javascript`
+        module.exports = {
+          content: {
+            relative: true,
+            files: ['./index.html'],
+          },
+          theme: {
+            extend: {
+              colors: {
+                yellow: '#ff0',
+              }
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-yellow {
+          --tw-bg-opacity: 1;
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+        }
+      `
+    )
+  })
 })
 
 describe('watcher', () => {
@@ -381,4 +484,125 @@ describe('watcher', () => {
 
     return runningProcess.stop()
   })
+
+  test('listens for changes to the @config directive', async () => {
+    await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @config "./tailwind.config.js";
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      'tailwind.config.js',
+      javascript`
+        module.exports = {
+          content: {
+            relative: true,
+            files: ['./index.html'],
+          },
+          theme: {
+            extend: {
+              colors: {
+                yellow: '#ff0',
+              }
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+    await writeInputFile(
+      'tailwind.2.config.js',
+      javascript`
+        module.exports = {
+          content: {
+            relative: true,
+            files: ['./index.html'],
+          },
+          theme: {
+            extend: {
+              colors: {
+                yellow: '#ff7',
+              }
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-yellow {
+          --tw-bg-opacity: 1;
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+        }
+      `
+    )
+
+    await writeInputFile(
+      'index.css',
+      css`
+        @config "./tailwind.2.config.js";
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-yellow {
+          --tw-bg-opacity: 1;
+          background-color: rgb(255 255 119 / var(--tw-bg-opacity));
+        }
+      `
+    )
+
+    await writeInputFile(
+      'tailwind.2.config.js',
+      javascript`
+        module.exports = {
+          content: {
+            relative: true,
+            files: ['./index.html'],
+          },
+          theme: {
+            extend: {
+              colors: {
+                yellow: '#fff',
+              }
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-yellow {
+          --tw-bg-opacity: 1;
+          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
 })