tailwindcss 3.1.7 → 3.2.0

package/src/lib/setupContextUtils.js

@@ -4,7 +4,6 @@ import postcss from 'postcss'
 import dlv from 'dlv'
 import selectorParser from 'postcss-selector-parser'
 
-import { flagEnabled } from '../featureFlags.js'
 import transformThemeValue from '../util/transformThemeValue'
 import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
@@ -12,7 +11,6 @@ import isPlainObject from '../util/isPlainObject'
 import escapeClassName from '../util/escapeClassName'
 import nameClass, { formatClass } from '../util/nameClass'
 import { coerceValue } from '../util/pluginUtils'
-import bigSign from '../util/bigSign'
 import { variantPlugins, corePlugins } from '../corePlugins'
 import * as sharedState from './sharedState'
 import { env } from './sharedState'
@@ -20,16 +18,41 @@ import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
-import { generateRules } from './generateRules'
+import { generateRules, getClassNameFromSelector } from './generateRules'
 import { hasContentChanged } from './cacheInvalidation.js'
+import { Offsets } from './offsets.js'
+import { flagEnabled } from '../featureFlags.js'
+import { finalizeSelector, formatVariantSelector } from '../util/formatVariantSelector'
 
-let MATCH_VARIANT = Symbol()
+const VARIANT_TYPES = {
+  AddVariant: Symbol.for('ADD_VARIANT'),
+  MatchVariant: Symbol.for('MATCH_VARIANT'),
+}
+
+const VARIANT_INFO = {
+  Base: 1 << 0,
+  Dynamic: 1 << 1,
+}
 
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
 }
 
+function normalizeOptionTypes({ type = 'any', ...options }) {
+  let types = [].concat(type)
+
+  return {
+    ...options,
+    types: types.map((type) => {
+      if (Array.isArray(type)) {
+        return { type: type[0], ...type[1] }
+      }
+      return { type, preferOnConflict: false }
+    }),
+  }
+}
+
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
     if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
@@ -201,6 +224,13 @@ export function parseVariant(variant) {
   }
 }
 
+/**
+ *
+ * @param {any} tailwindConfig
+ * @param {any} context
+ * @param {object} param2
+ * @param {Offsets} param2.offsets
+ */
 function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
@@ -235,6 +265,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     }
   )
 
+  let variantIdentifier = 0
   let api = {
     postcss,
     prefix: applyConfiguredPrefix,
@@ -255,7 +286,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     addBase(base) {
       for (let [identifier, rule] of withIdentifiers(base)) {
         let prefixedIdentifier = prefixIdentifier(identifier, {})
-        let offset = offsets.base++
+        let offset = offsets.create('base')
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
@@ -284,7 +315,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offsets.base++, layer: 'defaults' }, rule])
+          .push([{ sort: offsets.create('defaults'), layer: 'defaults' }, rule])
       }
     },
     addComponents(components, options) {
@@ -307,7 +338,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offsets.components++, layer: 'components', options }, rule])
+          .push([{ sort: offsets.create('components'), layer: 'components', options }, rule])
       }
     },
     addUtilities(utilities, options) {
@@ -330,18 +361,19 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offsets.utilities++, layer: 'utilities', options }, rule])
+          .push([{ sort: offsets.create('utilities'), layer: 'utilities', options }, rule])
       }
     },
     matchUtilities: function (utilities, options) {
       let defaultOptions = {
         respectPrefix: true,
         respectImportant: true,
+        modifiers: false,
       }
 
-      options = { ...defaultOptions, ...options }
+      options = normalizeOptionTypes({ ...defaultOptions, ...options })
 
-      let offset = offsets.utilities++
+      let offset = offsets.create('utilities')
 
       for (let identifier in utilities) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
@@ -350,24 +382,51 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         classList.add([prefixedIdentifier, options])
 
         function wrapped(modifier, { isOnlyPlugin }) {
-          let { type = 'any' } = options
-          type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
+          let [value, coercedType, utilityModifier] = coerceValue(
+            options.types,
+            modifier,
+            options,
+            tailwindConfig
+          )
 
           if (value === undefined) {
             return []
           }
 
-          if (!type.includes(coercedType) && !isOnlyPlugin) {
-            return []
+          if (!options.types.some(({ type }) => type === coercedType)) {
+            if (isOnlyPlugin) {
+              log.warn([
+                `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
+                `You can safely update it to \`${identifier}-${modifier.replace(
+                  coercedType + ':',
+                  ''
+                )}\`.`,
+              ])
+            } else {
+              return []
+            }
           }
 
           if (!isValidArbitraryValue(value)) {
             return []
           }
 
+          let extras = {
+            get modifier() {
+              if (!options.modifiers) {
+                log.warn(`modifier-used-without-options-for-${identifier}`, [
+                  'Your plugin must set `modifiers: true` in its options to support modifiers.',
+                ])
+              }
+
+              return utilityModifier
+            },
+          }
+
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -389,11 +448,12 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       let defaultOptions = {
         respectPrefix: true,
         respectImportant: false,
+        modifiers: false,
       }
 
-      options = { ...defaultOptions, ...options }
+      options = normalizeOptionTypes({ ...defaultOptions, ...options })
 
-      let offset = offsets.components++
+      let offset = offsets.create('components')
 
       for (let identifier in components) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
@@ -402,15 +462,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         classList.add([prefixedIdentifier, options])
 
         function wrapped(modifier, { isOnlyPlugin }) {
-          let { type = 'any' } = options
-          type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
+          let [value, coercedType, utilityModifier] = coerceValue(
+            options.types,
+            modifier,
+            options,
+            tailwindConfig
+          )
 
           if (value === undefined) {
             return []
           }
 
-          if (!type.includes(coercedType)) {
+          if (!options.types.some(({ type }) => type === coercedType)) {
             if (isOnlyPlugin) {
               log.warn([
                 `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
@@ -428,8 +491,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             return []
           }
 
+          let extras = {
+            get modifier() {
+              if (!options.modifiers) {
+                log.warn(`modifier-used-without-options-for-${identifier}`, [
+                  'Your plugin must set `modifiers: true` in its options to support modifiers.',
+                ])
+              }
+
+              return utilityModifier
+            },
+          }
+
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -456,7 +533,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             let result = variantFunction(
               Object.assign(
                 { modifySelectors, container, separator },
-                variantFunction[MATCH_VARIANT] && { args, wrap, format }
+                options.type === VARIANT_TYPES.MatchVariant && { args, wrap, format }
               )
             )
 
@@ -489,23 +566,58 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       insertInto(variantList, variantName, options)
       variantMap.set(variantName, variantFunctions)
+      context.variantOptions.set(variantName, options)
     },
-  }
+    matchVariant(variant, variantFn, options) {
+      // A unique identifier that "groups" these variants together.
+      // This is for internal use only which is why it is not present in the types
+      let id = options?.id ?? ++variantIdentifier
+      let isSpecial = variant === '@'
 
-  if (flagEnabled(tailwindConfig, 'matchVariant')) {
-    api.matchVariant = function (variants, options) {
-      for (let variant in variants) {
-        for (let [k, v] of Object.entries(options?.values ?? {})) {
-          api.addVariant(`${variant}-${k}`, variants[variant](v))
-        }
+      let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
+      for (let [key, value] of Object.entries(options?.values ?? {})) {
+        if (key === 'DEFAULT') continue
 
         api.addVariant(
-          variant,
-          Object.assign(({ args }) => variants[variant](args), { [MATCH_VARIANT]: true }),
-          options
+          isSpecial ? `${variant}${key}` : `${variant}-${key}`,
+          ({ args, container }) =>
+            variantFn(
+              value,
+              modifiersEnabled ? { modifier: args.modifier, container } : { container }
+            ),
+          {
+            ...options,
+            value,
+            id,
+            type: VARIANT_TYPES.MatchVariant,
+            variantInfo: VARIANT_INFO.Base,
+          }
         )
       }
-    }
+
+      let hasDefault = 'DEFAULT' in (options?.values ?? {})
+
+      api.addVariant(
+        variant,
+        ({ args, container }) => {
+          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 }
+          )
+        },
+        {
+          ...options,
+          id,
+          type: VARIANT_TYPES.MatchVariant,
+          variantInfo: VARIANT_INFO.Dynamic,
+        }
+      )
+    },
   }
 
   return api
@@ -624,8 +736,11 @@ function resolvePlugins(context, root) {
   let beforeVariants = [
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
+    variantPlugins['ariaVariants'],
+    variantPlugins['dataVariants'],
   ]
   let afterVariants = [
+    variantPlugins['supportsVariants'],
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
@@ -641,13 +756,10 @@ function resolvePlugins(context, root) {
 function registerPlugins(plugins, context) {
   let variantList = []
   let variantMap = new Map()
-  let offsets = {
-    defaults: 0n,
-    base: 0n,
-    components: 0n,
-    utilities: 0n,
-    user: 0n,
-  }
+  context.variantMap = variantMap
+
+  let offsets = new Offsets()
+  context.offsets = offsets
 
   let classList = new Set()
 
@@ -668,49 +780,17 @@ function registerPlugins(plugins, context) {
     }
   }
 
-  let highestOffset = ((args) => args.reduce((m, e) => (e > m ? e : m)))([
-    offsets.base,
-    offsets.defaults,
-    offsets.components,
-    offsets.utilities,
-    offsets.user,
-  ])
-  let reservedBits = BigInt(highestOffset.toString(2).length)
-
-  // A number one less than the top range of the highest offset area
-  // so arbitrary properties are always sorted at the end.
-  context.arbitraryPropertiesSort = ((1n << reservedBits) << 0n) - 1n
-
-  context.layerOrder = {
-    defaults: (1n << reservedBits) << 0n,
-    base: (1n << reservedBits) << 1n,
-    components: (1n << reservedBits) << 2n,
-    utilities: (1n << reservedBits) << 3n,
-    user: (1n << reservedBits) << 4n,
-  }
-
-  reservedBits += 5n
-
-  let offset = 0
-  context.variantOrder = new Map(
-    variantList
-      .map((variant, i) => {
-        let variantFunctions = variantMap.get(variant).length
-        let bits = (1n << BigInt(i + offset)) << reservedBits
-        offset += variantFunctions - 1
-        return [variant, bits]
-      })
-      .sort(([, a], [, z]) => bigSign(a - z))
-  )
-
-  context.minimumScreen = [...context.variantOrder.values()].shift()
+  // Make sure to record bit masks for every variant
+  offsets.recordVariants(variantList, (variant) => variantMap.get(variant).length)
 
   // Build variantMap
   for (let [variantName, variantFunctions] of variantMap.entries()) {
-    let sort = context.variantOrder.get(variantName)
     context.variantMap.set(
       variantName,
-      variantFunctions.map((variantFunction, idx) => [sort << BigInt(idx), variantFunction])
+      variantFunctions.map((variantFunction, idx) => [
+        offsets.forVariant(variantName, idx),
+        variantFunction,
+      ])
     )
   }
 
@@ -764,7 +844,7 @@ function registerPlugins(plugins, context) {
                 ]
               }
 
-              if ([].concat(options?.type).includes('color')) {
+              if (options.types.some(({ type }) => type === 'color')) {
                 classes = [
                   ...classes,
                   ...classes.flatMap((cls) =>
@@ -816,26 +896,41 @@ function registerPlugins(plugins, context) {
     }
   }
 
+  let darkClassName = [].concat(context.tailwindConfig.darkMode ?? 'media')[1] ?? 'dark'
+
   // A list of utilities that are used by certain Tailwind CSS utilities but
   // that don't exist on their own. This will result in them "not existing" and
   // sorting could be weird since you still require them in order to make the
-  // host utitlies work properly. (Thanks Biology)
-  let parasiteUtilities = new Set([prefix(context, 'group'), prefix(context, 'peer')])
+  // host utilities work properly. (Thanks Biology)
+  let parasiteUtilities = [
+    prefix(context, darkClassName),
+    prefix(context, 'group'),
+    prefix(context, 'peer'),
+  ]
   context.getClassOrder = function getClassOrder(classes) {
-    let sortedClassNames = new Map()
-    for (let [sort, rule] of generateRules(new Set(classes), context)) {
-      if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue
-      sortedClassNames.set(rule.raws.tailwind.candidate, sort)
+    // Non-util classes won't be generated, so we default them to null
+    let sortedClassNames = new Map(classes.map((className) => [className, null]))
+
+    // Sort all classes in order
+    // Non-tailwind classes won't be generated and will be left as `null`
+    let rules = generateRules(new Set(classes), context)
+    rules = context.offsets.sort(rules)
+
+    let idx = BigInt(parasiteUtilities.length)
+
+    for (const [, rule] of rules) {
+      sortedClassNames.set(rule.raws.tailwind.candidate, idx++)
     }
 
     return classes.map((className) => {
       let order = sortedClassNames.get(className) ?? null
+      let parasiteIndex = parasiteUtilities.indexOf(className)
 
-      if (order === null && parasiteUtilities.has(className)) {
+      if (order === null && parasiteIndex !== -1) {
         // This will make sure that it is at the very beginning of the
         // `components` layer which technically means 'before any
         // components'.
-        order = context.layerOrder.components
+        order = BigInt(parasiteIndex)
       }
 
       return [className, order]
@@ -853,6 +948,11 @@ function registerPlugins(plugins, context) {
         let negativeClasses = []
 
         for (let [key, value] of Object.entries(options?.values ?? {})) {
+          // Ignore undefined and null values
+          if (value == null) {
+            continue
+          }
+
           output.push(formatClass(utilName, key))
           if (options?.supportsNegativeValues && negateValue(value)) {
             negativeClasses.push(formatClass(utilName, `-${key}`))
@@ -867,12 +967,191 @@ function registerPlugins(plugins, context) {
 
     return output
   }
+
+  // Generate a list of available variants with meta information of the type of variant.
+  context.getVariants = function getVariants() {
+    let result = []
+    for (let [name, options] of context.variantOptions.entries()) {
+      if (options.variantInfo === VARIANT_INFO.Base) continue
+
+      result.push({
+        name,
+        isArbitrary: options.type === Symbol.for('MATCH_VARIANT'),
+        values: Object.keys(options.values ?? {}),
+        hasDash: name !== '@',
+        selectors({ modifier, value } = {}) {
+          let candidate = '__TAILWIND_PLACEHOLDER__'
+
+          let rule = postcss.rule({ selector: `.${candidate}` })
+          let container = postcss.root({ nodes: [rule.clone()] })
+
+          let before = container.toString()
+
+          let fns = (context.variantMap.get(name) ?? []).flatMap(([_, fn]) => fn)
+          let formatStrings = []
+          for (let fn of fns) {
+            let localFormatStrings = []
+
+            let api = {
+              args: { modifier, value: options.values?.[value] ?? value },
+              separator: context.tailwindConfig.separator,
+              modifySelectors(modifierFunction) {
+                // Run the modifierFunction over each rule
+                container.each((rule) => {
+                  if (rule.type !== 'rule') {
+                    return
+                  }
+
+                  rule.selectors = rule.selectors.map((selector) => {
+                    return modifierFunction({
+                      get className() {
+                        return getClassNameFromSelector(selector)
+                      },
+                      selector,
+                    })
+                  })
+                })
+
+                return container
+              },
+              format(str) {
+                localFormatStrings.push(str)
+              },
+              wrap(wrapper) {
+                localFormatStrings.push(`@${wrapper.name} ${wrapper.params} { & }`)
+              },
+              container,
+            }
+
+            let ruleWithVariant = fn(api)
+            if (localFormatStrings.length > 0) {
+              formatStrings.push(localFormatStrings)
+            }
+
+            if (Array.isArray(ruleWithVariant)) {
+              for (let variantFunction of ruleWithVariant) {
+                localFormatStrings = []
+                variantFunction(api)
+                formatStrings.push(localFormatStrings)
+              }
+            }
+          }
+
+          // Reverse engineer the result of the `container`
+          let manualFormatStrings = []
+          let after = container.toString()
+
+          if (before !== after) {
+            // Figure out all selectors
+            container.walkRules((rule) => {
+              let modified = rule.selector
+
+              // Rebuild the base selector, this is what plugin authors would do
+              // as well. E.g.: `${variant}${separator}${className}`.
+              // However, plugin authors probably also prepend or append certain
+              // classes, pseudos, ids, ...
+              let rebuiltBase = selectorParser((selectors) => {
+                selectors.walkClasses((classNode) => {
+                  classNode.value = `${name}${context.tailwindConfig.separator}${classNode.value}`
+                })
+              }).processSync(modified)
+
+              // Now that we know the original selector, the new selector, and
+              // the rebuild part in between, we can replace the part that plugin
+              // authors need to rebuild with `&`, and eventually store it in the
+              // collectedFormats. Similar to what `format('...')` would do.
+              //
+              // E.g.:
+              //                   variant: foo
+              //                  selector: .markdown > p
+              //      modified (by plugin): .foo .foo\\:markdown > p
+              //    rebuiltBase (internal): .foo\\:markdown > p
+              //                    format: .foo &
+              manualFormatStrings.push(modified.replace(rebuiltBase, '&').replace(candidate, '&'))
+            })
+
+            // Figure out all atrules
+            container.walkAtRules((atrule) => {
+              manualFormatStrings.push(`@${atrule.name} (${atrule.params}) { & }`)
+            })
+          }
+
+          let result = formatStrings.map((formatString) =>
+            finalizeSelector(formatVariantSelector('&', ...formatString), {
+              selector: `.${candidate}`,
+              candidate,
+              context,
+              isArbitraryVariant: !(value in (options.values ?? {})),
+            })
+              .replace(`.${candidate}`, '&')
+              .replace('{ & }', '')
+              .trim()
+          )
+
+          if (manualFormatStrings.length > 0) {
+            result.push(formatVariantSelector('&', ...manualFormatStrings))
+          }
+
+          return result
+        },
+      })
+    }
+
+    return result
+  }
+}
+
+/**
+ * Mark as class as retroactively invalid
+ *
+ *
+ * @param {string} candidate
+ */
+function markInvalidUtilityCandidate(context, candidate) {
+  if (!context.classCache.has(candidate)) {
+    return
+  }
+
+  // Mark this as not being a real utility
+  context.notClassCache.add(candidate)
+
+  // Remove it from any candidate-specific caches
+  context.classCache.delete(candidate)
+  context.applyClassCache.delete(candidate)
+  context.candidateRuleMap.delete(candidate)
+  context.candidateRuleCache.delete(candidate)
+
+  // Ensure the stylesheet gets rebuilt
+  context.stylesheetCache = null
+}
+
+/**
+ * Mark as class as retroactively invalid
+ *
+ * @param {import('postcss').Node} node
+ */
+function markInvalidUtilityNode(context, node) {
+  let candidate = node.raws.tailwind.candidate
+
+  if (!candidate) {
+    return
+  }
+
+  for (const entry of context.ruleCache) {
+    if (entry[1].raws.tailwind.candidate === candidate) {
+      context.ruleCache.delete(entry)
+      // context.postCssNodeCache.delete(node)
+    }
+  }
+
+  markInvalidUtilityCandidate(context, candidate)
 }
 
 export function createContext(tailwindConfig, changedContent = [], root = postcss.root()) {
   let context = {
     disposables: [],
     ruleCache: new Set(),
+    candidateRuleCache: new Map(),
     classCache: new Map(),
     applyClassCache: new Map(),
     notClassCache: new Set(),
@@ -882,6 +1161,10 @@ export function createContext(tailwindConfig, changedContent = [], root = postcs
     changedContent: changedContent,
     variantMap: new Map(),
     stylesheetCache: null,
+    variantOptions: new Map(),
+
+    markInvalidUtilityCandidate: (candidate) => markInvalidUtilityCandidate(context, candidate),
+    markInvalidUtilityNode: (node) => markInvalidUtilityNode(context, node),
   }
 
   let resolvedPlugins = resolvePlugins(context, root)
@@ -960,6 +1243,10 @@ export function getContext(
 
   let context = createContext(tailwindConfig, [], root)
 
+  Object.assign(context, {
+    userConfigPath,
+  })
+
   trackModified([...contextDependencies], getFileModifiedMap(context))
 
   // ---