Ensure --content is used in the CLI when passed (#9587)

* update changelog

* ensure `--content` is taken into account

* cleanup tests

- Use `rm` instead of deprecated `rmdir`
- Type the returnType correctly

* use a file not included in `content` of your tailwind.config.js file

Author: RobinMalfait

CHANGELOG.md

@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve type checking for formal syntax ([#9349](https://github.com/tailwindlabs/tailwindcss/pull/9349), [#9448](https://github.com/tailwindlabs/tailwindcss/pull/9448))
 - Don't require `content` key in custom plugin configs ([#9502](https://github.com/tailwindlabs/tailwindcss/pull/9502), [#9545](https://github.com/tailwindlabs/tailwindcss/pull/9545))
 - Fix content path detection on Windows ([#9569](https://github.com/tailwindlabs/tailwindcss/pull/9569))
+- Ensure `--content` is used in the CLI when passed ([#9587](https://github.com/tailwindlabs/tailwindcss/pull/9587))
 
 ## [3.1.8] - 2022-08-05
 

integrations/tailwindcss-cli/tests/cli.test.js

@@ -169,9 +169,9 @@ describe('Build command', () => {
   })
 
   test('--content', async () => {
-    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+    await writeInputFile('other.html', html`<div class="font-bold"></div>`)
 
-    await $(`${EXECUTABLE} --content ./src/index.html --output ./dist/main.css`)
+    await $(`${EXECUTABLE} --content ./src/other.html --output ./dist/main.css`)
 
     expect(await readOutputFile('main.css')).toIncludeCss(
       css`

src/cli/build/plugin.js

@@ -17,6 +17,7 @@ import { parseCandidateFiles } from '../../lib/content.js'
 import { createWatcher } from './watching.js'
 import fastGlob from 'fast-glob'
 import { findAtConfigPath } from '../../lib/findAtConfigPath.js'
+import log from '../../util/log'
 
 /**
  *
@@ -139,7 +140,7 @@ let state = {
     }
   },
 
-  loadConfig(configPath) {
+  loadConfig(configPath, content) {
     if (this.watcher && configPath) {
       this.refreshConfigDependencies(configPath)
     }
@@ -149,6 +150,11 @@ let state = {
     // @ts-ignore
     config = resolveConfig(config, { content: { files: [] } })
 
+    // Override content files if `--content` has been passed explicitly
+    if (content?.length > 0) {
+      config.content.files = content
+    }
+
     return config
   },
 
@@ -196,7 +202,7 @@ let state = {
     return content
   },
 
-  getContext({ createContext, cliConfigPath, root, result }) {
+  getContext({ createContext, cliConfigPath, root, result, content }) {
     if (this.context) {
       this.context.changedContent = this.changedContent.splice(0)
 
@@ -208,7 +214,7 @@ let state = {
     env.DEBUG && console.timeEnd('Searching for config')
 
     env.DEBUG && console.time('Loading config')
-    let config = this.loadConfig(configPath)
+    let config = this.loadConfig(configPath, content)
     env.DEBUG && console.timeEnd('Loading config')
 
     env.DEBUG && console.time('Creating context')
@@ -250,6 +256,19 @@ export async function createProcessor(args, cliConfigPath) {
     ? await loadPostCssPlugins(customPostCssPath)
     : loadBuiltinPostcssPlugins()
 
+  if (args['--purge']) {
+    log.warn('purge-flag-deprecated', [
+      'The `--purge` flag has been deprecated.',
+      'Please use `--content` instead.',
+    ])
+
+    if (!args['--content']) {
+      args['--content'] = args['--purge']
+    }
+  }
+
+  let content = args['--content']?.split(/(?<!{[^}]+),/) ?? []
+
   let tailwindPlugin = () => {
     return {
       postcssPlugin: 'tailwindcss',
@@ -260,7 +279,13 @@ export async function createProcessor(args, cliConfigPath) {
           console.error('Rebuilding...')
 
           return () => {
-            return state.getContext({ createContext, cliConfigPath, root, result })
+            return state.getContext({
+              createContext,
+              cliConfigPath,
+              root,
+              result,
+              content,
+            })
           }
         })(root, result)
         env.DEBUG && console.timeEnd('Compiling CSS')

standalone-cli/tests/test.js

@@ -51,7 +51,7 @@ it('supports postcss config files', async () => {
 /**
  * @template T
  * @param {() => T} fn
- * @returns {T}
+ * @returns {Promise<T>}
  */
 async function inIsolatedContext(fn) {
   // Create a new directory entirely outside of the package for the test
@@ -79,6 +79,6 @@ async function inIsolatedContext(fn) {
     process.chdir(__dirname)
 
     // Delete the new directory
-    await fs.rmdir(dest, { recursive: true })
+    await fs.rm(dest, { recursive: true })
   }
 }