Resolve purge paths (#4214)

* resolve purge paths

* add test for purgecss pattern resolution

* resolve purgecss patterns relative to the config file if there is one

* account for raw content when transforming purgecss options

* append test name to postcss `from` option in purge tests
fixes tests hanging

* add test for relative purge path resolution in JIT mode

Author: bradlc

src/index.js

@@ -97,7 +97,7 @@ module.exports = function (config) {
 
   return {
     postcssPlugin: 'tailwindcss',
-    plugins: [...plugins, processTailwindFeatures(getConfig), formatCSS],
+    plugins: [...plugins, processTailwindFeatures(getConfig, resolvedConfigPath), formatCSS],
   }
 }
 

src/jit/lib/setupContext.js

@@ -787,7 +787,14 @@ export default function setupContext(configOrPath) {
       configDependencies: new Set(),
       candidateFiles: purgeContent
         .filter((item) => typeof item === 'string')
-        .map((path) => normalizePath(path)),
+        .map((purgePath) =>
+          normalizePath(
+            path.resolve(
+              userConfigPath === null ? process.cwd() : path.dirname(userConfigPath),
+              purgePath
+            )
+          )
+        ),
       rawContent: purgeContent
         .filter((item) => typeof item.raw === 'string')
         .map(({ raw, extension }) => ({ content: raw, extension })),

src/lib/purgeUnusedStyles.js

@@ -3,6 +3,7 @@ import postcss from 'postcss'
 import purgecss from '@fullhuman/postcss-purgecss'
 import log from '../util/log'
 import htmlTags from 'html-tags'
+import path from 'path'
 
 function removeTailwindMarkers(css) {
   css.walkAtRules('tailwind', (rule) => rule.remove())
@@ -33,7 +34,7 @@ export function tailwindExtractor(content) {
   return broadMatches.concat(broadMatchesWithoutTrailingSlash).concat(innerMatches)
 }
 
-export default function purgeUnusedUtilities(config, configChanged) {
+export default function purgeUnusedUtilities(config, configChanged, resolvedConfigPath) {
   const purgeEnabled = _.get(
     config,
     'purge.enabled',
@@ -104,7 +105,6 @@ export default function purgeUnusedUtilities(config, configChanged) {
     },
     removeTailwindMarkers,
     purgecss({
-      content: Array.isArray(config.purge) ? config.purge : config.purge.content,
       defaultExtractor: (content) => {
         const extractor = defaultExtractor || tailwindExtractor
         const preserved = [...extractor(content)]
@@ -116,6 +116,18 @@ export default function purgeUnusedUtilities(config, configChanged) {
         return preserved
       },
       ...purgeOptions,
+      content: (Array.isArray(config.purge)
+        ? config.purge
+        : config.purge.content || purgeOptions.content || []
+      ).map((item) => {
+        if (typeof item === 'string') {
+          return path.resolve(
+            resolvedConfigPath ? path.dirname(resolvedConfigPath) : process.cwd(),
+            item
+          )
+        }
+        return item
+      }),
     }),
   ])
 }

src/processTailwindFeatures.js

@@ -24,7 +24,7 @@ let previousConfig = null
 let processedPlugins = null
 let getProcessedPlugins = null
 
-export default function (getConfig) {
+export default function (getConfig, resolvedConfigPath) {
   return function (css) {
     const config = getConfig()
     const configChanged = hash(previousConfig) !== hash(config)
@@ -65,7 +65,7 @@ export default function (getConfig) {
       substituteScreenAtRules(config),
       substituteClassApplyAtRules(config, getProcessedPlugins, configChanged),
       applyImportantConfiguration(config),
-      purgeUnusedStyles(config, configChanged),
+      purgeUnusedStyles(config, configChanged, resolvedConfigPath),
     ]).process(css, { from: _.get(css, 'source.input.file') })
   }
 }

tests/fixtures/custom-purge-config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  purge: ['./*.html'],
+  theme: {
+    extend: {
+      colors: {
+        'black!': '#000',
+      },
+      spacing: {
+        1.5: '0.375rem',
+        '(1/2+8)': 'calc(50% + 2rem)',
+      },
+      minHeight: {
+        '(screen-4)': 'calc(100vh - 1rem)',
+      },
+      fontFamily: {
+        '%#$@': 'Comic Sans',
+      },
+    },
+  },
+}

tests/jit/relative-purge-paths.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./relative-purge-paths.test.html'],
+  corePlugins: { preflight: false },
+  theme: {},
+  plugins: [],
+}