tailwindcss 0.0.0-insiders.f4635e0 → 0.0.0-insiders.f4a2ccd

package/src/util/color.js

@@ -2,14 +2,21 @@ 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 RGB_HSL = new RegExp(
-  `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\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.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.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) {
+// In "loose" mode the color may contain fewer than 3 parts, as long as at least
+// one of the parts is variable.
+export function parseColor(value, { loose = false } = {}) {
   if (typeof value !== 'string') {
     return null
   }
@@ -37,20 +44,45 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let match = value.match(RGB) ?? value.match(HSL)
+
+  if (match === null) {
+    return null
+  }
+
+  let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
 
-  if (match !== null) {
+  // rgba(var(--my-color), 0.1)
+  // hsla(var(--my-color), 0.1)
+  if (color.length === 2 && color[0].startsWith('var(')) {
     return {
       mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      color: [color[0]],
+      alpha: color[1],
     }
   }
 
-  return null
+  if (!loose && color.length !== 3) {
+    return null
+  }
+
+  if (color.length < 3 && !color.some((part) => /^var\(.*?\)$/.test(part))) {
+    return null
+  }
+
+  return {
+    mode: match[1],
+    color,
+    alpha: match[5]?.toString?.(),
+  }
 }
 
 export function formatColor({ mode, color, alpha }) {
   let hasAlpha = alpha !== undefined
+
+  if (mode === 'rgba' || mode === 'hsla') {
+    return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
+  }
+
   return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
 }

package/src/util/createUtilityPlugin.js

@@ -1,18 +1,9 @@
 import transformThemeValue from './transformThemeValue'
-import { asValue, asColor, asAngle, asLength, asLookupValue } from '../util/pluginUtils'
-
-let asMap = new Map([
-  [asValue, 'any'],
-  [asColor, 'color'],
-  [asAngle, 'angle'],
-  [asLength, 'length'],
-  [asLookupValue, 'lookup'],
-])
 
 export default function createUtilityPlugin(
   themeKey,
   utilityVariations = [[themeKey, [themeKey]]],
-  { filterDefault = false, resolveArbitraryValue = asValue } = {}
+  { filterDefault = false, ...options } = {}
 ) {
   let transformValue = transformThemeValue(themeKey)
   return function ({ matchUtilities, theme }) {
@@ -33,12 +24,12 @@ export default function createUtilityPlugin(
           })
         }, {}),
         {
+          ...options,
           values: filterDefault
             ? Object.fromEntries(
                 Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
               )
             : theme(themeKey),
-          type: asMap.get(resolveArbitraryValue) ?? 'any',
         }
       )
     }

package/src/util/dataTypes.js

@@ -0,0 +1,281 @@
+import { parseColor } from './color'
+import { parseBoxShadowValue } from './parseBoxShadowValue'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
+let cssFunctions = ['min', 'max', 'clamp', 'calc']
+
+// Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
+
+function isCSSFunction(value) {
+  return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
+}
+
+const placeholder = '--tw-placeholder'
+const placeholderRe = new RegExp(placeholder, 'g')
+
+// This is not a data type, but rather a function that can normalize the
+// correct values.
+export function normalize(value, isRoot = true) {
+  if (value.startsWith('--')) {
+    return `var(${value})`
+  }
+
+  // Keep raw strings if it starts with `url(`
+  if (value.includes('url(')) {
+    return value
+      .split(/(url\(.*?\))/g)
+      .filter(Boolean)
+      .map((part) => {
+        if (/^url\(.*?\)$/.test(part)) {
+          return part
+        }
+
+        return normalize(part, false)
+      })
+      .join('')
+  }
+
+  // Convert `_` to ` `, except for escaped underscores `\_`
+  value = value
+    .replace(
+      /([^\\])_+/g,
+      (fullMatch, characterBefore) => characterBefore + ' '.repeat(fullMatch.length - 1)
+    )
+    .replace(/^_/g, ' ')
+    .replace(/\\_/g, '_')
+
+  // Remove leftover whitespace
+  if (isRoot) {
+    value = value.trim()
+  }
+
+  // Add spaces around operators inside math functions like calc() that do not follow an operator
+  // or '('.
+  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
+    let vars = []
+    return match
+      .replace(/var\((--.+?)[,)]/g, (match, g1) => {
+        vars.push(g1)
+        return match.replace(g1, placeholder)
+      })
+      .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+      .replace(placeholderRe, () => vars.shift())
+  })
+
+  return value
+}
+
+export function url(value) {
+  return value.startsWith('url(')
+}
+
+export function number(value) {
+  return !isNaN(Number(value)) || isCSSFunction(value)
+}
+
+export function percentage(value) {
+  return (value.endsWith('%') && number(value.slice(0, -1))) || isCSSFunction(value)
+}
+
+// Please refer to MDN when updating this list:
+// https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units
+let lengthUnits = [
+  'cm',
+  'mm',
+  'Q',
+  'in',
+  'pc',
+  'pt',
+  'px',
+  'em',
+  'ex',
+  'ch',
+  'rem',
+  'lh',
+  'rlh',
+  'vw',
+  'vh',
+  'vmin',
+  'vmax',
+  'vb',
+  'vi',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'dvw',
+  'dvh',
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+  'cqmin',
+  'cqmax',
+]
+let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
+export function length(value) {
+  return (
+    value === '0' ||
+    new RegExp(`^[+-]?[0-9]*\.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`).test(value) ||
+    isCSSFunction(value)
+  )
+}
+
+let lineWidths = new Set(['thin', 'medium', 'thick'])
+export function lineWidth(value) {
+  return lineWidths.has(value)
+}
+
+export function shadow(value) {
+  let parsedShadows = parseBoxShadowValue(normalize(value))
+
+  for (let parsedShadow of parsedShadows) {
+    if (!parsedShadow.valid) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function color(value) {
+  let colors = 0
+
+  let result = splitAtTopLevelOnly(value, '_').every((part) => {
+    part = normalize(part)
+
+    if (part.startsWith('var(')) return true
+    if (parseColor(part, { loose: true }) !== null) return colors++, true
+
+    return false
+  })
+
+  if (!result) return false
+  return colors > 0
+}
+
+export function image(value) {
+  let images = 0
+  let result = splitAtTopLevelOnly(value, ',').every((part) => {
+    part = normalize(part)
+
+    if (part.startsWith('var(')) return true
+    if (
+      url(part) ||
+      gradient(part) ||
+      ['element(', 'image(', 'cross-fade(', 'image-set('].some((fn) => part.startsWith(fn))
+    ) {
+      images++
+      return true
+    }
+
+    return false
+  })
+
+  if (!result) return false
+  return images > 0
+}
+
+let gradientTypes = new Set([
+  'linear-gradient',
+  'radial-gradient',
+  'repeating-linear-gradient',
+  'repeating-radial-gradient',
+  'conic-gradient',
+])
+export function gradient(value) {
+  value = normalize(value)
+
+  for (let type of gradientTypes) {
+    if (value.startsWith(`${type}(`)) {
+      return true
+    }
+  }
+  return false
+}
+
+let validPositions = new Set(['center', 'top', 'right', 'bottom', 'left'])
+export function position(value) {
+  let positions = 0
+  let result = splitAtTopLevelOnly(value, '_').every((part) => {
+    part = normalize(part)
+
+    if (part.startsWith('var(')) return true
+    if (validPositions.has(part) || length(part) || percentage(part)) {
+      positions++
+      return true
+    }
+
+    return false
+  })
+
+  if (!result) return false
+  return positions > 0
+}
+
+export function familyName(value) {
+  let fonts = 0
+  let result = splitAtTopLevelOnly(value, ',').every((part) => {
+    part = normalize(part)
+
+    if (part.startsWith('var(')) return true
+
+    // If it contains spaces, then it should be quoted
+    if (part.includes(' ')) {
+      if (!/(['"])([^"']+)\1/g.test(part)) {
+        return false
+      }
+    }
+
+    // If it starts with a number, it's invalid
+    if (/^\d/g.test(part)) {
+      return false
+    }
+
+    fonts++
+
+    return true
+  })
+
+  if (!result) return false
+  return fonts > 0
+}
+
+let genericNames = new Set([
+  'serif',
+  'sans-serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'system-ui',
+  'ui-serif',
+  'ui-sans-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'math',
+  'emoji',
+  'fangsong',
+])
+export function genericName(value) {
+  return genericNames.has(value)
+}
+
+let absoluteSizes = new Set([
+  'xx-small',
+  'x-small',
+  'small',
+  'medium',
+  'large',
+  'x-large',
+  'x-large',
+  'xxx-large',
+])
+export function absoluteSize(value) {
+  return absoluteSizes.has(value)
+}
+
+let relativeSizes = new Set(['larger', 'smaller'])
+export function relativeSize(value) {
+  return relativeSizes.has(value)
+}

package/src/util/defaults.js

@@ -5,6 +5,12 @@ export function defaults(target, ...sources) {
         target[k] = source[k]
       }
     }
+
+    for (let k of Object.getOwnPropertySymbols(source)) {
+      if (!target?.hasOwnProperty?.(k)) {
+        target[k] = source[k]
+      }
+    }
   }
 
   return target