tailwindcss 3.0.24 → 3.1.2

package/src/util/log.js

@@ -3,7 +3,7 @@ import colors from 'picocolors'
 let alreadyShown = new Set()
 
 function log(type, messages, key) {
-  if (process.env.JEST_WORKER_ID !== undefined) return
+  if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)

package/src/util/normalizeConfig.js

@@ -258,13 +258,5 @@ export function normalizeConfig(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',
-    ])
-  }
-
   return config
 }

package/src/util/parseBoxShadowValue.js

@@ -1,58 +1,11 @@
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
-let SPECIALS = /[(),]/g
-
-/**
- * This splits a string on top-level commas.
- *
- * 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 vs comma
- * placement. Before we'd only exclude commas from the inner-most nested
- * set of parens rather than any commas that were not contained in parens
- * at all which is the intended behavior here.
- *
- * Expected behavior:
- * 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
- */
-function* splitByTopLevelCommas(input) {
-  SPECIALS.lastIndex = -1
-
-  let depth = 0
-  let lastIndex = 0
-  let found = false
-
-  // Find all parens & commas
-  // And only split on commas if they're top-level
-  for (let match of input.matchAll(SPECIALS)) {
-    if (match[0] === '(') depth++
-    if (match[0] === ')') depth--
-    if (match[0] === ',' && depth === 0) {
-      found = true
-
-      yield input.substring(lastIndex, match.index)
-      lastIndex = match.index + match[0].length
-    }
-  }
-
-  // Provide the last segment of the string if available
-  // Otherwise the whole string since no commas were found
-  // This mirrors the behavior of string.split()
-  if (found) {
-    yield input.substring(lastIndex)
-  } else {
-    yield input
-  }
-}
-
 export function parseBoxShadowValue(input) {
-  let shadows = Array.from(splitByTopLevelCommas(input))
+  let shadows = Array.from(splitAtTopLevelOnly(input, ','))
   return shadows.map((shadow) => {
     let value = shadow.trim()
     let result = { raw: value }

package/src/util/pluginUtils.js

@@ -95,9 +95,19 @@ function splitAlpha(modifier) {
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
+export function parseColorFormat(value) {
+  if (typeof value === 'string' && value.includes('<alpha-value>')) {
+    let oldValue = value
+
+    return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+  }
+
+  return value
+}
+
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
-    return options.values?.[modifier]
+    return parseColorFormat(options.values?.[modifier])
   }
 
   let [color, alpha] = splitAlpha(modifier)
@@ -110,6 +120,8 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
       return undefined
     }
 
+    normalizedColor = parseColorFormat(normalizedColor)
+
     if (isArbitraryValue(alpha)) {
       return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }

package/src/util/resolveConfig.js

@@ -8,6 +8,9 @@ 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'
@@ -66,38 +69,6 @@ const configUtils = {
         {}
       )
   },
-  /*
-  rgb(property) {
-    if (!property.startsWith('--')) {
-      throw new Error(
-        'The rgb() helper requires a custom property name to be passed as the first argument.'
-      )
-    }
-
-    return ({ opacityValue }) => {
-      if (opacityValue === undefined || opacityValue === 1) {
-        return `rgb(var(${property}) / 1.0)`
-      }
-
-      return `rgb(var(${property}) / ${opacityValue})`
-    }
-  },
-  hsl(property) {
-    if (!property.startsWith('--')) {
-      throw new Error(
-        'The hsl() helper requires a custom property name to be passed as the first argument.'
-      )
-    }
-
-    return ({ opacityValue }) => {
-      if (opacityValue === undefined || opacityValue === 1) {
-        return `hsl(var(${property}) / 1)`
-      }
-
-      return `hsl(var(${property}) / ${opacityValue})`
-    }
-  },
-  */
 }
 
 function value(valueToResolve, ...args) {
@@ -166,40 +137,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)
 
-    if (val === undefined) {
-      return defaultValue
-    }
+        val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
+      }
 
-    if (isPlainObject(val)) {
-      return cloneDeep(val)
-    }
+      if (val !== undefined) {
+        if (path.alpha !== undefined) {
+          let normalized = parseColorFormat(val)
 
-    return val
-  }
+          return withAlphaValue(normalized, path.alpha, toColorValue(normalized))
+        }
 
-  resolvePath.theme = resolvePath
+        if (isPlainObject(val)) {
+          return cloneDeep(val)
+        }
+
+        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
   }, {})
 }
 

package/src/util/splitAtTopLevelOnly.js

@@ -0,0 +1,71 @@
+import * as regex from '../lib/regex'
+
+/**
+ * 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 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
+      }
+
+      separatorIndex++
+    }
+
+    if (matchesFullSeparator && depth === 0) {
+      found = true
+
+      yield input.substring(lastIndex, separatorStart)
+      lastIndex = separatorStart + separatorLength
+    }
+
+    if (separatorIndex === separatorLength) {
+      separatorIndex = 0
+      separatorStart = 0
+    }
+  }
+
+  // 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
+  }
+}

package/src/util/toPath.js

@@ -4,7 +4,7 @@
  * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
  *
  * Example:
- * a -> ['a]
+ * a -> ['a']
  * a.b.c -> ['a', 'b', 'c']
  * a[b].c -> ['a', 'b', 'c']
  * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']

package/src/util/transformThemeValue.js

@@ -44,8 +44,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,13 @@
+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',
+    ])
+  }
+
+  return config
+}

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

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   presets: [],
@@ -194,11 +195,9 @@ module.exports = {
       '3xl': '1.5rem',
       full: '9999px',
     },
-    /*
     borderSpacing: ({ theme }) => ({
       ...theme('spacing'),
     }),
-    */
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',
@@ -722,7 +721,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'),

package/stubs/simpleConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   theme: {