Register PurgeCSS content array as PostCSS dependencies (#4530)

tailwindlabs · Jun 1, 2021 · 1600fbd · 1600fbd
1 parent 1aedf10
commit 1600fbd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/src/lib/purgeUnusedStyles.js b/src/lib/purgeUnusedStyles.js
@@ -3,6 +3,8 @@ import postcss from 'postcss'
 import purgecss from '@fullhuman/postcss-purgecss'
 import log from '../util/log'
 import htmlTags from 'html-tags'
+import parseGlob from 'parse-glob'
+import path from 'path'
 
 function removeTailwindMarkers(css) {
   css.walkAtRules('tailwind', (rule) => rule.remove())
@@ -33,7 +35,7 @@ export function tailwindExtractor(content) {
   return broadMatches.concat(broadMatchesWithoutTrailingSlash).concat(innerMatches)
 }
 
-export default function purgeUnusedUtilities(config, configChanged) {
+export default function purgeUnusedUtilities(config, configChanged, registerDependency) {
   const purgeEnabled = _.get(
     config,
     'purge.enabled',
@@ -59,6 +61,23 @@ export default function purgeUnusedUtilities(config, configChanged) {
 
   const { defaultExtractor, ...purgeOptions } = config.purge.options || {}
 
+  let content = Array.isArray(config.purge) ? config.purge : config.purge.content
+
+  for (let maybeGlob of content) {
+    let { is, base } = parseGlob(maybeGlob)
+
+    if (is.glob) {
+      // rollup-plugin-postcss does not support dir-dependency messages
+      // but directories can be watched in the same way as files
+      registerDependency(
+        path.resolve(base),
+        process.env.ROLLUP_WATCH === 'true' ? 'dependency' : 'dir-dependency'
+      )
+    } else {
+      registerDependency(path.resolve(maybeGlob))
+    }
+  }
+
   return postcss([
     function (css) {
       const mode = _.get(config, 'purge.mode', 'layers')
@@ -104,7 +123,7 @@ export default function purgeUnusedUtilities(config, configChanged) {
     },
     removeTailwindMarkers,
     purgecss({
-      content: Array.isArray(config.purge) ? config.purge : config.purge.content,
+      content,
       defaultExtractor: (content) => {
         const extractor = defaultExtractor || tailwindExtractor
         const preserved = [...extractor(content)]

diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js
@@ -25,7 +25,7 @@ let processedPlugins = null
 let getProcessedPlugins = null
 
 export default function (getConfig) {
-  return function (css) {
+  return function (css, result) {
     const config = getConfig()
     const configChanged = hash(previousConfig) !== hash(config)
     previousConfig = config
@@ -56,6 +56,15 @@ export default function (getConfig) {
       }
     }
 
+    function registerDependency(fileName, type = 'dependency') {
+      result.messages.push({
+        type,
+        plugin: 'tailwindcss',
+        parent: result.opts.from,
+        [type === 'dir-dependency' ? 'dir' : 'file']: fileName,
+      })
+    }
+
     return postcss([
       substituteTailwindAtRules(config, getProcessedPlugins()),
       evaluateTailwindFunctions(config),
@@ -65,7 +74,7 @@ export default function (getConfig) {
       substituteScreenAtRules(config),
       substituteClassApplyAtRules(config, getProcessedPlugins, configChanged),
       applyImportantConfiguration(config),
-      purgeUnusedStyles(config, configChanged),
+      purgeUnusedStyles(config, configChanged, registerDependency),
     ]).process(css, { from: _.get(css, 'source.input.file') })
   }
 }