tailwindcss 0.0.0-insiders.ea139f2 → 0.0.0-insiders.ea4e1cd

package/src/util/prefixSelector.js

@@ -1,12 +1,32 @@
 import parser from 'postcss-selector-parser'
-import { tap } from './tap'
-
-export default function (prefix, selector) {
-  return parser((selectors) => {
-    selectors.walkClasses((classSelector) => {
-      tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${prefix}${baseClass}`
-      })
-    })
-  }).processSync(selector)
+
+/**
+ * @template {string | import('postcss-selector-parser').Root} T
+ *
+ * Prefix all classes in the selector with the given prefix
+ *
+ * It can take either a string or a selector AST and will return the same type
+ *
+ * @param {string} prefix
+ * @param {T} selector
+ * @param {boolean} prependNegative
+ * @returns {T}
+ */
+export default function (prefix, selector, prependNegative = false) {
+  if (prefix === '') {
+    return selector
+  }
+
+  let ast = typeof selector === 'string' ? parser().astSync(selector) : selector
+
+  ast.walkClasses((classSelector) => {
+    let baseClass = classSelector.value
+    let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+    classSelector.value = shouldPlaceNegativeBeforePrefix
+      ? `-${prefix}${baseClass.slice(1)}`
+      : `${prefix}${baseClass}`
+  })
+
+  return typeof selector === 'string' ? ast.toString() : ast
 }

package/src/util/pseudoElements.js

@@ -0,0 +1,170 @@
+/** @typedef {import('postcss-selector-parser').Root} Root */
+/** @typedef {import('postcss-selector-parser').Selector} Selector */
+/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
+/** @typedef {import('postcss-selector-parser').Node} Node */
+
+// There are some pseudo-elements that may or may not be:
+
+// **Actionable**
+// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself
+// structural-pseudo-classes are NOT allowed but we don't make
+// The spec is not clear on whether this is allowed or not — but in practice it is.
+
+// **Terminal**
+// It MUST be placed at the end of a selector
+//
+// This is the required in the spec. However, some pseudo elements are not "terminal" because
+// they represent a "boundary piercing" that is compiled out by a build step.
+
+// **Jumpable**
+// Any terminal element may "jump" over combinators when moving to the end of the selector
+//
+// This is a backwards-compat quirk of :before and :after variants.
+
+/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */
+
+/** @type {Record<string, PseudoProperty[]>} */
+let elementProperties = {
+  '::after': ['terminal', 'jumpable'],
+  '::backdrop': ['terminal', 'jumpable'],
+  '::before': ['terminal', 'jumpable'],
+  '::cue': ['terminal'],
+  '::cue-region': ['terminal'],
+  '::first-letter': ['terminal', 'jumpable'],
+  '::first-line': ['terminal', 'jumpable'],
+  '::grammar-error': ['terminal'],
+  '::marker': ['terminal', 'jumpable'],
+  '::part': ['terminal', 'actionable'],
+  '::placeholder': ['terminal', 'jumpable'],
+  '::selection': ['terminal', 'jumpable'],
+  '::slotted': ['terminal'],
+  '::spelling-error': ['terminal'],
+  '::target-text': ['terminal'],
+
+  // other
+  '::file-selector-button': ['terminal', 'actionable'],
+  '::-webkit-progress-bar': ['terminal', 'actionable'],
+
+  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+  '::-webkit-scrollbar': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-button': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-thumb': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track-piece': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-corner': ['terminal', 'actionable'],
+  '::-webkit-resizer': ['terminal', 'actionable'],
+
+  // Note: As a rule, double colons (::) should be used instead of a single colon
+  // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+  // this distinction was not present in older versions of the W3C spec, most
+  // browsers support both syntaxes for the original pseudo-elements.
+  ':after': ['terminal', 'jumpable'],
+  ':before': ['terminal', 'jumpable'],
+  ':first-letter': ['terminal', 'jumpable'],
+  ':first-line': ['terminal', 'jumpable'],
+
+  // The default value is used when the pseudo-element is not recognized
+  // Because it's not recognized, we don't know if it's terminal or not
+  // So we assume it can't be moved AND can have user-action pseudo classes attached to it
+  __default__: ['actionable'],
+}
+
+/**
+ * @param {Selector} sel
+ * @returns {Selector}
+ */
+export function movePseudos(sel) {
+  let [pseudos] = movablePseudos(sel)
+
+  // Remove all pseudo elements from their respective selectors
+  pseudos.forEach(([sel, pseudo]) => sel.removeChild(pseudo))
+
+  // Re-add them to the end of the selector in the correct order.
+  // This moves terminal pseudo elements to the end of the
+  // selector otherwise the selector will not be valid.
+  //
+  // Examples:
+  //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+  //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+  //
+  // The selector `::before:hover` does not work but we
+  // can make it work for you by flipping the order.
+  sel.nodes.push(...pseudos.map(([, pseudo]) => pseudo))
+
+  return sel
+}
+
+/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */
+/** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */
+
+/**
+ * @param {Selector} sel
+ * @returns {MovablePseudosResult}
+ */
+function movablePseudos(sel) {
+  /** @type {MovablePseudo[]} */
+  let buffer = []
+
+  /** @type {Pseudo | null} */
+  let lastSeenElement = null
+
+  for (let node of sel.nodes) {
+    if (node.type === 'combinator') {
+      buffer = buffer.filter(([, node]) => propertiesForPseudo(node).includes('jumpable'))
+      lastSeenElement = null
+    } else if (node.type === 'pseudo') {
+      if (isMovablePseudoElement(node)) {
+        lastSeenElement = node
+        buffer.push([sel, node, null])
+      } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) {
+        buffer.push([sel, node, lastSeenElement])
+      } else {
+        lastSeenElement = null
+      }
+
+      for (let sub of node.nodes ?? []) {
+        let [movable, lastSeenElementInSub] = movablePseudos(sub)
+        lastSeenElement = lastSeenElementInSub || lastSeenElement
+        buffer.push(...movable)
+      }
+    }
+  }
+
+  return [buffer, lastSeenElement]
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isPseudoElement(node) {
+  return node.value.startsWith('::') || elementProperties[node.value] !== undefined
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isMovablePseudoElement(node) {
+  return isPseudoElement(node) && propertiesForPseudo(node).includes('terminal')
+}
+
+/**
+ * @param {Node} node
+ * @param {Pseudo} pseudo
+ * @returns {boolean}
+ */
+function isAttachablePseudoClass(node, pseudo) {
+  if (node.type !== 'pseudo') return false
+  if (isPseudoElement(node)) return false
+
+  return propertiesForPseudo(pseudo).includes('actionable')
+}
+
+/**
+ * @param {Pseudo} pseudo
+ * @returns {PseudoProperty[]}
+ */
+function propertiesForPseudo(pseudo) {
+  return elementProperties[pseudo.value] ?? elementProperties.__default__
+}

package/src/util/removeAlphaVariables.js

@@ -0,0 +1,24 @@
+/**
+ * This function removes any uses of CSS variables used as an alpha channel
+ *
+ * This is required for selectors like `:visited` which do not allow
+ * changes in opacity or external control using CSS variables.
+ *
+ * @param {import('postcss').Container} container
+ * @param {string[]} toRemove
+ */
+export function removeAlphaVariables(container, toRemove) {
+  container.walkDecls((decl) => {
+    if (toRemove.includes(decl.prop)) {
+      decl.remove()
+
+      return
+    }
+
+    for (let varName of toRemove) {
+      if (decl.value.includes(`/ var(${varName})`)) {
+        decl.value = decl.value.replace(`/ var(${varName})`, '')
+      }
+    }
+  })
+}

package/src/util/resolveConfig.js

@@ -1,20 +1,20 @@
 import negateValue from './negateValue'
 import corePluginList from '../corePluginList'
 import configurePlugins from './configurePlugins'
-import defaultConfig from '../../stubs/defaultConfig.stub'
 import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
 import { normalizeConfig } from './normalizeConfig'
+import isPlainObject from './isPlainObject'
+import { cloneDeep } from './cloneDeep'
+import { parseColorFormat } from './pluginUtils'
+import { withAlphaValue } from './withAlphaVariable'
+import toColorValue from './toColorValue'
 
 function isFunction(input) {
   return typeof input === 'function'
 }
 
-function isObject(input) {
-  return typeof input === 'object' && input !== null
-}
-
 function mergeWith(target, ...sources) {
   let customizer = sources.pop()
 
@@ -23,8 +23,8 @@ function mergeWith(target, ...sources) {
       let merged = customizer(target[k], source[k])
 
       if (merged === undefined) {
-        if (isObject(target[k]) && isObject(source[k])) {
-          target[k] = mergeWith(target[k], source[k], customizer)
+        if (isPlainObject(target[k]) && isPlainObject(source[k])) {
+          target[k] = mergeWith({}, target[k], source[k], customizer)
         } else {
           target[k] = source[k]
         }
@@ -98,12 +98,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]
   }
 
@@ -132,32 +132,81 @@ function mergeExtensions({ extend, ...theme }) {
   })
 }
 
+/**
+ *
+ * @param {string} key
+ * @return {Iterable<string[] & {alpha: string | undefined}>}
+ */
+function* toPaths(key) {
+  let path = toPath(key)
+
+  if (path.length === 0) {
+    return
+  }
+
+  yield path
+
+  if (Array.isArray(key)) {
+    return
+  }
+
+  let pattern = /^(.*?)\s*\/\s*([^/]+)$/
+  let matches = key.match(pattern)
+
+  if (matches !== null) {
+    let [, prefix, alpha] = matches
+
+    let newPath = toPath(prefix)
+    newPath.alpha = alpha
+
+    yield newPath
+  }
+}
+
 function resolveFunctionKeys(object) {
+  // theme('colors.red.500 / 0.5') -> ['colors', 'red', '500 / 0', '5]
+
   const resolvePath = (key, defaultValue) => {
-    const path = toPath(key)
+    for (const path of toPaths(key)) {
+      let index = 0
+      let val = object
 
-    let index = 0
-    let val = object
+      while (val !== undefined && val !== null && index < path.length) {
+        val = val[path[index++]]
 
-    while (val !== undefined && val !== null && index < path.length) {
-      val = val[path[index++]]
-      val = isFunction(val) ? val(resolvePath, configUtils) : val
-    }
+        let shouldResolveAsFn =
+          isFunction(val) && (path.alpha === undefined || index <= path.length - 1)
 
-    return val === undefined ? defaultValue : val
-  }
+        val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
+      }
+
+      if (val !== undefined) {
+        if (path.alpha !== undefined) {
+          let normalized = parseColorFormat(val)
+
+          return withAlphaValue(normalized, path.alpha, toColorValue(normalized))
+        }
+
+        if (isPlainObject(val)) {
+          return cloneDeep(val)
+        }
 
-  resolvePath.theme = resolvePath
+        return val
+      }
+    }
 
-  for (let key in configUtils) {
-    resolvePath[key] = configUtils[key]
+    return defaultValue
   }
 
+  Object.assign(resolvePath, {
+    theme: resolvePath,
+    ...configUtils,
+  })
+
   return Object.keys(object).reduce((resolved, key) => {
-    return {
-      ...resolved,
-      [key]: isFunction(object[key]) ? object[key](resolvePath, configUtils) : object[key],
-    }
+    resolved[key] = isFunction(object[key]) ? object[key](resolvePath, configUtils) : object[key]
+
+    return resolved
   }, {})
 }
 
@@ -210,7 +259,6 @@ export default function resolveConfig(configs) {
       prefix: '',
       important: false,
       separator: ':',
-      variantOrder: defaultConfig.variantOrder,
     },
   ]
 

package/src/util/resolveConfigPath.js

@@ -1,6 +1,13 @@
 import fs from 'fs'
 import path from 'path'
 
+const defaultConfigFiles = [
+  './tailwind.config.js',
+  './tailwind.config.cjs',
+  './tailwind.config.mjs',
+  './tailwind.config.ts',
+]
+
 function isObject(value) {
   return typeof value === 'object' && value !== null
 }
@@ -43,7 +50,11 @@ export default function resolveConfigPath(pathOrConfig) {
   }
 
   // require('tailwindcss')
-  for (const configFile of ['./tailwind.config.js', './tailwind.config.cjs']) {
+  return resolveDefaultConfigPath()
+}
+
+export function resolveDefaultConfigPath() {
+  for (const configFile of defaultConfigFiles) {
     try {
       const configPath = path.resolve(configFile)
       fs.accessSync(configPath)

package/src/util/splitAtTopLevelOnly.js

@@ -0,0 +1,52 @@
+/**
+ * This splits a string on a top-level character.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren placement.
+ *
+ * Expected behavior using commas:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ * @param {string} separator
+ */
+export function splitAtTopLevelOnly(input, separator) {
+  let stack = []
+  let parts = []
+  let lastPos = 0
+  let isEscaped = false
+
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
+
+    if (stack.length === 0 && char === separator[0] && !isEscaped) {
+      if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
+        parts.push(input.slice(lastPos, idx))
+        lastPos = idx + separator.length
+      }
+    }
+
+    if (isEscaped) {
+      isEscaped = false
+    } else if (char === '\\') {
+      isEscaped = true
+    }
+
+    if (char === '(' || char === '[' || char === '{') {
+      stack.push(char)
+    } else if (
+      (char === ')' && stack[stack.length - 1] === '(') ||
+      (char === ']' && stack[stack.length - 1] === '[') ||
+      (char === '}' && stack[stack.length - 1] === '{')
+    ) {
+      stack.pop()
+    }
+  }
+
+  parts.push(input.slice(lastPos))
+
+  return parts
+}

package/src/util/toPath.js

@@ -1,4 +1,26 @@
+/**
+ * Parse a path string into an array of path segments.
+ *
+ * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
+ *
+ * Example:
+ * a -> ['a']
+ * a.b.c -> ['a', 'b', 'c']
+ * a[b].c -> ['a', 'b', 'c']
+ * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
+ * a[b][c][d] -> ['a', 'b', 'c', 'd']
+ *
+ * @param {string|string[]} path
+ **/
 export function toPath(path) {
   if (Array.isArray(path)) return path
-  return path.split(/[\.\]\[]+/g)
+
+  let openBrackets = path.split('[').length - 1
+  let closedBrackets = path.split(']').length - 1
+
+  if (openBrackets !== closedBrackets) {
+    throw new Error(`Path is invalid. Has unbalanced brackets: ${path}`)
+  }
+
+  return path.split(/\.(?![^\[]*\])|[\[\]]/g).filter(Boolean)
 }

package/src/util/transformThemeValue.js

@@ -1,4 +1,5 @@
 import postcss from 'postcss'
+import isPlainObject from './isPlainObject'
 
 export default function transformThemeValue(themeSection) {
   if (['fontSize', 'outline'].includes(themeSection)) {
@@ -10,9 +11,16 @@ export default function transformThemeValue(themeSection) {
     }
   }
 
+  if (themeSection === 'fontFamily') {
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      let families = Array.isArray(value) && isPlainObject(value[1]) ? value[0] : value
+      return Array.isArray(families) ? families.join(', ') : families
+    }
+  }
+
   if (
     [
-      'fontFamily',
       'boxShadow',
       'transitionProperty',
       'transitionDuration',
@@ -44,8 +52,10 @@ export default function transformThemeValue(themeSection) {
     }
   }
 
-  return (value) => {
-    if (typeof value === 'function') value = value({})
+  return (value, opts = {}) => {
+    if (typeof value === 'function') {
+      value = value(opts)
+    }
 
     return value
   }

package/src/util/validateConfig.js

@@ -0,0 +1,26 @@
+import log from './log'
+
+export function validateConfig(config) {
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` option in your Tailwind CSS configuration is missing or empty.',
+      'Configure your content sources or your generated CSS will be missing styles.',
+      'https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
+  // Warn if the line-clamp plugin is installed
+  try {
+    let plugin = require('@tailwindcss/line-clamp')
+    if (config.plugins.includes(plugin)) {
+      log.warn('line-clamp-in-core', [
+        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
+        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
+      ])
+
+      config.plugins = config.plugins.filter((p) => p !== plugin)
+    }
+  } catch {}
+
+  return config
+}

package/src/util/validateFormalSyntax.js

@@ -0,0 +1,34 @@
+import { length, percentage } from './dataTypes'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
+/**
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#formal_syntax
+ *
+ * background-size =
+ *  <bg-size>#
+ *
+ * <bg-size> =
+ *   [ <length-percentage [0,∞]> | auto ]{1,2}  |
+ *   cover                                      |
+ *   contain
+ *
+ * <length-percentage> =
+ *   <length>      |
+ *   <percentage>
+ *
+ * @param {string} value
+ */
+export function backgroundSize(value) {
+  let keywordValues = ['cover', 'contain']
+  // the <length-percentage> type will probably be a css function
+  // so we have to use `splitAtTopLevelOnly`
+  return splitAtTopLevelOnly(value, ',').every((part) => {
+    let sizes = splitAtTopLevelOnly(part, '_').filter(Boolean)
+    if (sizes.length === 1 && keywordValues.includes(sizes[0])) return true
+
+    if (sizes.length !== 1 && sizes.length !== 2) return false
+
+    return sizes.every((size) => length(size) || percentage(size) || size === 'auto')
+  })
+}

package/src/util/withAlphaVariable.js

@@ -5,7 +5,7 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
     return color({ opacityValue: alphaValue })
   }
 
-  let parsed = parseColor(color)
+  let parsed = parseColor(color, { loose: true })
 
   if (parsed === null) {
     return defaultValue

package/stubs/.gitignore

@@ -0,0 +1 @@
+!*

package/stubs/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}