tailwindcss 0.0.0-insiders.df011dc → 0.0.0-insiders.e2d5f21

package/src/lib/resolveDefaultsAtRules.js

@@ -2,42 +2,58 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { flagEnabled } from '../featureFlags'
 
+let getNode = {
+  id(node) {
+    return selectorParser.attribute({
+      attribute: 'id',
+      operator: '=',
+      value: node.value,
+      quoteMark: '"',
+    })
+  },
+}
+
 function minimumImpactSelector(nodes) {
-  let pseudos = nodes.filter((n) => n.type === 'pseudo')
-  let [bestNode] = nodes
-
-  for (let [type, getNode = (n) => n] of [
-    ['class'],
-    [
-      'id',
-      (n) =>
-        selectorParser.attribute({
-          attribute: 'id',
-          operator: '=',
-          value: n.value,
-          quoteMark: '"',
-        }),
-    ],
-    ['attribute'],
-  ]) {
-    let match = nodes.find((n) => n.type === type)
-
-    if (match) {
-      bestNode = getNode(match)
-      break
-    }
+  let rest = nodes
+    .filter((node) => {
+      // Keep non-pseudo nodes
+      if (node.type !== 'pseudo') return true
+
+      // Keep pseudo nodes that have subnodes
+      // E.g.: `:not()` contains subnodes inside the parentheses
+      if (node.nodes.length > 0) return true
+
+      // Keep pseudo `elements`
+      // This implicitly means that we ignore pseudo `classes`
+      return (
+        node.value.startsWith('::') ||
+        [':before', ':after', ':first-line', ':first-letter'].includes(node.value)
+      )
+    })
+    .reverse()
+
+  let searchFor = new Set(['tag', 'class', 'id', 'attribute'])
+
+  let splitPointIdx = rest.findIndex((n) => searchFor.has(n.type))
+  if (splitPointIdx === -1) return rest.reverse().join('').trim()
+
+  let node = rest[splitPointIdx]
+  let bestNode = getNode[node.type] ? getNode[node.type](node) : node
+
+  rest = rest.slice(0, splitPointIdx)
+
+  let combinatorIdx = rest.findIndex((n) => n.type === 'combinator' && n.value === '>')
+  if (combinatorIdx !== -1) {
+    rest.splice(0, combinatorIdx)
+    rest.unshift(selectorParser.universal())
   }
 
-  return [bestNode, ...pseudos].join('').trim()
+  return [bestNode, ...rest.reverse()].join('').trim()
 }
 
-let elementSelectorParser = selectorParser((selectors) => {
+export let elementSelectorParser = selectorParser((selectors) => {
   return selectors.map((s) => {
-    let nodes = s
-      .split((n) => n.type === 'combinator')
-      .pop()
-      .filter((n) => n.type !== 'pseudo' || n.value.startsWith('::'))
-
+    let nodes = s.split((n) => n.type === 'combinator' && n.value === ' ').pop()
     return minimumImpactSelector(nodes)
   })
 })

package/src/lib/setupContextUtils.js

@@ -9,13 +9,45 @@ import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
 import isPlainObject from '../util/isPlainObject'
 import escapeClassName from '../util/escapeClassName'
-import nameClass from '../util/nameClass'
+import nameClass, { formatClass } from '../util/nameClass'
 import { coerceValue } from '../util/pluginUtils'
 import bigSign from '../util/bigSign'
-import * as corePlugins from '../corePlugins'
+import { variantPlugins, corePlugins } from '../corePlugins'
 import * as sharedState from './sharedState'
 import { env } from './sharedState'
 import { toPath } from '../util/toPath'
+import log from '../util/log'
+import negateValue from '../util/negateValue'
+import isValidArbitraryValue from '../util/isValidArbitraryValue'
+
+function parseVariantFormatString(input) {
+  if (input.includes('{')) {
+    if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
+
+    return input
+      .split(/{(.*)}/gim)
+      .flatMap((line) => parseVariantFormatString(line))
+      .filter(Boolean)
+  }
+
+  return [input.trim()]
+}
+
+function isBalanced(input) {
+  let count = 0
+
+  for (let char of input) {
+    if (char === '{') {
+      count++
+    } else if (char === '}') {
+      if (--count < 0) {
+        return false // unbalanced
+      }
+    }
+  }
+
+  return count === 0
+}
 
 function insertInto(list, value, { before = [] } = {}) {
   before = [].concat(before)
@@ -58,11 +90,22 @@ function getClasses(selector) {
 }
 
 function extractCandidates(node) {
-  let classes = node.type === 'rule' ? getClasses(node.selector) : []
+  let classes = []
+
+  if (node.type === 'rule') {
+    for (let selector of node.selectors) {
+      let classCandidates = getClasses(selector)
+      // At least one of the selectors contains non-"on-demandable" candidates.
+      if (classCandidates.length === 0) return []
+
+      classes = [...classes, ...classCandidates]
+    }
+    return classes
+  }
 
   if (node.type === 'atrule') {
     node.walkRules((rule) => {
-      classes = [...classes, ...getClasses(rule.selector)]
+      classes = [...classes, ...rule.selectors.flatMap((selector) => getClasses(selector))]
     })
   }
 
@@ -88,65 +131,7 @@ function withIdentifiers(styles) {
   })
 }
 
-let matchingBrackets = new Map([
-  ['{', '}'],
-  ['[', ']'],
-  ['(', ')'],
-])
-let inverseMatchingBrackets = new Map(
-  Array.from(matchingBrackets.entries()).map(([k, v]) => [v, k])
-)
-
-let quotes = new Set(['"', "'", '`'])
-
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-  let stack = []
-  let inQuotes = false
-
-  for (let i = 0; i < value.length; i++) {
-    let char = value[i]
-
-    // Non-escaped quotes allow us to "allow" anything in between
-    if (quotes.has(char) && value[i - 1] !== '\\') {
-      inQuotes = !inQuotes
-    }
-
-    if (inQuotes) continue
-    if (value[i - 1] === '\\') continue // Escaped
-
-    if (matchingBrackets.has(char)) {
-      stack.push(char)
-    } else if (inverseMatchingBrackets.has(char)) {
-      let inverse = inverseMatchingBrackets.get(char)
-
-      // Nothing to pop from, therefore it is unbalanced
-      if (stack.length <= 0) {
-        return false
-      }
-
-      // Popped value must match the inverse value, otherwise it is unbalanced
-      if (stack.pop() !== inverse) {
-        return false
-      }
-    }
-  }
-
-  // If there is still something on the stack, it is also unbalanced
-  if (stack.length > 0) {
-    return false
-  }
-
-  // All good, totally balanced!
-  return true
-}
-
-function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets }) {
+function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
   }
@@ -164,16 +149,41 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       return identifier
     }
 
-    if (typeof context.tailwindConfig.prefix === 'function') {
-      return prefixSelector(context.tailwindConfig.prefix, `.${identifier}`).substr(1)
-    }
-
     return context.tailwindConfig.prefix + identifier
   }
 
   return {
     addVariant(variantName, variantFunctions, options = {}) {
-      variantFunctions = [].concat(variantFunctions)
+      variantFunctions = [].concat(variantFunctions).map((variantFunction) => {
+        if (typeof variantFunction !== 'string') {
+          // Safelist public API functions
+          return ({ modifySelectors, container, separator }) => {
+            return variantFunction({ modifySelectors, container, separator })
+          }
+        }
+
+        variantFunction = variantFunction
+          .replace(/\n+/g, '')
+          .replace(/\s{1,}/g, ' ')
+          .trim()
+
+        let fns = parseVariantFormatString(variantFunction)
+          .map((str) => {
+            if (!str.startsWith('@')) {
+              return ({ format }) => format(str)
+            }
+
+            let [, name, params] = /@(.*?) (.*)/g.exec(str)
+            return ({ wrap }) => wrap(postcss.atRule({ name, params }))
+          })
+          .reverse()
+
+        return (api) => {
+          for (let fn of fns) {
+            fn(api)
+          }
+        }
+      })
 
       insertInto(variantList, variantName, options)
       variantMap.set(variantName, variantFunctions)
@@ -225,22 +235,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     },
     addComponents(components, options) {
       let defaultOptions = {
-        variants: [],
         respectPrefix: true,
         respectImportant: false,
-        respectVariants: true,
       }
 
-      options = Object.assign(
-        {},
-        defaultOptions,
-        Array.isArray(options) ? { variants: options } : options
-      )
+      options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options)
 
       for (let [identifier, rule] of withIdentifiers(components)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let offset = offsets.components++
 
+        classList.add(prefixedIdentifier)
+
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
@@ -252,22 +258,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     },
     addUtilities(utilities, options) {
       let defaultOptions = {
-        variants: [],
         respectPrefix: true,
         respectImportant: true,
-        respectVariants: true,
       }
 
-      options = Object.assign(
-        {},
-        defaultOptions,
-        Array.isArray(options) ? { variants: options } : options
-      )
+      options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options)
 
       for (let [identifier, rule] of withIdentifiers(utilities)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let offset = offsets.utilities++
 
+        classList.add(prefixedIdentifier)
+
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
@@ -279,10 +281,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     },
     matchUtilities: function (utilities, options) {
       let defaultOptions = {
-        variants: [],
         respectPrefix: true,
         respectImportant: true,
-        respectVariants: true,
       }
 
       options = { ...defaultOptions, ...options }
@@ -293,12 +293,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let rule = utilities[identifier]
 
-        function wrapped(modifier) {
+        classList.add([prefixedIdentifier, options])
+
+        function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
+
+          if (value === undefined) {
+            return []
+          }
 
-          if (!type.includes(coercedType) || value === undefined) {
+          if (!type.includes(coercedType) && !isOnlyPlugin) {
             return []
           }
 
@@ -306,21 +312,14 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             return []
           }
 
-          let includedRules = []
           let ruleSets = []
-            .concat(
-              rule(value, {
-                includeRules(rules) {
-                  includedRules.push(...rules)
-                },
-              })
-            )
+            .concat(rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
             }))
 
-          return [...includedRules, ...ruleSets]
+          return ruleSets
         }
 
         let withOffsets = [{ sort: offset, layer: 'utilities', options }, wrapped]
@@ -329,6 +328,68 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
 
+        context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
+      }
+    },
+    matchComponents: function (components, options) {
+      let defaultOptions = {
+        respectPrefix: true,
+        respectImportant: false,
+      }
+
+      options = { ...defaultOptions, ...options }
+
+      let offset = offsets.components++
+
+      for (let identifier in components) {
+        let prefixedIdentifier = prefixIdentifier(identifier, options)
+        let rule = components[identifier]
+
+        classList.add([prefixedIdentifier, options])
+
+        function wrapped(modifier, { isOnlyPlugin }) {
+          let { type = 'any' } = options
+          type = [].concat(type)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
+
+          if (value === undefined) {
+            return []
+          }
+
+          if (!type.includes(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 ruleSets = []
+            .concat(rule(value))
+            .filter(Boolean)
+            .map((declaration) => ({
+              [nameClass(identifier, modifier)]: declaration,
+            }))
+
+          return ruleSets
+        }
+
+        let withOffsets = [{ sort: offset, layer: 'components', options }, wrapped]
+
+        if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+          context.candidateRuleMap.set(prefixedIdentifier, [])
+        }
+
         context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
       }
     },
@@ -424,8 +485,8 @@ function collectLayerPlugins(root) {
   return layerPlugins
 }
 
-function resolvePlugins(context, tailwindDirectives, root) {
-  let corePluginList = Object.entries(corePlugins)
+function resolvePlugins(context, root) {
+  let corePluginList = Object.entries({ ...variantPlugins, ...corePlugins })
     .map(([name, plugin]) => {
       if (!context.tailwindConfig.corePlugins.includes(name)) {
         return null
@@ -443,16 +504,21 @@ function resolvePlugins(context, tailwindDirectives, root) {
     return typeof plugin === 'function' ? plugin : plugin.handler
   })
 
-  let layerPlugins = collectLayerPlugins(root, tailwindDirectives)
+  let layerPlugins = collectLayerPlugins(root)
 
   // TODO: This is a workaround for backwards compatibility, since custom variants
   // were historically sorted before screen/stackable variants.
-  let beforeVariants = [corePlugins['pseudoElementVariants'], corePlugins['pseudoClassVariants']]
+  let beforeVariants = [
+    variantPlugins['pseudoElementVariants'],
+    variantPlugins['pseudoClassVariants'],
+  ]
   let afterVariants = [
-    corePlugins['directionVariants'],
-    corePlugins['reducedMotionVariants'],
-    corePlugins['darkVariants'],
-    corePlugins['screenVariants'],
+    variantPlugins['directionVariants'],
+    variantPlugins['reducedMotionVariants'],
+    variantPlugins['darkVariants'],
+    variantPlugins['printVariant'],
+    variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
@@ -468,10 +534,13 @@ function registerPlugins(plugins, context) {
     user: 0n,
   }
 
+  let classList = new Set()
+
   let pluginApi = buildPluginApi(context.tailwindConfig, context, {
     variantList,
     variantMap,
     offsets,
+    classList,
   })
 
   for (let plugin of plugins) {
@@ -492,6 +561,10 @@ function registerPlugins(plugins, context) {
   ])
   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 = {
     base: (1n << reservedBits) << 0n,
     components: (1n << reservedBits) << 1n,
@@ -523,14 +596,104 @@ function registerPlugins(plugins, context) {
       variantFunctions.map((variantFunction, idx) => [sort << BigInt(idx), variantFunction])
     )
   }
+
+  let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
+  if (safelist.length > 0) {
+    let checks = []
+
+    for (let value of safelist) {
+      if (typeof value === 'string') {
+        context.changedContent.push({ content: value, extension: 'html' })
+        continue
+      }
+
+      if (value instanceof RegExp) {
+        log.warn('root-regex', [
+          'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
+          'Update your `safelist` configuration to eliminate this warning.',
+          // TODO: Add https://tw.wtf/regex-safelist
+        ])
+        continue
+      }
+
+      checks.push(value)
+    }
+
+    if (checks.length > 0) {
+      let patternMatchingCount = new Map()
+
+      for (let util of classList) {
+        let utils = Array.isArray(util)
+          ? (() => {
+              let [utilName, options] = util
+              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+            })()
+          : [util]
+
+        for (let util of utils) {
+          for (let { pattern, variants = [] } of checks) {
+            // RegExp with the /g flag are stateful, so let's reset the last
+            // index pointer to reset the state.
+            pattern.lastIndex = 0
+
+            if (!patternMatchingCount.has(pattern)) {
+              patternMatchingCount.set(pattern, 0)
+            }
+
+            if (!pattern.test(util)) continue
+
+            patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1)
+
+            context.changedContent.push({ content: util, extension: 'html' })
+            for (let variant of variants) {
+              context.changedContent.push({
+                content: variant + context.tailwindConfig.separator + util,
+                extension: 'html',
+              })
+            }
+          }
+        }
+      }
+
+      for (let [regex, count] of patternMatchingCount.entries()) {
+        if (count !== 0) continue
+
+        log.warn([
+          `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
+          'Fix this pattern or remove it from your `safelist` configuration.',
+        ])
+      }
+    }
+  }
+
+  // Generate a list of strings for autocompletion purposes, e.g.
+  // ['uppercase', 'lowercase', ...]
+  context.getClassList = function () {
+    let output = []
+
+    for (let util of classList) {
+      if (Array.isArray(util)) {
+        let [utilName, options] = util
+        let negativeClasses = []
+
+        for (let [key, value] of Object.entries(options?.values ?? {})) {
+          output.push(formatClass(utilName, key))
+          if (options?.supportsNegativeValues && negateValue(value)) {
+            negativeClasses.push(formatClass(utilName, `-${key}`))
+          }
+        }
+
+        output.push(...negativeClasses)
+      } else {
+        output.push(util)
+      }
+    }
+
+    return output
+  }
 }
 
-export function createContext(
-  tailwindConfig,
-  changedContent = [],
-  tailwindDirectives = new Set(),
-  root = postcss.root()
-) {
+export function createContext(tailwindConfig, changedContent = [], root = postcss.root()) {
   let context = {
     disposables: [],
     ruleCache: new Set(),
@@ -545,7 +708,7 @@ export function createContext(
     stylesheetCache: null,
   }
 
-  let resolvedPlugins = resolvePlugins(context, tailwindDirectives, root)
+  let resolvedPlugins = resolvePlugins(context, root)
   registerPlugins(resolvedPlugins, context)
 
   return context
@@ -556,7 +719,6 @@ let configContextMap = sharedState.configContextMap
 let contextSourcesMap = sharedState.contextSourcesMap
 
 export function getContext(
-  tailwindDirectives,
   root,
   result,
   tailwindConfig,
@@ -618,7 +780,7 @@ export function getContext(
 
   env.DEBUG && console.log('Setting up new context...')
 
-  let context = createContext(tailwindConfig, [], tailwindDirectives, root)
+  let context = createContext(tailwindConfig, [], root)
 
   trackModified([...contextDependencies], getFileModifiedMap(context))
 

package/src/lib/setupTrackingContext.js

@@ -8,7 +8,7 @@ import normalizePath from 'normalize-path'
 import hash from '../util/hashConfig'
 import getModuleDependencies from '../lib/getModuleDependencies'
 
-import resolveConfig from '../../resolveConfig'
+import resolveConfig from '../public/resolve-config'
 
 import resolveConfigPath from '../util/resolveConfigPath'
 
@@ -26,9 +26,9 @@ function getCandidateFiles(context, tailwindConfig) {
     return candidateFilesCache.get(context)
   }
 
-  let candidateFiles = tailwindConfig.content.content
+  let candidateFiles = tailwindConfig.content.files
     .filter((item) => typeof item === 'string')
-    .map((contentPath) => normalizePath(path.resolve(contentPath)))
+    .map((contentPath) => normalizePath(contentPath))
 
   return candidateFilesCache.set(context, candidateFiles).get(context)
 }
@@ -77,10 +77,9 @@ function getTailwindConfig(configOrPath) {
 }
 
 function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-  let changedContent = context.tailwindConfig.content.content
+  let changedContent = context.tailwindConfig.content.files
     .filter((item) => typeof item.raw === 'string')
-    .concat(context.tailwindConfig.content.safelist)
-    .map(({ raw, extension }) => ({ content: raw, extension }))
+    .map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
 
   for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {
     let content = fs.readFileSync(changedFile, 'utf8')
@@ -138,7 +137,6 @@ export default function setupTrackingContext(configOrPath) {
       }
 
       let [context] = getContext(
-        tailwindDirectives,
         root,
         result,
         tailwindConfig,
@@ -159,7 +157,10 @@ export default function setupTrackingContext(configOrPath) {
 
         // Add template paths as postcss dependencies.
         for (let fileOrGlob of candidateFiles) {
-          registerDependency(parseDependency(fileOrGlob))
+          let dependency = parseDependency(fileOrGlob)
+          if (dependency) {
+            registerDependency(dependency)
+          }
         }
 
         for (let changedContent of resolvedChangedContent(