tailwindcss 3.4.6 → 3.4.8

package/src/cli/build/plugin.js

@@ -12,7 +12,7 @@ import { loadAutoprefixer, loadCssNano, loadPostcss, loadPostcssImport } from '.
 import { formatNodes, drainStdin, outputFile } from './utils'
 import { env } from '../../lib/sharedState'
 import resolveConfig from '../../../resolveConfig.js'
-import { parseCandidateFiles } from '../../lib/content.js'
+import { createBroadPatternCheck, parseCandidateFiles } from '../../lib/content.js'
 import { createWatcher } from './watching.js'
 import fastGlob from 'fast-glob'
 import { findAtConfigPath } from '../../lib/findAtConfigPath.js'
@@ -184,7 +184,11 @@ let state = {
     // TODO: When we make the postcss plugin async-capable this can become async
     let files = fastGlob.sync(this.contentPatterns.all)
 
+    let checkBroadPattern = createBroadPatternCheck(this.contentPatterns.all)
+
     for (let file of files) {
+      checkBroadPattern(file)
+
       content.push({
         content: fs.readFileSync(path.resolve(file), 'utf8'),
         extension: path.extname(file).slice(1),
@@ -318,7 +322,7 @@ export async function createProcessor(args, cliConfigPath) {
       return fs.promises.readFile(path.resolve(input), 'utf8')
     }
 
-    // No input file provided, fallback to default atrules
+    // No input file provided, fallback to default at-rules
     return '@tailwind base; @tailwind components; @tailwind utilities'
   }
 

package/src/corePlugins.js

@@ -21,7 +21,7 @@ import {
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
 import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
-import { normalize } from './util/dataTypes'
+import { normalize, normalizeAttributeSelectors } from './util/dataTypes'
 import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
@@ -472,41 +472,45 @@ export let variantPlugins = {
   },
 
   ariaVariants: ({ matchVariant, theme }) => {
-    matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
+    matchVariant('aria', (value) => `&[aria-${normalizeAttributeSelectors(normalize(value))}]`, {
+      values: theme('aria') ?? {},
+    })
     matchVariant(
       'group-aria',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
-          : `:merge(.group)[aria-${normalize(value)}] &`,
+          ? `:merge(.group\\/${modifier})[aria-${normalizeAttributeSelectors(normalize(value))}] &`
+          : `:merge(.group)[aria-${normalizeAttributeSelectors(normalize(value))}] &`,
       { values: theme('aria') ?? {} }
     )
     matchVariant(
       'peer-aria',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
-          : `:merge(.peer)[aria-${normalize(value)}] ~ &`,
+          ? `:merge(.peer\\/${modifier})[aria-${normalizeAttributeSelectors(normalize(value))}] ~ &`
+          : `:merge(.peer)[aria-${normalizeAttributeSelectors(normalize(value))}] ~ &`,
       { values: theme('aria') ?? {} }
     )
   },
 
   dataVariants: ({ matchVariant, theme }) => {
-    matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
+    matchVariant('data', (value) => `&[data-${normalizeAttributeSelectors(normalize(value))}]`, {
+      values: theme('data') ?? {},
+    })
     matchVariant(
       'group-data',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
-          : `:merge(.group)[data-${normalize(value)}] &`,
+          ? `:merge(.group\\/${modifier})[data-${normalizeAttributeSelectors(normalize(value))}] &`
+          : `:merge(.group)[data-${normalizeAttributeSelectors(normalize(value))}] &`,
       { values: theme('data') ?? {} }
     )
     matchVariant(
       'peer-data',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
-          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
+          ? `:merge(.peer\\/${modifier})[data-${normalizeAttributeSelectors(normalize(value))}] ~ &`
+          : `:merge(.peer)[data-${normalizeAttributeSelectors(normalize(value))}] ~ &`,
       { values: theme('data') ?? {} }
     )
   },

package/src/lib/content.js

@@ -7,6 +7,8 @@ import fastGlob from 'fast-glob'
 import normalizePath from 'normalize-path'
 import { parseGlob } from '../util/parseGlob'
 import { env } from './sharedState'
+import log from '../util/log'
+import micromatch from 'micromatch'
 
 /** @typedef {import('../../types/config.js').RawFile} RawFile */
 /** @typedef {import('../../types/config.js').FilePath} FilePath */
@@ -181,6 +183,74 @@ export function resolvedChangedContent(context, candidateFiles, fileModifiedMap)
   return [changedContent, mTimesToCommit]
 }
 
+const LARGE_DIRECTORIES = [
+  'node_modules', // Node
+  'vendor', // PHP
+]
+
+// Ensures that `node_modules` has to match as-is, otherwise `mynode_modules`
+// would match as well, but that is not a known large directory.
+const LARGE_DIRECTORIES_REGEX = new RegExp(
+  `(${LARGE_DIRECTORIES.map((dir) => String.raw`\b${dir}\b`).join('|')})`
+)
+
+/**
+ * @param {string[]} paths
+ */
+export function createBroadPatternCheck(paths) {
+  // Detect whether a glob pattern might be too broad. This means that it:
+  // - Includes `**`
+  // - Does not include any of the known large directories (e.g.: node_modules)
+  let maybeBroadPattern = paths.some(
+    (path) => path.includes('**') && !LARGE_DIRECTORIES_REGEX.test(path)
+  )
+
+  // Didn't detect any potentially broad patterns, so we can skip further
+  // checks.
+  if (!maybeBroadPattern) {
+    return () => {}
+  }
+
+  // All globs that explicitly contain any of the known large directories (e.g.:
+  // node_modules).
+  let explicitGlobs = paths.filter((path) => LARGE_DIRECTORIES_REGEX.test(path))
+
+  // Keep track of whether we already warned about the broad pattern issue or
+  // not. The `log.warn` function already does something similar where we only
+  // output the log once. However, with this we can also skip the other checks
+  // when we already warned about the broad pattern.
+  let warned = false
+
+  /**
+   * @param {string} file
+   */
+  return (file) => {
+    if (warned) return // Already warned about the broad pattern
+    if (micromatch.isMatch(file, explicitGlobs)) return // Explicitly included, so we can skip further checks
+
+    // When a broad pattern is used, we have to double check that the file was
+    // not explicitly included in the globs.
+    let matchingGlob = paths.find((path) => micromatch.isMatch(file, path))
+    if (!matchingGlob) return // This should never happen
+
+    // Create relative paths to make the output a bit more readable.
+    let relativeMatchingGlob = path.relative(process.cwd(), matchingGlob)
+    if (relativeMatchingGlob[0] !== '.') relativeMatchingGlob = `./${relativeMatchingGlob}`
+
+    let largeDirectory = LARGE_DIRECTORIES.find((directory) => file.includes(directory))
+    if (largeDirectory) {
+      warned = true
+
+      log.warn('broad-content-glob-pattern', [
+        `Your \`content\` configuration includes a pattern which looks like it's accidentally matching all of \`${largeDirectory}\` and can cause serious performance issues.`,
+        `Pattern: \`${relativeMatchingGlob}\``,
+        `See our documentation for recommendations:`,
+        'https://tailwindcss.com/docs/content-configuration#pattern-recommendations',
+      ])
+    }
+  }
+}
+
 /**
  *
  * @param {ContentPath[]} candidateFiles
@@ -191,10 +261,14 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
   let paths = candidateFiles.map((contentPath) => contentPath.pattern)
   let mTimesToCommit = new Map()
 
+  let checkBroadPattern = createBroadPatternCheck(paths)
+
   let changedFiles = new Set()
   env.DEBUG && console.time('Finding changed files')
   let files = fastGlob.sync(paths, { absolute: true })
   for (let file of files) {
+    checkBroadPattern(file)
+
     let prevModified = fileModifiedMap.get(file) || -Infinity
     let modified = fs.statSync(file).mtimeMs
 

package/src/lib/defaultExtractor.js

@@ -152,6 +152,9 @@ function* buildRegExps(context) {
       utility,
     ])
   }
+
+  // 5. Inner matches
+  yield /[^<>"'`\s.(){}[\]#=%$][^<>"'`\s(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 }
 
 // We want to capture any "special" characters

package/src/util/dataTypes.js

@@ -81,6 +81,34 @@ export function normalize(value, context = null, isRoot = true) {
   return value
 }
 
+export function normalizeAttributeSelectors(value) {
+  // Wrap values in attribute selectors with quotes
+  if (value.includes('=')) {
+    value = value.replace(/(=.*)/g, (_fullMatch, match) => {
+      if (match[1] === "'" || match[1] === '"') {
+        return match
+      }
+
+      // Handle regex flags on unescaped values
+      if (match.length > 2) {
+        let trailingCharacter = match[match.length - 1]
+        if (
+          match[match.length - 2] === ' ' &&
+          (trailingCharacter === 'i' ||
+            trailingCharacter === 'I' ||
+            trailingCharacter === 's' ||
+            trailingCharacter === 'S')
+        ) {
+          return `="${match.slice(1, -2)}" ${match[match.length - 1]}`
+        }
+      }
+
+      return `="${match.slice(1)}"`
+    })
+  }
+  return value
+}
+
 /**
  * Add spaces around operators inside math functions
  * like calc() that do not follow an operator, '(', or `,`.