Handle old to new config when normalizing the config (tailwindlabs#5658)

* immediately take the `safelist` values into account

Currently we had to manually add them in the `setupTrackingContext`,
`setupWatchingContext` and the `cli`.

This was a bit cumbersome, because the `safelist` function (to resolve
regex patterns) was implemented on the context. This means that we had
to do something like this:

```js
let changedContent = []
let context = createContext(config, changedContent)
for (let content of context.safelist()) {
  changedContent.push(content)
}
```

This just feels wrong in general, so now it is handled internally for
you which means that we can't mess it up anymore in those 3 spots.

* drop the dot from the extension

Our transformers and extractors are implemented for `html` for example.
However the `path.extname()` returns `.html`.

This isn't an issue by default, but it could be for with custom
extractors / transformers.

* normalize the configuration

* make shared cache local per extractor

* ensure we always have an `extension`

Defaults to `html`

* splitup custom-extractors test

* update old config structure to new structure

* ensure we validate the "old" structure, and warn if invalid

* add tests with "old" config, to ensure it keeps working

* add missing `content` object

* inline unnecessary function abstraction

Author: RobinMalfait

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

@@ -34,9 +34,9 @@ describe('static build', () => {
       javascript`
         module.exports = {
           content: {
-            content: ['./src/index.html'],
-            safelist: ['bg-red-500','bg-red-600']
+            files: ['./src/index.html'],
           },
+          safelist: ['bg-red-500','bg-red-600'],
           theme: {
             extend: {
             },

integrations/webpack-5/tests/integration.test.js

@@ -230,9 +230,9 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
       javascript`
         module.exports = {
           content: {
-            content: ['./src/index.html'],
-            safelist: ['bg-red-500','bg-red-600']
+            files: ['./src/index.html'],
           },
+          safelist: ['bg-red-500','bg-red-600'],
           theme: {
             extend: {
             },

src/cli.js

@@ -436,12 +436,8 @@ async function build() {
     return resolvedConfig
   }
 
-  function extractContent(config) {
-    return config.content.content.concat(config.content.safelist)
-  }
-
   function extractFileGlobs(config) {
-    return extractContent(config)
+    return config.content.files
       .filter((file) => {
         // Strings in this case are files / globs. If it is something else,
         // like an object it's probably a raw content object. But this object
@@ -452,7 +448,7 @@ async function build() {
   }
 
   function extractRawContent(config) {
-    return extractContent(config).filter((file) => {
+    return config.content.files.filter((file) => {
       return typeof file === 'object' && file !== null
     })
   }
@@ -467,7 +463,7 @@ async function build() {
     for (let file of files) {
       changedContent.push({
         content: fs.readFileSync(path.resolve(file), 'utf8'),
-        extension: path.extname(file),
+        extension: path.extname(file).slice(1),
       })
     }
 
@@ -729,7 +725,7 @@ async function build() {
         chain = chain.then(async () => {
           changedContent.push({
             content: fs.readFileSync(path.resolve(file), 'utf8'),
-            extension: path.extname(file),
+            extension: path.extname(file).slice(1),
           })
 
           await rebuild(config)
@@ -741,7 +737,7 @@ async function build() {
       chain = chain.then(async () => {
         changedContent.push({
           content: fs.readFileSync(path.resolve(file), 'utf8'),
-          extension: path.extname(file),
+          extension: path.extname(file).slice(1),
         })
 
         await rebuild(config)

src/lib/expandTailwindAtRules.js

@@ -1,10 +1,10 @@
+import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import bigSign from '../util/bigSign'
 import cloneNodes from '../util/cloneNodes'
 
 let env = sharedState.env
-let contentMatchCache = sharedState.contentMatchCache
 
 const PATTERNS = [
   /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source, // font-['some_font',sans-serif]
@@ -35,21 +35,6 @@ const builtInTransformers = {
 
 function getExtractor(tailwindConfig, fileExtension) {
   let extractors = tailwindConfig.content.extract
-  let contentOptions = tailwindConfig.content.options
-
-  if (typeof extractors === 'function') {
-    extractors = {
-      DEFAULT: extractors,
-    }
-  }
-  if (contentOptions.defaultExtractor) {
-    extractors.DEFAULT = contentOptions.defaultExtractor
-  }
-  for (let { extensions, extractor } of contentOptions.extractors || []) {
-    for (let extension of extensions) {
-      extractors[extension] = extractor
-    }
-  }
 
   return (
     extractors[fileExtension] ||
@@ -62,12 +47,6 @@ function getExtractor(tailwindConfig, fileExtension) {
 function getTransformer(tailwindConfig, fileExtension) {
   let transformers = tailwindConfig.content.transform
 
-  if (typeof transformers === 'function') {
-    transformers = {
-      DEFAULT: transformers,
-    }
-  }
-
   return (
     transformers[fileExtension] ||
     transformers.DEFAULT ||
@@ -76,10 +55,16 @@ function getTransformer(tailwindConfig, fileExtension) {
   )
 }
 
+let extractorCache = new WeakMap()
+
 // Scans template contents for possible classes. This is a hot path on initial build but
 // not too important for subsequent builds. The faster the better though — if we can speed
 // up these regexes by 50% that could cut initial build time by like 20%.
-function getClassCandidates(content, extractor, contentMatchCache, candidates, seen) {
+function getClassCandidates(content, extractor, candidates, seen) {
+  if (!extractorCache.has(extractor)) {
+    extractorCache.set(extractor, new LRU({ maxSize: 25000 }))
+  }
+
   for (let line of content.split('\n')) {
     line = line.trim()
 
@@ -88,8 +73,8 @@ function getClassCandidates(content, extractor, contentMatchCache, candidates, s
     }
     seen.add(line)
 
-    if (contentMatchCache.has(line)) {
-      for (let match of contentMatchCache.get(line)) {
+    if (extractorCache.get(extractor).has(line)) {
+      for (let match of extractorCache.get(extractor).get(line)) {
         candidates.add(match)
       }
     } else {
@@ -100,7 +85,7 @@ function getClassCandidates(content, extractor, contentMatchCache, candidates, s
         candidates.add(match)
       }
 
-      contentMatchCache.set(line, lineMatchesSet)
+      extractorCache.get(extractor).set(line, lineMatchesSet)
     }
   }
 }
@@ -189,7 +174,7 @@ export default function expandTailwindAtRules(context) {
     for (let { content, extension } of context.changedContent) {
       let transformer = getTransformer(context.tailwindConfig, extension)
       let extractor = getExtractor(context.tailwindConfig, extension)
-      getClassCandidates(transformer(content), extractor, contentMatchCache, candidates, seen)
+      getClassCandidates(transformer(content), extractor, candidates, seen)
     }
 
     // ---

src/lib/setupContextUtils.js

@@ -559,16 +559,13 @@ function registerPlugins(plugins, context) {
     )
   }
 
-  context.safelist = function () {
-    let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
-    if (safelist.length <= 0) return []
-
-    let output = []
+  let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
+  if (safelist.length > 0) {
     let checks = []
 
     for (let value of safelist) {
       if (typeof value === 'string') {
-        output.push(value)
+        context.changedContent.push({ content: value, extension: 'html' })
         continue
       }
 
@@ -584,51 +581,52 @@ function registerPlugins(plugins, context) {
       checks.push(value)
     }
 
-    if (checks.length <= 0) return output.map((value) => ({ raw: value, extension: 'html' }))
-
-    let patternMatchingCount = new Map()
-
-    for (let util of classList) {
-      let utils = Array.isArray(util)
-        ? (() => {
-            let [utilName, options] = util
-            return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
-          })()
-        : [util]
-
-      for (let util of utils) {
-        for (let { pattern, variants = [] } of checks) {
-          // RegExp with the /g flag are stateful, so let's reset the last
-          // index pointer to reset the state.
-          pattern.lastIndex = 0
-
-          if (!patternMatchingCount.has(pattern)) {
-            patternMatchingCount.set(pattern, 0)
-          }
+    if (checks.length > 0) {
+      let patternMatchingCount = new Map()
+
+      for (let util of classList) {
+        let utils = Array.isArray(util)
+          ? (() => {
+              let [utilName, options] = util
+              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+            })()
+          : [util]
+
+        for (let util of utils) {
+          for (let { pattern, variants = [] } of checks) {
+            // RegExp with the /g flag are stateful, so let's reset the last
+            // index pointer to reset the state.
+            pattern.lastIndex = 0
+
+            if (!patternMatchingCount.has(pattern)) {
+              patternMatchingCount.set(pattern, 0)
+            }
 
-          if (!pattern.test(util)) continue
+            if (!pattern.test(util)) continue
 
-          patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1)
+            patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1)
 
-          output.push(util)
-          for (let variant of variants) {
-            output.push(variant + context.tailwindConfig.separator + util)
+            context.changedContent.push({ content: util, extension: 'html' })
+            for (let variant of variants) {
+              context.changedContent.push({
+                content: variant + context.tailwindConfig.separator + util,
+                extension: 'html',
+              })
+            }
           }
         }
       }
-    }
 
-    for (let [regex, count] of patternMatchingCount.entries()) {
-      if (count !== 0) continue
+      for (let [regex, count] of patternMatchingCount.entries()) {
+        if (count !== 0) continue
 
-      log.warn([
-        // TODO: Improve this warning message
-        `You have a regex pattern in your "safelist" config (${regex}) that doesn't match any utilities.`,
-        'For more info, visit https://tailwindcss.com/docs/...',
-      ])
+        log.warn([
+          // TODO: Improve this warning message
+          `You have a regex pattern in your "safelist" config (${regex}) that doesn't match any utilities.`,
+          'For more info, visit https://tailwindcss.com/docs/...',
+        ])
+      }
     }
-
-    return output.map((value) => ({ raw: value, extension: 'html' }))
   }
 
   // Generate a list of strings for autocompletion purposes, e.g.

src/lib/setupTrackingContext.js

@@ -26,7 +26,7 @@ function getCandidateFiles(context, tailwindConfig) {
     return candidateFilesCache.get(context)
   }
 
-  let candidateFiles = tailwindConfig.content.content
+  let candidateFiles = tailwindConfig.content.files
     .filter((item) => typeof item === 'string')
     .map((contentPath) => normalizePath(contentPath))
 
@@ -77,11 +77,9 @@ function getTailwindConfig(configOrPath) {
 }
 
 function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-  let changedContent = context.tailwindConfig.content.content
+  let changedContent = context.tailwindConfig.content.files
     .filter((item) => typeof item.raw === 'string')
-    .concat(context.tailwindConfig.content.safelist)
-    .concat(context.safelist())
-    .map(({ raw, extension }) => ({ content: raw, extension }))
+    .map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
 
   for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {
     let content = fs.readFileSync(changedFile, 'utf8')

src/lib/setupWatchingContext.js

@@ -147,7 +147,7 @@ function getCandidateFiles(context, tailwindConfig) {
     return candidateFilesCache.get(context)
   }
 
-  let candidateFiles = tailwindConfig.content.content
+  let candidateFiles = tailwindConfig.content.files
     .filter((item) => typeof item === 'string')
     .map((contentPath) => normalizePath(contentPath))
 
@@ -185,11 +185,9 @@ function getTailwindConfig(configOrPath) {
 }
 
 function resolvedChangedContent(context, candidateFiles) {
-  let changedContent = context.tailwindConfig.content.content
+  let changedContent = context.tailwindConfig.content.files
     .filter((item) => typeof item.raw === 'string')
-    .concat(context.tailwindConfig.content.safelist)
-    .concat(context.safelist())
-    .map(({ raw, extension }) => ({ content: raw, extension }))
+    .map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
 
   for (let changedFile of resolveChangedFiles(context, candidateFiles)) {
     let content = fs.readFileSync(changedFile, 'utf8')

src/lib/sharedState.js

@@ -1,5 +1,3 @@
-import LRU from 'quick-lru'
-
 export const env = {
   TAILWIND_MODE: process.env.TAILWIND_MODE,
   NODE_ENV: process.env.NODE_ENV,
@@ -10,4 +8,3 @@ export const env = {
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
-export const contentMatchCache = new LRU({ maxSize: 25000 })