tailwindcss 3.3.3 → 3.3.5

package/src/cli/build/watching.js

@@ -164,7 +164,7 @@ export function createWatcher(args, { state, rebuild }) {
   // This is very likely a chokidar bug but it's one we need to work around
   // We treat this as a change event and rebuild the CSS
   watcher.on('raw', (evt, filePath, meta) => {
-    if (evt !== 'rename') {
+    if (evt !== 'rename' || filePath === null) {
       return
     }
 

package/src/featureFlags.js

@@ -22,7 +22,6 @@ let featureFlags = {
   experimental: [
     'optimizeUniversalDefaults',
     'generalizedModifiers',
-    // 'variantGrouping',
   ],
 }
 

package/src/lib/defaultExtractor.js

@@ -12,16 +12,17 @@ export function defaultExtractor(context) {
     let results = []
 
     for (let pattern of patterns) {
-      results = [...results, ...(content.match(pattern) ?? [])]
+      for (let result of content.match(pattern) ?? []) {
+        results.push(clipAtBalancedParens(result))
+      }
     }
 
-    return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
+    return results
   }
 }
 
 function* buildRegExps(context) {
   let separator = context.tailwindConfig.separator
-  let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping')
   let prefix =
     context.tailwindConfig.prefix !== ''
       ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)]))
@@ -35,7 +36,7 @@ function* buildRegExps(context) {
     // This is a targeted fix to continue to allow theme()
     // with square brackets to work in arbitrary properties
     // while fixing a problem with the regex matching too much
-    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
+    /\[[^\s:'"`\]]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
 
     // Utilities
     regex.pattern([
@@ -80,12 +81,18 @@ function* buildRegExps(context) {
       // This is here to provide special support for the `@` variant
       regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
 
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
       regex.pattern([/[^\s"'`\[\\]+/, separator]),
     ]),
 
     // With quotes allowed
     regex.any([
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
       regex.pattern([/[^\s`\[\\]+/, separator]),
     ]),
@@ -103,15 +110,7 @@ function* buildRegExps(context) {
 
       prefix,
 
-      variantGroupingEnabled
-        ? regex.any([
-            // Or any of those things but grouped separated by commas
-            regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
-
-            // Arbitrary properties, constrained utilities, arbitrary values, etc…
-            utility,
-          ])
-        : utility,
+      utility,
     ])
   }
 

package/src/lib/expandApplyAtRules.js

@@ -553,6 +553,13 @@ function processApply(root, context, localCache) {
                 ? parent.selector.slice(importantSelector.length)
                 : parent.selector
 
+            // If the selector becomes empty after replacing the important selector
+            // This means that it's the same as the parent selector and we don't want to replace it
+            // Otherwise we'll crash
+            if (parentSelector === '') {
+              parentSelector = parent.selector
+            }
+
             rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
 
             // And then re-add it if it was removed

package/src/lib/expandTailwindAtRules.js

@@ -145,14 +145,26 @@ export default function expandTailwindAtRules(context) {
       //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
       // }
     } else {
-      await Promise.all(
-        context.changedContent.map(async ({ file, content, extension }) => {
-          let transformer = getTransformer(context.tailwindConfig, extension)
-          let extractor = getExtractor(context, extension)
-          content = file ? await fs.promises.readFile(file, 'utf8') : content
-          getClassCandidates(transformer(content), extractor, candidates, seen)
-        })
-      )
+      /** @type {[item: {file?: string, content?: string}, meta: {transformer: any, extractor: any}][]} */
+      let regexParserContent = []
+
+      for (let item of context.changedContent) {
+        let transformer = getTransformer(context.tailwindConfig, item.extension)
+        let extractor = getExtractor(context, item.extension)
+        regexParserContent.push([item, { transformer, extractor }])
+      }
+
+      const BATCH_SIZE = 500
+
+      for (let i = 0; i < regexParserContent.length; i += BATCH_SIZE) {
+        let batch = regexParserContent.slice(i, i + BATCH_SIZE)
+        await Promise.all(
+          batch.map(async ([{ file, content }, { transformer, extractor }]) => {
+            content = file ? await fs.promises.readFile(file, 'utf8') : content
+            getClassCandidates(transformer(content), extractor, candidates, seen)
+          })
+        )
+      }
     }
 
     env.DEBUG && console.timeEnd('Reading changed files')

package/src/lib/generateRules.js

@@ -496,7 +496,7 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
-  let normalized = normalize(value)
+  let normalized = normalize(value, { property })
 
   if (!isParsableCssValue(property, normalized)) {
     return null
@@ -573,7 +573,7 @@ function* recordCandidates(matches, classCandidate) {
   }
 }
 
-function* resolveMatches(candidate, context, original = candidate) {
+function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
@@ -583,15 +583,6 @@ function* resolveMatches(candidate, context, original = candidate) {
     classCandidate = classCandidate.slice(1)
   }
 
-  if (flagEnabled(context.tailwindConfig, 'variantGrouping')) {
-    if (classCandidate.startsWith('(') && classCandidate.endsWith(')')) {
-      let base = variants.slice().reverse().join(separator)
-      for (let part of splitAtTopLevelOnly(classCandidate.slice(1, -1), ',')) {
-        yield* resolveMatches(base + separator + part, context, original)
-      }
-    }
-  }
-
   // TODO: Reintroduce this in ways that doesn't break on false positives
   // function sortAgainst(toSort, against) {
   //   return toSort.slice().sort((a, z) => {
@@ -780,7 +771,7 @@ function* resolveMatches(candidate, context, original = candidate) {
       match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
 
       // Apply final format selector
-      match = applyFinalFormat(match, { context, candidate, original })
+      match = applyFinalFormat(match, { context, candidate })
 
       // Skip rules with invalid selectors
       // This will cause the candidate to be added to the "not class"
@@ -794,7 +785,7 @@ function* resolveMatches(candidate, context, original = candidate) {
   }
 }
 
-function applyFinalFormat(match, { context, candidate, original }) {
+function applyFinalFormat(match, { context, candidate }) {
   if (!match[0].collectedFormats) {
     return match
   }
@@ -829,10 +820,19 @@ function applyFinalFormat(match, { context, candidate, original }) {
     }
 
     try {
-      rule.selector = finalizeSelector(rule.selector, finalFormat, {
-        candidate: original,
+      let selector = finalizeSelector(rule.selector, finalFormat, {
+        candidate,
         context,
       })
+
+      // Finalize Selector determined that this candidate is irrelevant
+      // TODO: This elimination should happen earlier so this never happens
+      if (selector === null) {
+        rule.remove()
+        return
+      }
+
+      rule.selector = selector
     } catch {
       // If this selector is invalid we also want to skip it
       // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
@@ -882,7 +882,7 @@ function getImportantStrategy(important) {
   }
 }
 
-function generateRules(candidates, context) {
+function generateRules(candidates, context, isSorting = false) {
   let allRules = []
   let strategy = getImportantStrategy(context.tailwindConfig.important)
 
@@ -917,7 +917,9 @@ function generateRules(candidates, context) {
         rule = container.nodes[0]
       }
 
-      let newEntry = [sort, rule]
+      // Note: We have to clone rules during sorting
+      // so we eliminate some shared mutable state
+      let newEntry = [sort, isSorting ? rule.clone() : rule]
       rules.add(newEntry)
       context.ruleCache.add(newEntry)
       allRules.push(newEntry)

package/src/lib/setupContextUtils.js

@@ -148,43 +148,45 @@ function getClasses(selector, mutate) {
   return parser.transformSync(selector)
 }
 
+/**
+ * Ignore everything inside a :not(...). This allows you to write code like
+ * `div:not(.foo)`. If `.foo` is never found in your code, then we used to
+ * not generated it. But now we will ignore everything inside a `:not`, so
+ * that it still gets generated.
+ *
+ * @param {selectorParser.Root} selectors
+ */
+function ignoreNot(selectors) {
+  selectors.walkPseudos((pseudo) => {
+    if (pseudo.value === ':not') {
+      pseudo.remove()
+    }
+  })
+}
+
 function extractCandidates(node, state = { containsNonOnDemandable: false }, depth = 0) {
   let classes = []
+  let selectors = []
 
-  // Handle normal rules
   if (node.type === 'rule') {
-    // Ignore everything inside a :not(...). This allows you to write code like
-    // `div:not(.foo)`. If `.foo` is never found in your code, then we used to
-    // not generated it. But now we will ignore everything inside a `:not`, so
-    // that it still gets generated.
-    function ignoreNot(selectors) {
-      selectors.walkPseudos((pseudo) => {
-        if (pseudo.value === ':not') {
-          pseudo.remove()
-        }
-      })
-    }
+    // Handle normal rules
+    selectors.push(...node.selectors)
+  } else if (node.type === 'atrule') {
+    // Handle at-rules (which contains nested rules)
+    node.walkRules((rule) => selectors.push(...rule.selectors))
+  }
 
-    for (let selector of node.selectors) {
-      let classCandidates = getClasses(selector, ignoreNot)
-      // At least one of the selectors contains non-"on-demandable" candidates.
-      if (classCandidates.length === 0) {
-        state.containsNonOnDemandable = true
-      }
+  for (let selector of selectors) {
+    let classCandidates = getClasses(selector, ignoreNot)
 
-      for (let classCandidate of classCandidates) {
-        classes.push(classCandidate)
-      }
+    // At least one of the selectors contains non-"on-demandable" candidates.
+    if (classCandidates.length === 0) {
+      state.containsNonOnDemandable = true
     }
-  }
 
-  // Handle at-rules (which contains nested rules)
-  else if (node.type === 'atrule') {
-    node.walkRules((rule) => {
-      for (let classCandidate of rule.selectors.flatMap((selector) => getClasses(selector))) {
-        classes.push(classCandidate)
-      }
-    })
+    for (let classCandidate of classCandidates) {
+      classes.push(classCandidate)
+    }
   }
 
   if (depth === 0) {
@@ -945,7 +947,7 @@ function registerPlugins(plugins, context) {
 
     // Sort all classes in order
     // Non-tailwind classes won't be generated and will be left as `null`
-    let rules = generateRules(new Set(sorted), context)
+    let rules = generateRules(new Set(sorted), context, true)
     rules = context.offsets.sort(rules)
 
     let idx = BigInt(parasiteUtilities.length)

package/src/oxide/cli/build/plugin.ts

@@ -277,9 +277,9 @@ export async function createProcessor(args, cliConfigPath) {
   let tailwindPlugin = () => {
     return {
       postcssPlugin: 'tailwindcss',
-      Once(root, { result }) {
+      async Once(root, { result }) {
         env.DEBUG && console.time('Compiling CSS')
-        tailwind(({ createContext }) => {
+        await tailwind(({ createContext }) => {
           console.error()
           console.error('Rebuilding...')
 

package/src/util/color.js

@@ -5,7 +5,7 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
 let VALUE = /(?:\d+|\d*\.\d+)%?/
 let SEP = /(?:\s*,\s*|\s+)/
 let ALPHA_SEP = /\s*[,/]\s*/
-let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)(?:,(?:[^ )]*?|var\(--[^ )]*?\)))?\)/
 
 let RGB = new RegExp(
   `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`

package/src/util/dataTypes.js

@@ -10,13 +10,34 @@ function isCSSFunction(value) {
   return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
 }
 
-const placeholder = '--tw-placeholder'
-const placeholderRe = new RegExp(placeholder, 'g')
+// These properties accept a `<dashed-ident>` as one of the values. This means that you can use them
+// as: `timeline-scope: --tl;`
+//
+// Without the `var(--tl)`, in these cases we don't want to normalize the value, and you should add
+// the `var()` yourself.
+//
+// More info:
+// - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
+// - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+//
+const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
+  // Concrete properties
+  'scroll-timeline-name',
+  'timeline-scope',
+  'view-timeline-name',
+  'font-palette',
+
+  // Shorthand properties
+  'scroll-timeline',
+  'animation-timeline',
+  'view-timeline',
+])
 
 // This is not a data type, but rather a function that can normalize the
 // correct values.
-export function normalize(value, isRoot = true) {
-  if (value.startsWith('--')) {
+export function normalize(value, context = null, isRoot = true) {
+  let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property)
+  if (value.startsWith('--') && !isVarException) {
     return `var(${value})`
   }
 
@@ -30,7 +51,7 @@ export function normalize(value, isRoot = true) {
           return part
         }
 
-        return normalize(part, false)
+        return normalize(part, context, false)
       })
       .join('')
   }
@@ -62,16 +83,97 @@ export function normalize(value, isRoot = true) {
  * @returns {string}
  */
 function normalizeMathOperatorSpacing(value) {
+  let preventFormattingInFunctions = ['theme']
+  let preventFormattingKeywords = [
+    'min-content',
+    'max-content',
+    'fit-content',
+
+    // Env
+    'safe-area-inset-top',
+    'safe-area-inset-right',
+    'safe-area-inset-bottom',
+    'safe-area-inset-left',
+
+    'titlebar-area-x',
+    'titlebar-area-y',
+    'titlebar-area-width',
+    'titlebar-area-height',
+
+    'keyboard-inset-top',
+    'keyboard-inset-right',
+    'keyboard-inset-bottom',
+    'keyboard-inset-left',
+    'keyboard-inset-width',
+    'keyboard-inset-height',
+  ]
+
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
-    let vars = []
+    let result = ''
 
-    return match
-      .replace(/var\((--.+?)[,)]/g, (match, g1) => {
-        vars.push(g1)
-        return match.replace(g1, placeholder)
-      })
-      .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
-      .replace(placeholderRe, () => vars.shift())
+    function lastChar() {
+      let char = result.trimEnd()
+      return char[char.length - 1]
+    }
+
+    for (let i = 0; i < match.length; i++) {
+      function peek(word) {
+        return word.split('').every((char, j) => match[i + j] === char)
+      }
+
+      function consumeUntil(chars) {
+        let minIndex = Infinity
+        for (let char of chars) {
+          let index = match.indexOf(char, i)
+          if (index !== -1 && index < minIndex) {
+            minIndex = index
+          }
+        }
+
+        let result = match.slice(i, minIndex)
+        i += result.length - 1
+        return result
+      }
+
+      let char = match[i]
+
+      // Handle `var(--variable)`
+      if (peek('var')) {
+        // When we consume until `)`, then we are dealing with this scenario:
+        //   `var(--example)`
+        //
+        // When we consume until `,`, then we are dealing with this scenario:
+        //   `var(--example, 1rem)`
+        //
+        //   In this case we do want to "format", the default value as well
+        result += consumeUntil([')', ','])
+      }
+
+      // Skip formatting of known keywords
+      else if (preventFormattingKeywords.some((keyword) => peek(keyword))) {
+        let keyword = preventFormattingKeywords.find((keyword) => peek(keyword))
+        result += keyword
+        i += keyword.length - 1
+      }
+
+      // Skip formatting inside known functions
+      else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
+        result += consumeUntil([')'])
+      }
+
+      // Handle operators
+      else if (
+        ['+', '-', '*', '/'].includes(char) &&
+        !['(', '+', '-', '*', '/'].includes(lastChar())
+      ) {
+        result += ` ${char} `
+      } else {
+        result += char
+      }
+    }
+
+    // Simplify multiple spaces
+    return result.replace(/\s+/g, ' ')
   })
 }
 

package/src/util/formatVariantSelector.js

@@ -3,6 +3,7 @@ import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
 import { movePseudos } from './pseudoElements'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
@@ -160,7 +161,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   //           │  │     │            ╰── We will not split here
   //           ╰──┴─────┴─────────────── We will split here
   //
-  base = base ?? candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop()
+  base = base ?? splitAtTopLevelOnly(candidate, separator).pop()
 
   // Parse the selector into an AST
   let selector = selectorParser().astSync(current)
@@ -185,6 +186,13 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   // Remove extraneous selectors that do not include the base candidate
   selector.each((sel) => eliminateIrrelevantSelectors(sel, base))
 
+  // If ffter eliminating irrelevant selectors, we end up with nothing
+  // Then the whole "rule" this is associated with does not need to exist
+  // We use `null` as a marker value for that case
+  if (selector.length === 0) {
+    return null
+  }
+
   // If there are no formats that means there were no variants added to the candidate
   // so we can just return the selector as-is
   let formatAst = Array.isArray(formats)

package/src/util/isPlainObject.js

@@ -4,5 +4,5 @@ export default function isPlainObject(value) {
   }
 
   const prototype = Object.getPrototypeOf(value)
-  return prototype === null || prototype === Object.prototype
+  return prototype === null || Object.getPrototypeOf(prototype) === null
 }

package/types/config.d.ts

@@ -46,13 +46,13 @@ type PrefixConfig = string
 type SeparatorConfig = string
 
 // Safelist related config
-type SafelistConfig = (string | { pattern: RegExp; variants?: string[] })[]
+type SafelistConfig = string | { pattern: RegExp; variants?: string[] }
 
 // Blocklist related config
-type BlocklistConfig = string[]
+type BlocklistConfig = string
 
 // Presets related config
-type PresetsConfig = Config[]
+type PresetsConfig = Partial<Config>
 
 // Future related config
 type FutureConfigValues =
@@ -352,9 +352,9 @@ interface OptionalConfig {
   important: Partial<ImportantConfig>
   prefix: Partial<PrefixConfig>
   separator: Partial<SeparatorConfig>
-  safelist: Partial<SafelistConfig>
-  blocklist: Partial<BlocklistConfig>
-  presets: Partial<PresetsConfig>
+  safelist: Array<SafelistConfig>
+  blocklist: Array<BlocklistConfig>
+  presets: Array<PresetsConfig>
   future: Partial<FutureConfig>
   experimental: Partial<ExperimentalConfig>
   darkMode: Partial<DarkModeConfig>

package/types/index.d.ts

@@ -1,7 +1,11 @@
-import { PluginCreator } from 'postcss'
+import type { PluginCreator } from 'postcss'
 import type { Config } from './config.d'
 
 declare const plugin: PluginCreator<string | Config | { config: string | Config }>
 
-export { Config }
-export default plugin
+declare type _Config = Config
+declare namespace plugin {
+  export type { _Config as Config }
+}
+
+export = plugin