tailwindcss 3.2.1 → 3.2.3

package/src/cli/build/plugin.js

@@ -195,8 +195,8 @@ let state = {
       return file !== null && typeof file === 'object'
     })
 
-    for (let { raw: content, extension = 'html' } of rawContent) {
-      content.push({ content, extension })
+    for (let { raw: htmlContent, extension = 'html' } of rawContent) {
+      content.push({ content: htmlContent, extension })
     }
 
     return content

package/src/cli/build/watching.js

@@ -8,6 +8,14 @@ import path from 'path'
 
 import { readFileWithRetries } from './utils.js'
 
+/**
+ * The core idea of this watcher is:
+ * 1. Whenever a file is added, changed, or renamed we queue a rebuild
+ * 2. Perform as few rebuilds as possible by batching them together
+ * 3. Coalesce events that happen in quick succession to avoid unnecessary rebuilds
+ * 4. Ensure another rebuild happens _if_ changed while a rebuild is in progress
+ */
+
 /**
  *
  * @param {*} args
@@ -42,27 +50,93 @@ export function createWatcher(args, { state, rebuild }) {
       : false,
   })
 
+  // A queue of rebuilds, file reads, etc… to run
   let chain = Promise.resolve()
-  let pendingRebuilds = new Set()
+
+  /**
+   * A list of files that have been changed since the last rebuild
+   *
+   * @type {{file: string, content: () => Promise<string>, extension: string}[]}
+   */
   let changedContent = []
 
+  /**
+   * A list of files for which a rebuild has already been queued.
+   * This is used to prevent duplicate rebuilds when multiple events are fired for the same file.
+   * The rebuilt file is cleared from this list when it's associated rebuild has _started_
+   * This is because if the file is changed during a rebuild it won't trigger a new rebuild which it should
+   **/
+  let pendingRebuilds = new Set()
+
+  let _timer
+  let _reject
+
+  /**
+   * Rebuilds the changed files and resolves when the rebuild is
+   * complete regardless of whether it was successful or not
+   */
+  async function rebuildAndContinue() {
+    let changes = changedContent.splice(0)
+
+    // There are no changes to rebuild so we can just do nothing
+    if (changes.length === 0) {
+      return Promise.resolve()
+    }
+
+    // Clear all pending rebuilds for the about-to-be-built files
+    changes.forEach((change) => pendingRebuilds.delete(change.file))
+
+    // Resolve the promise even when the rebuild fails
+    return rebuild(changes).then(
+      () => {},
+      () => {}
+    )
+  }
+
   /**
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
+   * @returns {Promise<void>}
    */
   function recordChangedFile(file, content = null) {
     file = path.resolve(file)
 
-    content = content ?? (async () => await fs.promises.readFile(file, 'utf8'))
+    // Applications like Vim/Neovim fire both rename and change events in succession for atomic writes
+    // In that case rebuild has already been queued by rename, so can be skipped in change
+    if (pendingRebuilds.has(file)) {
+      return Promise.resolve()
+    }
+
+    // Mark that a rebuild of this file is going to happen
+    // It MUST happen synchronously before the rebuild is queued for this to be effective
+    pendingRebuilds.add(file)
 
     changedContent.push({
       file,
-      content,
+      content: content ?? (() => fs.promises.readFile(file, 'utf8')),
       extension: path.extname(file).slice(1),
     })
 
-    chain = chain.then(() => rebuild(changedContent.splice(0)))
+    if (_timer) {
+      clearTimeout(_timer)
+      _reject()
+    }
+
+    // If a rebuild is already in progress we don't want to start another one until the 10ms timer has expired
+    chain = chain.then(
+      () =>
+        new Promise((resolve, reject) => {
+          _timer = setTimeout(resolve, 10)
+          _reject = reject
+        })
+    )
+
+    // Resolves once this file has been rebuilt (or the rebuild for this file has failed)
+    // This queues as many rebuilds as there are changed files
+    // But those rebuilds happen after some delay
+    // And will immediately resolve if there are no changes
+    chain = chain.then(rebuildAndContinue, rebuildAndContinue)
 
     return chain
   }
@@ -107,18 +181,34 @@ export function createWatcher(args, { state, rebuild }) {
       return
     }
 
+    // We'll go ahead and add the file to the pending rebuilds list here
+    // It'll be removed when the rebuild starts unless the read fails
+    // which will be taken care of as well
     pendingRebuilds.add(filePath)
 
-    chain = chain.then(async () => {
-      let content
-
+    async function enqueue() {
       try {
-        content = await readFileWithRetries(path.resolve(filePath))
-      } finally {
-        pendingRebuilds.delete(filePath)
+        // We need to read the file as early as possible outside of the chain
+        // because it may be gone by the time we get to it. doing the read
+        // immediately increases the chance that the file is still there
+        let content = await readFileWithRetries(path.resolve(filePath))
+
+        if (content === undefined) {
+          return
+        }
+
+        // This will push the rebuild onto the chain
+        // @ts-ignore: TypeScript isn't picking up that content is a string here
+        await recordChangedFile(filePath, () => content)
+      } catch {
+        // If reading the file fails, it's was probably a deleted temporary file
+        // So we can ignore it and no rebuild is needed
       }
+    }
 
-      return recordChangedFile(filePath, () => content)
+    enqueue().then(() => {
+      // If the file read fails we still need to make sure the file isn't stuck in the pending rebuilds list
+      pendingRebuilds.delete(filePath)
     })
   })
 

package/src/css/preflight.css

@@ -22,6 +22,7 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
 */
 
 html {
@@ -30,6 +31,7 @@ html {
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
 }
 
 /*

package/src/lib/content.js

@@ -94,17 +94,18 @@ function parseFilePath(filePath, ignore) {
  * @returns {ContentPath}
  */
 function resolveGlobPattern(contentPath) {
-  contentPath.pattern = contentPath.glob
-    ? `${contentPath.base}/${contentPath.glob}`
-    : contentPath.base
-
-  contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern
-
   // This is required for Windows support to properly pick up Glob paths.
   // Afaik, this technically shouldn't be needed but there's probably
   // some internal, direct path matching with a normalized path in
   // a package which can't handle mixed directory separators
-  contentPath.pattern = normalizePath(contentPath.pattern)
+  let base = normalizePath(contentPath.base)
+
+  // If the user's file path contains any special characters (like parens) for instance fast-glob
+  // is like "OOOH SHINY" and treats them as such. So we have to escape the base path to fix this
+  base = fastGlob.escapePath(base)
+
+  contentPath.pattern = contentPath.glob ? `${base}/${contentPath.glob}` : base
+  contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern
 
   return contentPath
 }
@@ -195,7 +196,14 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity
     let modified = fs.statSync(file).mtimeMs
 
-    if (modified > prevModified) {
+    // This check is intentionally >= because we track the last modified time of context dependencies
+    // earier in the process and we want to make sure we don't miss any changes that happen
+    // when a context dependency is also a content dependency
+    // Ideally, we'd do all this tracking at one time but that is a larger refactor
+    // than we want to commit to right now, so this is a decent compromise.
+    // This should be sufficient because file modification times will be off by at least
+    // 1ms (the precision of fstat in Node) in most cases if they exist and were changed.
+    if (modified >= prevModified) {
       changedFiles.add(file)
       fileModifiedMap.set(file, modified)
     }

package/src/lib/defaultExtractor.js

@@ -29,7 +29,7 @@ function* buildRegExps(context) {
 
   let utility = regex.any([
     // Arbitrary properties
-    /\[[^\s:'"`]+:[^\s\]]+\]/,
+    /\[[^\s:'"`]+:[^\s]+\]/,
 
     // Utilities
     regex.pattern([

package/src/lib/expandApplyAtRules.js

@@ -346,22 +346,42 @@ function processApply(root, context, localCache) {
         })
       })
 
-      // Sort tag names before class names
+      // Sort tag names before class names (but only sort each group (separated by a combinator)
+      // separately and not in total)
       // This happens when replacing `.bar` in `.foo.bar` with a tag like `section`
-      for (const sel of replaced) {
-        sel.sort((a, b) => {
-          if (a.type === 'tag' && b.type === 'class') {
-            return -1
-          } else if (a.type === 'class' && b.type === 'tag') {
-            return 1
-          } else if (a.type === 'class' && b.type === 'pseudo') {
-            return -1
-          } else if (a.type === 'pseudo' && b.type === 'class') {
-            return 1
+      for (let sel of replaced) {
+        let groups = [[]]
+        for (let node of sel.nodes) {
+          if (node.type === 'combinator') {
+            groups.push(node)
+            groups.push([])
+          } else {
+            let last = groups[groups.length - 1]
+            last.push(node)
           }
+        }
 
-          return sel.index(a) - sel.index(b)
-        })
+        sel.nodes = []
+
+        for (let group of groups) {
+          if (Array.isArray(group)) {
+            group.sort((a, b) => {
+              if (a.type === 'tag' && b.type === 'class') {
+                return -1
+              } else if (a.type === 'class' && b.type === 'tag') {
+                return 1
+              } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
+                return -1
+              } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
+                return 1
+              }
+
+              return 0
+            })
+          }
+
+          sel.nodes = sel.nodes.concat(group)
+        }
       }
 
       sel.replaceWith(...replaced)
@@ -382,7 +402,7 @@ function processApply(root, context, localCache) {
 
     if (apply.parent.type === 'atrule') {
       if (apply.parent.name === 'screen') {
-        const screenType = apply.parent.params
+        let screenType = apply.parent.params
 
         throw apply.error(
           `@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates
@@ -414,7 +434,7 @@ function processApply(root, context, localCache) {
     }
   }
 
-  for (const [parent, [candidates, atApplySource]] of perParentApplies) {
+  for (let [parent, [candidates, atApplySource]] of perParentApplies) {
     let siblings = []
 
     for (let [applyCandidate, important, rules] of candidates) {

package/src/lib/generateRules.js

@@ -3,7 +3,7 @@ import selectorParser from 'postcss-selector-parser'
 import parseObjectStyles from '../util/parseObjectStyles'
 import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
-import { updateAllClasses, getMatchingTypes } from '../util/pluginUtils'
+import { updateAllClasses, filterSelectorsForClass, getMatchingTypes } from '../util/pluginUtils'
 import log from '../util/log'
 import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
@@ -116,12 +116,15 @@ function applyImportant(matches, classCandidate) {
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
     container.walkRules((r) => {
-      r.selector = updateAllClasses(r.selector, (className) => {
-        if (className === classCandidate) {
-          return `!${className}`
+      r.selector = updateAllClasses(
+        filterSelectorsForClass(r.selector, classCandidate),
+        (className) => {
+          if (className === classCandidate) {
+            return `!${className}`
+          }
+          return className
         }
-        return className
-      })
+      )
       r.walkDecls((d) => (d.important = true))
     })
     result.push([{ ...meta, important: true }, container.nodes[0]])
@@ -210,7 +213,7 @@ function applyVariant(variant, matches, context) {
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
-        let clone = containerFromArray ?? container.clone()
+        let clone = (containerFromArray ?? container).clone()
         let collectedFormats = []
 
         function prepareBackup() {

package/src/lib/setupContextUtils.js

@@ -528,7 +528,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       variantFunctions = [].concat(variantFunctions).map((variantFunction) => {
         if (typeof variantFunction !== 'string') {
           // Safelist public API functions
-          return (api) => {
+          return (api = {}) => {
             let { args, modifySelectors, container, separator, wrap, format } = api
             let result = variantFunction(
               Object.assign(
@@ -581,11 +581,13 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         api.addVariant(
           isSpecial ? `${variant}${key}` : `${variant}-${key}`,
-          ({ args, container }) =>
-            variantFn(
+          ({ args, container }) => {
+            return variantFn(
               value,
-              modifiersEnabled ? { modifier: args.modifier, container } : { container }
-            ),
+              modifiersEnabled ? { modifier: args?.modifier, container } : { container }
+            )
+          },
+
           {
             ...options,
             value,
@@ -601,13 +603,17 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       api.addVariant(
         variant,
         ({ args, container }) => {
-          if (args.value === sharedState.NONE && !hasDefault) {
+          if (args?.value === sharedState.NONE && !hasDefault) {
             return null
           }
 
           return variantFn(
-            args.value === sharedState.NONE ? options.values.DEFAULT : args.value,
-            modifiersEnabled ? { modifier: args.modifier, container } : { container }
+            args?.value === sharedState.NONE
+              ? options.values.DEFAULT
+              : // Falling back to args if it is a string, otherwise '' for older intellisense
+                // (JetBrains) plugins.
+                args?.value ?? (typeof args === 'string' ? args : ''),
+            modifiersEnabled ? { modifier: args?.modifier, container } : { container }
           )
         },
         {
@@ -819,6 +825,7 @@ function registerPlugins(plugins, context) {
     if (checks.length > 0) {
       let patternMatchingCount = new Map()
       let prefixLength = context.tailwindConfig.prefix.length
+      let checkImportantUtils = checks.some((check) => check.pattern.source.includes('!'))
 
       for (let util of classList) {
         let utils = Array.isArray(util)
@@ -855,6 +862,10 @@ function registerPlugins(plugins, context) {
                 ]
               }
 
+              if (checkImportantUtils && options?.respectImportant) {
+                classes = [...classes, ...classes.map((cls) => '!' + cls)]
+              }
+
               return classes
             })()
           : [util]

package/src/util/formatVariantSelector.js

@@ -69,9 +69,9 @@ function resortSelector(sel) {
       return -1
     } else if (a.type === 'class' && b.type === 'tag') {
       return 1
-    } else if (a.type === 'class' && b.type === 'pseudo' && b.value !== ':merge') {
+    } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
       return -1
-    } else if (a.type === 'pseudo' && a.value !== ':merge' && b.type === 'class') {
+    } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
       return 1
     }
 

package/src/util/pluginUtils.js

@@ -37,6 +37,23 @@ export function updateAllClasses(selectors, updateClass) {
   return result
 }
 
+export function filterSelectorsForClass(selectors, classCandidate) {
+  let parser = selectorParser((selectors) => {
+    selectors.each((sel) => {
+      const containsClass = sel.nodes.some(
+        (node) => node.type === 'class' && node.value === classCandidate
+      )
+      if (!containsClass) {
+        sel.remove()
+      }
+    })
+  })
+
+  let result = parser.processSync(selectors)
+
+  return result
+}
+
 function resolveArbitraryValue(modifier, validate) {
   if (!isArbitraryValue(modifier)) {
     return undefined

package/src/util/resolveConfig.js

@@ -16,10 +16,6 @@ function isFunction(input) {
   return typeof input === 'function'
 }
 
-function isObject(input) {
-  return typeof input === 'object' && input !== null
-}
-
 function mergeWith(target, ...sources) {
   let customizer = sources.pop()
 
@@ -28,7 +24,7 @@ function mergeWith(target, ...sources) {
       let merged = customizer(target[k], source[k])
 
       if (merged === undefined) {
-        if (isObject(target[k]) && isObject(source[k])) {
+        if (isPlainObject(target[k]) && isPlainObject(source[k])) {
           target[k] = mergeWith({}, target[k], source[k], customizer)
         } else {
           target[k] = source[k]
@@ -103,12 +99,12 @@ function mergeThemes(themes) {
 
 function mergeExtensionCustomizer(merged, value) {
   // When we have an array of objects, we do want to merge it
-  if (Array.isArray(merged) && isObject(merged[0])) {
+  if (Array.isArray(merged) && isPlainObject(merged[0])) {
     return merged.concat(value)
   }
 
   // When the incoming value is an array, and the existing config is an object, prepend the existing object
-  if (Array.isArray(value) && isObject(value[0]) && isObject(merged)) {
+  if (Array.isArray(value) && isPlainObject(value[0]) && isPlainObject(merged)) {
     return [merged, ...value]
   }