Fix using negated content globs (#5625)

* Fix negated content patterns

* Update changelog

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix defining colors as functions when color opacity plugins are disabled ([#5470](https://github.com/tailwindlabs/tailwindcss/pull/5470))
+- Fix using negated `content` globs ([#5625](https://github.com/tailwindlabs/tailwindcss/pull/5625))
 
 ## [2.2.16] - 2021-09-26
 

src/lib/setupTrackingContext.js

@@ -28,7 +28,7 @@ function getCandidateFiles(context, tailwindConfig) {
 
   let candidateFiles = tailwindConfig.content.content
     .filter((item) => typeof item === 'string')
-    .map((contentPath) => normalizePath(path.resolve(contentPath)))
+    .map((contentPath) => normalizePath(contentPath))
 
   return candidateFilesCache.set(context, candidateFiles).get(context)
 }
@@ -159,7 +159,10 @@ export default function setupTrackingContext(configOrPath) {
 
         // Add template paths as postcss dependencies.
         for (let fileOrGlob of candidateFiles) {
-          registerDependency(parseDependency(fileOrGlob))
+          let dependency = parseDependency(fileOrGlob)
+          if (dependency) {
+            registerDependency(dependency)
+          }
         }
 
         for (let changedContent of resolvedChangedContent(

src/lib/setupWatchingContext.js

@@ -149,7 +149,7 @@ function getCandidateFiles(context, tailwindConfig) {
 
   let candidateFiles = tailwindConfig.content.content
     .filter((item) => typeof item === 'string')
-    .map((contentPath) => normalizePath(path.resolve(contentPath)))
+    .map((contentPath) => normalizePath(contentPath))
 
   return candidateFilesCache.set(context, candidateFiles).get(context)
 }

src/util/parseDependency.js

@@ -26,6 +26,10 @@ function parseGlob(pattern) {
 }
 
 export default function parseDependency(normalizedFileOrGlob) {
+  if (normalizedFileOrGlob.startsWith('!')) {
+    return null
+  }
+
   let message
 
   if (isGlob(normalizedFileOrGlob)) {

tests/negated-content-ignore.test.html

@@ -0,0 +1 @@
+<div class="lowercase"></div>

tests/negated-content-include.test.html

@@ -0,0 +1 @@
+<div class="uppercase"></div>

tests/negated-content.test.js

@@ -0,0 +1,26 @@
+import * as path from 'path'
+import { run, css } from './util/run'
+
+it('should be possible to use negated content patterns', () => {
+  let config = {
+    content: [
+      path.resolve(__dirname, './negated-content-*.test.html'),
+      '!' + path.resolve(__dirname, './negated-content-ignore.test.html'),
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .uppercase {
+        text-transform: uppercase;
+      }
+    `)
+  })
+})