tailwindcss 3.2.0 → 3.2.2

package/src/cli/build/plugin.js

@@ -328,6 +328,26 @@ export async function createProcessor(args, cliConfigPath) {
 
     return readInput()
       .then((css) => processor.process(css, { ...postcssOptions, from: input, to: output }))
+      .then((result) => {
+        if (!state.watcher) {
+          return result
+        }
+
+        env.DEBUG && console.time('Recording PostCSS dependencies')
+        for (let message of result.messages) {
+          if (message.type === 'dependency') {
+            state.contextDependencies.add(message.file)
+          }
+        }
+        env.DEBUG && console.timeEnd('Recording PostCSS dependencies')
+
+        // TODO: This needs to be in a different spot
+        env.DEBUG && console.time('Watch new files')
+        state.watcher.refreshWatchedFiles()
+        env.DEBUG && console.timeEnd('Watch new files')
+
+        return result
+      })
       .then((result) => {
         if (!output) {
           process.stdout.write(result.css)

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))
+    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
 }

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') {
+                return -1
+              } else if (a.type === 'pseudo' && 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 }
           )
         },
         {

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
@@ -233,14 +250,20 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
 export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
   let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
 
+  let [modifier, utilityModifier] = splitUtilityModifier(rawModifier)
+
   let canUseUtilityModifier =
     modifiersEnabled &&
     options.modifiers != null &&
-    (options.modifiers === 'any' || typeof options.modifiers === 'object')
-
-  let [modifier, utilityModifier] = canUseUtilityModifier
-    ? splitUtilityModifier(rawModifier)
-    : [rawModifier, undefined]
+    (options.modifiers === 'any' ||
+      (typeof options.modifiers === 'object' &&
+        ((utilityModifier && isArbitraryValue(utilityModifier)) ||
+          utilityModifier in options.modifiers)))
+
+  if (!canUseUtilityModifier) {
+    modifier = rawModifier
+    utilityModifier = undefined
+  }
 
   if (utilityModifier !== undefined && modifier === '') {
     modifier = 'DEFAULT'

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]
   }
 

package/stubs/defaultConfig.stub.js

@@ -11,6 +11,7 @@ module.exports = {
       xl: '1280px',
       '2xl': '1536px',
     },
+    supports: {},
     colors: ({ colors }) => ({
       inherit: colors.inherit,
       current: colors.current,

package/types/config.d.ts

@@ -84,6 +84,7 @@ type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
 interface ThemeConfig {
   // Responsiveness
   screens: ResolvableTo<ScreensConfig>
+  supports: ResolvableTo<Record<string, string>>
 
   // Reusable base configs
   colors: ResolvableTo<RecursiveKeyValuePair>

package/peers/.svgo.yml

@@ -1,75 +0,0 @@
-# replace default config
-
-# multipass: true
-# full: true
-
-plugins:
-
-  # - name
-  #
-  # or:
-  # - name: false
-  # - name: true
-  #
-  # or:
-  # - name:
-  #     param1: 1
-  #     param2: 2
-
-  - removeDoctype
-  - removeXMLProcInst
-  - removeComments
-  - removeMetadata
-  - removeXMLNS
-  - removeEditorsNSData
-  - cleanupAttrs
-  - inlineStyles
-  - minifyStyles
-  - convertStyleToAttrs
-  - cleanupIDs
-  - prefixIds
-  - removeRasterImages
-  - removeUselessDefs
-  - cleanupNumericValues
-  - cleanupListOfValues
-  - convertColors
-  - removeUnknownsAndDefaults
-  - removeNonInheritableGroupAttrs
-  - removeUselessStrokeAndFill
-  - removeViewBox
-  - cleanupEnableBackground
-  - removeHiddenElems
-  - removeEmptyText
-  - convertShapeToPath
-  - convertEllipseToCircle
-  - moveElemsAttrsToGroup
-  - moveGroupAttrsToElems
-  - collapseGroups
-  - convertPathData
-  - convertTransform
-  - removeEmptyAttrs
-  - removeEmptyContainers
-  - mergePaths
-  - removeUnusedNS
-  - sortAttrs
-  - sortDefsChildren
-  - removeTitle
-  - removeDesc
-  - removeDimensions
-  - removeAttrs
-  - removeAttributesBySelector
-  - removeElementsByAttr
-  - addClassesToSVGElement
-  - removeStyleElement
-  - removeScriptElement
-  - addAttributesToSVGElement
-  - removeOffCanvasPaths
-  - reusePaths
-
-# configure the indent (default 4 spaces) used by `--pretty` here:
-#
-# @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
-#
-# js2svg:
-#  pretty: true
-#  indent: '  '