tailwindcss 3.0.23 → 3.0.24

package/src/util/cloneNodes.js

@@ -1,9 +1,22 @@
-export default function cloneNodes(nodes, source) {
+export default function cloneNodes(nodes, source = undefined, raws = undefined) {
   return nodes.map((node) => {
     let cloned = node.clone()
 
     if (source !== undefined) {
       cloned.source = source
+
+      if ('walk' in cloned) {
+        cloned.walk((child) => {
+          child.source = source
+        })
+      }
+    }
+
+    if (raws !== undefined) {
+      cloned.raws.tailwind = {
+        ...cloned.raws.tailwind,
+        ...raws,
+      }
     }
 
     return cloned

package/src/util/color.js

@@ -2,14 +2,16 @@ import namedColors from 'color-name'
 
 let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
 let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
-let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
-let SEP = `(?:\\s*,\\s*|\\s+)`
-let ALPHA_SEP = `\\s*[,/]\\s*`
+let VALUE = /(?:\d+|\d*\.\d+)%?/
+let SEP = /(?:\s*,\s*|\s+)/
+let ALPHA_SEP = /\s*[,/]\s*/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+
 let RGB = new RegExp(
-  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^rgba?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 let HSL = new RegExp(
-  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^hsla?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
 export function parseColor(value) {

package/src/util/dataTypes.js

@@ -57,7 +57,9 @@ export function number(value) {
 }
 
 export function percentage(value) {
-  return /%$/g.test(value) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(value))
+  return value.split(UNDERSCORE).every((part) => {
+    return /%$/g.test(part) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(part))
+  })
 }
 
 let lengthUnits = [

package/src/util/log.js

@@ -1,29 +1,29 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 
 let alreadyShown = new Set()
 
-function log(chalk, messages, key) {
+function log(type, messages, key) {
   if (process.env.JEST_WORKER_ID !== undefined) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)
 
   console.warn('')
-  messages.forEach((message) => console.warn(chalk, '-', message))
+  messages.forEach((message) => console.warn(type, '-', message))
 }
 
 export function dim(input) {
-  return chalk.dim(input)
+  return colors.dim(input)
 }
 
 export default {
   info(key, messages) {
-    log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   warn(key, messages) {
-    log(chalk.bold.yellow('warn'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.yellow('warn')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   risk(key, messages) {
-    log(chalk.bold.magenta('risk'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.magenta('risk')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
 }

package/src/util/parseBoxShadowValue.js

@@ -1,10 +1,58 @@
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 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 = input.split(COMMA)
+  let shadows = Array.from(splitByTopLevelCommas(input))
   return shadows.map((shadow) => {
     let value = shadow.trim()
     let result = { raw: value }

package/src/util/resolveConfig.js

@@ -66,6 +66,38 @@ 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) {

package/stubs/defaultConfig.stub.js

@@ -194,6 +194,11 @@ module.exports = {
       '3xl': '1.5rem',
       full: '9999px',
     },
+    /*
+    borderSpacing: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    */
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',