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

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: [],
+}