tailwindcss 3.1.8 → 3.2.0

package/src/util/parseGlob.js

@@ -0,0 +1,24 @@
+import globParent from 'glob-parent'
+
+// Based on `glob-base`
+// https://github.com/micromatch/glob-base/blob/master/index.js
+export function parseGlob(pattern) {
+  let glob = pattern
+  let base = globParent(pattern)
+
+  if (base !== '.') {
+    glob = pattern.substr(base.length)
+    if (glob.charAt(0) === '/') {
+      glob = glob.substr(1)
+    }
+  }
+
+  if (glob.substr(0, 2) === './') {
+    glob = glob.substr(2)
+  }
+  if (glob.charAt(0) === '/') {
+    glob = glob.substr(1)
+  }
+
+  return { base, glob }
+}

package/src/util/pluginUtils.js

@@ -18,6 +18,8 @@ import {
   shadow,
 } from './dataTypes'
 import negateValue from './negateValue'
+import { backgroundSize } from './validateFormalSyntax'
+import { flagEnabled } from '../featureFlags.js'
 
 export function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
@@ -85,11 +87,20 @@ function isArbitraryValue(input) {
   return input.startsWith('[') && input.endsWith(']')
 }
 
-function splitAlpha(modifier) {
+function splitUtilityModifier(modifier) {
   let slashIdx = modifier.lastIndexOf('/')
 
   if (slashIdx === -1 || slashIdx === modifier.length - 1) {
-    return [modifier]
+    return [modifier, undefined]
+  }
+
+  let arbitrary = isArbitraryValue(modifier)
+
+  // The modifier could be of the form `[foo]/[bar]`
+  // We want to handle this case properly
+  // without affecting `[foo/bar]`
+  if (arbitrary && !modifier.includes(']/[')) {
+    return [modifier, undefined]
   }
 
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
@@ -105,12 +116,18 @@ export function parseColorFormat(value) {
   return value
 }
 
-export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
-  if (options.values?.[modifier] !== undefined) {
-    return parseColorFormat(options.values?.[modifier])
+export function asColor(
+  _,
+  options = {},
+  { tailwindConfig = {}, utilityModifier, rawModifier } = {}
+) {
+  if (options.values?.[rawModifier] !== undefined) {
+    return parseColorFormat(options.values?.[rawModifier])
   }
 
-  let [color, alpha] = splitAlpha(modifier)
+  // TODO: Hoist this up to getMatchingTypes or something
+  // We do this here because we need the alpha value (if any)
+  let [color, alpha] = splitUtilityModifier(rawModifier)
 
   if (alpha !== undefined) {
     let normalizedColor =
@@ -133,7 +150,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
-  return asValue(modifier, options, { validate: validateColor })
+  return asValue(rawModifier, options, { rawModifier, utilityModifier, validate: validateColor })
 }
 
 export function asLookupValue(modifier, options = {}) {
@@ -141,12 +158,12 @@ export function asLookupValue(modifier, options = {}) {
 }
 
 function guess(validate) {
-  return (modifier, options) => {
-    return asValue(modifier, options, { validate })
+  return (modifier, options, extras) => {
+    return asValue(modifier, options, { ...extras, validate })
   }
 }
 
-let typeMap = {
+export let typeMap = {
   any: asValue,
   color: asColor,
   url: guess(url),
@@ -162,6 +179,7 @@ let typeMap = {
   'absolute-size': guess(absoluteSize),
   'relative-size': guess(relativeSize),
   shadow: guess(shadow),
+  size: guess(backgroundSize),
 }
 
 let supportedTypes = Object.keys(typeMap)
@@ -190,15 +208,73 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
     }
 
     if (value.length > 0 && supportedTypes.includes(explicitType)) {
-      return [asValue(`[${value}]`, options), explicitType]
+      return [asValue(`[${value}]`, options), explicitType, null]
     }
   }
 
+  let matches = getMatchingTypes(types, modifier, options, tailwindConfig)
+
   // Find first matching type
-  for (let type of [].concat(types)) {
-    let result = typeMap[type](modifier, options, { tailwindConfig })
-    if (result !== undefined) return [result, type]
+  for (let match of matches) {
+    return match
   }
 
   return []
 }
+
+/**
+ *
+ * @param {{type: string}[]} types
+ * @param {string} rawModifier
+ * @param {any} options
+ * @param {any} tailwindConfig
+ * @returns {Iterator<[value: string, type: string, modifier: string | null]>}
+ */
+export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
+  let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
+  let canUseUtilityModifier =
+    modifiersEnabled &&
+    options.modifiers != null &&
+    (options.modifiers === 'any' || typeof options.modifiers === 'object')
+
+  let [modifier, utilityModifier] = canUseUtilityModifier
+    ? splitUtilityModifier(rawModifier)
+    : [rawModifier, undefined]
+
+  if (utilityModifier !== undefined && modifier === '') {
+    modifier = 'DEFAULT'
+  }
+
+  // Check the full value first
+  // TODO: Move to asValue… somehow
+  if (utilityModifier !== undefined) {
+    if (typeof options.modifiers === 'object') {
+      let configValue = options.modifiers?.[utilityModifier] ?? null
+      if (configValue !== null) {
+        utilityModifier = configValue
+      } else if (isArbitraryValue(utilityModifier)) {
+        utilityModifier = utilityModifier.slice(1, -1)
+      }
+    }
+
+    let result = asValue(rawModifier, options, { rawModifier, utilityModifier, tailwindConfig })
+    if (result !== undefined) {
+      yield [result, 'any', null]
+    }
+  }
+
+  for (const { type } of types ?? []) {
+    let result = typeMap[type](modifier, options, {
+      rawModifier,
+      utilityModifier,
+      tailwindConfig,
+    })
+
+    if (result === undefined) {
+      continue
+    }
+
+    yield [result, type, utilityModifier ?? null]
+  }
+}

package/src/util/resolveConfig.js

@@ -29,7 +29,7 @@ function mergeWith(target, ...sources) {
 
       if (merged === undefined) {
         if (isObject(target[k]) && isObject(source[k])) {
-          target[k] = mergeWith(target[k], source[k], customizer)
+          target[k] = mergeWith({}, target[k], source[k], customizer)
         } else {
           target[k] = source[k]
         }

package/src/util/splitAtTopLevelOnly.js

@@ -1,5 +1,3 @@
-import * as regex from '../lib/regex'
-
 /**
  * This splits a string on a top-level character.
  *
@@ -15,57 +13,33 @@ import * as regex from '../lib/regex'
  * @param {string} input
  * @param {string} separator
  */
-export function* splitAtTopLevelOnly(input, separator) {
-  let SPECIALS = new RegExp(`[(){}\\[\\]${regex.escape(separator)}]`, 'g')
-
-  let depth = 0
-  let lastIndex = 0
-  let found = false
-  let separatorIndex = 0
-  let separatorStart = 0
-  let separatorLength = separator.length
-
-  // Find all paren-like things & character
-  // And only split on commas if they're top-level
-  for (let match of input.matchAll(SPECIALS)) {
-    let matchesSeparator = match[0] === separator[separatorIndex]
-    let atEndOfSeparator = separatorIndex === separatorLength - 1
-    let matchesFullSeparator = matchesSeparator && atEndOfSeparator
-
-    if (match[0] === '(') depth++
-    if (match[0] === ')') depth--
-    if (match[0] === '[') depth++
-    if (match[0] === ']') depth--
-    if (match[0] === '{') depth++
-    if (match[0] === '}') depth--
-
-    if (matchesSeparator && depth === 0) {
-      if (separatorStart === 0) {
-        separatorStart = match.index
+export function splitAtTopLevelOnly(input, separator) {
+  let stack = []
+  let parts = []
+  let lastPos = 0
+
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
+
+    if (stack.length === 0 && char === separator[0]) {
+      if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
+        parts.push(input.slice(lastPos, idx))
+        lastPos = idx + separator.length
       }
-
-      separatorIndex++
     }
 
-    if (matchesFullSeparator && depth === 0) {
-      found = true
-
-      yield input.substring(lastIndex, separatorStart)
-      lastIndex = separatorStart + separatorLength
-    }
-
-    if (separatorIndex === separatorLength) {
-      separatorIndex = 0
-      separatorStart = 0
+    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()
     }
   }
 
-  // Provide the last segment of the string if available
-  // Otherwise the whole string since no `char`s were found
-  // This mirrors the behavior of string.split()
-  if (found) {
-    yield input.substring(lastIndex)
-  } else {
-    yield input
-  }
+  parts.push(input.slice(lastPos))
+
+  return parts
 }

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',

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/stubs/defaultConfig.stub.js

@@ -112,6 +112,16 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    aria: {
+      checked: 'checked="true"',
+      disabled: 'disabled="true"',
+      expanded: 'expanded="true"',
+      hidden: 'hidden="true"',
+      pressed: 'pressed="true"',
+      readonly: 'readonly="true"',
+      required: 'required="true"',
+      selected: 'selected="true"',
+    },
     aspectRatio: {
       auto: 'auto',
       square: '1 / 1',
@@ -284,7 +294,10 @@ module.exports = {
       '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
       none: '0 0 #0000',
     },
-    fill: ({ theme }) => theme('colors'),
+    fill: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
     grayscale: {
       0: '0',
       DEFAULT: '100%',
@@ -721,7 +734,7 @@ module.exports = {
       8: '8px',
     },
     ringColor: ({ theme }) => ({
-      DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
+      DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),
     }),
     ringOffsetColor: ({ theme }) => theme('colors'),
@@ -793,7 +806,10 @@ module.exports = {
     space: ({ theme }) => ({
       ...theme('spacing'),
     }),
-    stroke: ({ theme }) => theme('colors'),
+    stroke: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
     strokeWidth: {
       0: '0',
       1: '1',

package/tmp.css

@@ -0,0 +1,11 @@
+@media (prefers-color-scheme: dark) {
+  @supports (hover: hover) {
+    .dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
+      bg-\[\#0088cc\]\)
+      > *:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(0 136 204 / var(--tw-bg-opacity));
+      --potato: baked;
+    }
+  }
+}

package/tmp.dependency-graph.js

@@ -0,0 +1,2 @@
+1. Push tag
+2. Draft release

package/tmp.in.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;