tailwindcss 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/util/dataTypes.js

@@ -1,4 +1,5 @@
 import { parseColor } from './color'
+import { parseBoxShadowValue } from './parseBoxShadowValue'
 
 // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
 
@@ -7,7 +8,22 @@ let UNDERSCORE = /_(?![^(]*\))/g // Underscore separator that is not located bet
 
 // This is not a data type, but rather a function that can normalize the
 // correct values.
-export function normalize(value) {
+export function normalize(value, isRoot = true) {
+  // 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(
@@ -18,10 +34,9 @@ export function normalize(value) {
     .replace(/\\_/g, '_')
 
   // Remove leftover whitespace
-  value = value.trim()
-
-  // Keep raw strings if it starts with `url(`
-  if (value.startsWith('url(')) return value
+  if (isRoot) {
+    value = value.trim()
+  }
 
   // Add spaces around operators inside calc() that do not follow an operator
   // or '('.
@@ -74,6 +89,18 @@ 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
 

package/src/util/formatVariantSelector.js

@@ -0,0 +1,105 @@
+import selectorParser from 'postcss-selector-parser'
+import unescape from 'postcss-selector-parser/dist/util/unesc'
+import escapeClassName from '../util/escapeClassName'
+import prefixSelector from '../util/prefixSelector'
+
+let MERGE = ':merge'
+let PARENT = '&'
+
+export let selectorFunctions = new Set([MERGE])
+
+export function formatVariantSelector(current, ...others) {
+  for (let other of others) {
+    let incomingValue = resolveFunctionArgument(other, MERGE)
+    if (incomingValue !== null) {
+      let existingValue = resolveFunctionArgument(current, MERGE, incomingValue)
+      if (existingValue !== null) {
+        let existingTarget = `${MERGE}(${incomingValue})`
+        let splitIdx = other.indexOf(existingTarget)
+        let addition = other.slice(splitIdx + existingTarget.length).split(' ')[0]
+
+        current = current.replace(existingTarget, existingTarget + addition)
+        continue
+      }
+    }
+
+    current = other.replace(PARENT, current)
+  }
+
+  return current
+}
+
+export function finalizeSelector(format, { selector, candidate, context }) {
+  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+
+  if (context?.tailwindConfig?.prefix) {
+    format = prefixSelector(context.tailwindConfig.prefix, format)
+  }
+
+  format = format.replace(PARENT, `.${escapeClassName(candidate)}`)
+
+  // Normalize escaped classes, e.g.:
+  //
+  // The idea would be to replace the escaped `base` in the selector with the
+  // `format`. However, in css you can escape the same selector in a few
+  // different ways. This would result in different strings and therefore we
+  // can't replace it properly.
+  //
+  //               base: bg-[rgb(255,0,0)]
+  //   base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
+  //       escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
+  //
+  selector = selectorParser((selectors) => {
+    return selectors.walkClasses((node) => {
+      if (node.raws && node.value.includes(base)) {
+        node.raws.value = escapeClassName(unescape(node.raws.value))
+      }
+
+      return node
+    })
+  }).processSync(selector)
+
+  // We can safely replace the escaped base now, since the `base` section is
+  // now in a normalized escaped value.
+  selector = selector.replace(`.${escapeClassName(base)}`, format)
+
+  // Remove unnecessary pseudo selectors that we used as placeholders
+  return selectorParser((selectors) => {
+    return selectors.map((selector) => {
+      selector.walkPseudos((p) => {
+        if (selectorFunctions.has(p.value)) {
+          p.replaceWith(p.nodes)
+        }
+
+        return p
+      })
+
+      return selector
+    })
+  }).processSync(selector)
+}
+
+function resolveFunctionArgument(haystack, needle, arg) {
+  let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle)
+  if (startIdx === -1) return null
+
+  // Start inside the `(`
+  startIdx += needle.length + 1
+
+  let target = ''
+  let count = 0
+
+  for (let char of haystack.slice(startIdx)) {
+    if (char !== '(' && char !== ')') {
+      target += char
+    } else if (char === '(') {
+      target += char
+      count++
+    } else if (char === ')') {
+      if (--count < 0) break // unbalanced
+      target += char
+    }
+  }
+
+  return target
+}

package/src/util/nameClass.js

@@ -14,7 +14,7 @@ export function formatClass(classPrefix, key) {
     return classPrefix
   }
 
-  if (key === '-') {
+  if (key === '-' || key === '-DEFAULT') {
     return `-${classPrefix}`
   }
 

package/src/util/negateValue.js

@@ -1,6 +1,10 @@
 export default function (value) {
   value = `${value}`
 
+  if (value === '0') {
+    return '0'
+  }
+
   // Flip sign of numbers
   if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
     return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
@@ -9,6 +13,4 @@ export default function (value) {
   if (value.includes('var(') || value.includes('calc(')) {
     return `calc(${value} * -1)`
   }
-
-  return value
 }

package/src/util/normalizeConfig.js

@@ -140,6 +140,18 @@ export function normalizeConfig(config) {
     return []
   })()
 
+  // Normalize prefix option
+  if (typeof config.prefix === 'function') {
+    log.warn('prefix-function', [
+      'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
+      'Update `prefix` in your configuration to be a string to eliminate this warning.',
+      // TODO: Add https://tw.wtf/prefix-function
+    ])
+    config.prefix = ''
+  } else {
+    config.prefix = config.prefix ?? ''
+  }
+
   // Normalize the `content`
   config.content = {
     files: (() => {
@@ -170,7 +182,7 @@ export function normalizeConfig(config) {
 
       let extractors = {}
 
-      extractors.DEFAULT = (() => {
+      let defaultExtractor = (() => {
         if (config.purge?.options?.defaultExtractor) {
           return config.purge.options.defaultExtractor
         }
@@ -182,6 +194,10 @@ export function normalizeConfig(config) {
         return undefined
       })()
 
+      if (defaultExtractor !== undefined) {
+        extractors.DEFAULT = defaultExtractor
+      }
+
       // Functions
       if (typeof extract === 'function') {
         extractors.DEFAULT = extract

package/src/util/parseBoxShadowValue.js

@@ -0,0 +1,71 @@
+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+)(.*?)$/g
+
+export function parseBoxShadowValue(input) {
+  let shadows = input.split(COMMA)
+  return shadows.map((shadow) => {
+    let value = shadow.trim()
+    let result = { raw: value }
+    let parts = value.split(SPACE)
+    let seen = new Set()
+
+    for (let part of parts) {
+      // Reset index, since the regex is stateful.
+      LENGTH.lastIndex = 0
+
+      // Keyword
+      if (!seen.has('KEYWORD') && KEYWORDS.has(part)) {
+        result.keyword = part
+        seen.add('KEYWORD')
+      }
+
+      // Length value
+      else if (LENGTH.test(part)) {
+        if (!seen.has('X')) {
+          result.x = part
+          seen.add('X')
+        } else if (!seen.has('Y')) {
+          result.y = part
+          seen.add('Y')
+        } else if (!seen.has('BLUR')) {
+          result.blur = part
+          seen.add('BLUR')
+        } else if (!seen.has('SPREAD')) {
+          result.spread = part
+          seen.add('SPREAD')
+        }
+      }
+
+      // Color or unknown
+      else {
+        if (!result.color) {
+          result.color = part
+        } else {
+          if (!result.unknown) result.unknown = []
+          result.unknown.push(part)
+        }
+      }
+    }
+
+    // Check if valid
+    result.valid = result.x !== undefined && result.y !== undefined
+
+    return result
+  })
+}
+
+export function formatBoxShadowValue(shadows) {
+  return shadows
+    .map((shadow) => {
+      if (!shadow.valid) {
+        return shadow.raw
+      }
+
+      return [shadow.keyword, shadow.x, shadow.y, shadow.blur, shadow.spread, shadow.color]
+        .filter(Boolean)
+        .join(' ')
+    })
+    .join(', ')
+}

package/src/util/pluginUtils.js

@@ -1,7 +1,6 @@
 import selectorParser from 'postcss-selector-parser'
 import escapeCommas from './escapeCommas'
 import { withAlphaValue } from './withAlphaVariable'
-import isKeyframeRule from './isKeyframeRule'
 import {
   normalize,
   length,
@@ -16,36 +15,14 @@ import {
   relativeSize,
   position,
   lineWidth,
+  shadow,
 } from './dataTypes'
-
-export function applyStateToMarker(selector, marker, state, join) {
-  let markerIdx = selector.search(new RegExp(`${marker}[:[]`))
-
-  if (markerIdx === -1) {
-    return join(marker + state, selector)
-  }
-
-  let markerSelector = selector.slice(markerIdx, selector.indexOf(' ', markerIdx))
-
-  return join(
-    marker + state + markerSelector.slice(markerIdx + marker.length),
-    selector.replace(markerSelector, '')
-  )
-}
+import negateValue from './negateValue'
 
 export function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
     selectors.walkClasses((sel) => {
-      let updatedClass = updateClass(sel.value, {
-        withAttr(className, attr) {
-          sel.parent.insertAfter(sel, selectorParser.attribute({ attribute: attr.slice(1, -1) }))
-          return className
-        },
-        withPseudo(className, pseudo) {
-          sel.parent.insertAfter(sel, selectorParser.pseudo({ value: pseudo }))
-          return className
-        },
-      })
+      let updatedClass = updateClass(sel.value)
       sel.value = updatedClass
       if (sel.raws && sel.raws.value) {
         sel.raws.value = escapeCommas(sel.raws.value)
@@ -58,133 +35,50 @@ export function updateAllClasses(selectors, updateClass) {
   return result
 }
 
-export function updateLastClasses(selectors, updateClass) {
-  let parser = selectorParser((selectors) => {
-    selectors.each((sel) => {
-      let lastClass = sel.filter(({ type }) => type === 'class').pop()
-
-      if (lastClass === undefined) {
-        return
-      }
-
-      let updatedClass = updateClass(lastClass.value, {
-        withPseudo(className, pseudo) {
-          lastClass.parent.insertAfter(lastClass, selectorParser.pseudo({ value: `${pseudo}` }))
-          return className
-        },
-      })
-      lastClass.value = updatedClass
-      if (lastClass.raws && lastClass.raws.value) {
-        lastClass.raws.value = escapeCommas(lastClass.raws.value)
-      }
-    })
-  })
-  let result = parser.processSync(selectors)
-
-  return result
-}
-
-function splitByNotEscapedCommas(str) {
-  let chunks = []
-  let currentChunk = ''
-  for (let i = 0; i < str.length; i++) {
-    if (str[i] === ',' && str[i - 1] !== '\\') {
-      chunks.push(currentChunk)
-      currentChunk = ''
-    } else {
-      currentChunk += str[i]
-    }
+function resolveArbitraryValue(modifier, validate) {
+  if (!isArbitraryValue(modifier)) {
+    return undefined
   }
-  chunks.push(currentChunk)
-  return chunks
-}
 
-export function transformAllSelectors(transformSelector, { wrap, withRule } = {}) {
-  return ({ container }) => {
-    container.walkRules((rule) => {
-      if (isKeyframeRule(rule)) {
-        return rule
-      }
-      let transformed = splitByNotEscapedCommas(rule.selector).map(transformSelector).join(',')
-      rule.selector = transformed
-      if (withRule) {
-        withRule(rule)
-      }
-      return rule
-    })
+  let value = modifier.slice(1, -1)
 
-    if (wrap) {
-      let wrapper = wrap()
-      let nodes = container.nodes
-      container.removeAll()
-      wrapper.append(nodes)
-      container.append(wrapper)
-    }
+  if (!validate(value)) {
+    return undefined
   }
+
+  return normalize(value)
 }
 
-export function transformAllClasses(transformClass, { wrap, withRule } = {}) {
-  return ({ container }) => {
-    container.walkRules((rule) => {
-      let selector = rule.selector
-      let variantSelector = updateAllClasses(selector, transformClass)
-      rule.selector = variantSelector
-      if (withRule) {
-        withRule(rule)
-      }
-      return rule
-    })
+function asNegativeValue(modifier, lookup = {}, validate) {
+  let positiveValue = lookup[modifier]
 
-    if (wrap) {
-      let wrapper = wrap()
-      let nodes = container.nodes
-      container.removeAll()
-      wrapper.append(nodes)
-      container.append(wrapper)
-    }
+  if (positiveValue !== undefined) {
+    return negateValue(positiveValue)
   }
-}
 
-export function transformLastClasses(transformClass, { wrap, withRule } = {}) {
-  return ({ container }) => {
-    container.walkRules((rule) => {
-      let selector = rule.selector
-      let variantSelector = updateLastClasses(selector, transformClass)
-      rule.selector = variantSelector
-      if (withRule) {
-        withRule(rule)
-      }
-      return rule
-    })
+  if (isArbitraryValue(modifier)) {
+    let resolved = resolveArbitraryValue(modifier, validate)
 
-    if (wrap) {
-      let wrapper = wrap()
-      let nodes = container.nodes
-      container.removeAll()
-      wrapper.append(nodes)
-      container.append(wrapper)
+    if (resolved === undefined) {
+      return undefined
     }
+
+    return negateValue(resolved)
   }
 }
 
-export function asValue(modifier, lookup = {}, { validate = () => true } = {}) {
-  let value = lookup[modifier]
+export function asValue(modifier, options = {}, { validate = () => true } = {}) {
+  let value = options.values?.[modifier]
 
   if (value !== undefined) {
     return value
   }
 
-  if (!isArbitraryValue(modifier)) {
-    return undefined
-  }
-
-  value = modifier.slice(1, -1)
-
-  if (!validate(value)) {
-    return undefined
+  if (options.supportsNegativeValues && modifier.startsWith('-')) {
+    return asNegativeValue(modifier.slice(1), options.values, validate)
   }
 
-  return normalize(value)
+  return resolveArbitraryValue(modifier, validate)
 }
 
 function isArbitraryValue(input) {
@@ -201,16 +95,16 @@ function splitAlpha(modifier) {
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
-export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
-  if (lookup[modifier] !== undefined) {
-    return lookup[modifier]
+export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
+  if (options.values?.[modifier] !== undefined) {
+    return options.values?.[modifier]
   }
 
   let [color, alpha] = splitAlpha(modifier)
 
   if (alpha !== undefined) {
     let normalizedColor =
-      lookup[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
+      options.values?.[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
 
     if (normalizedColor === undefined) {
       return undefined
@@ -227,16 +121,16 @@ export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
     return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
-  return asValue(modifier, lookup, { validate: validateColor })
+  return asValue(modifier, options, { validate: validateColor })
 }
 
-export function asLookupValue(modifier, lookup = {}) {
-  return lookup[modifier]
+export function asLookupValue(modifier, options = {}) {
+  return options.values?.[modifier]
 }
 
 function guess(validate) {
-  return (modifier, lookup) => {
-    return asValue(modifier, lookup, { validate })
+  return (modifier, options) => {
+    return asValue(modifier, options, { validate })
   }
 }
 
@@ -255,6 +149,7 @@ let typeMap = {
   'line-width': guess(lineWidth),
   'absolute-size': guess(absoluteSize),
   'relative-size': guess(relativeSize),
+  shadow: guess(shadow),
 }
 
 let supportedTypes = Object.keys(typeMap)
@@ -265,22 +160,31 @@ function splitAtFirst(input, delim) {
   return [input.slice(0, idx), input.slice(idx + 1)]
 }
 
-export function coerceValue(types, modifier, values, tailwindConfig) {
+export function coerceValue(types, modifier, options, tailwindConfig) {
   if (isArbitraryValue(modifier)) {
-    let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':')
+    let arbitraryValue = modifier.slice(1, -1)
+    let [explicitType, value] = splitAtFirst(arbitraryValue, ':')
+
+    // It could be that this resolves to `url(https` which is not a valid
+    // identifier. We currently only support "simple" words with dashes or
+    // underscores. E.g.: family-name
+    if (!/^[\w-_]+$/g.test(explicitType)) {
+      value = arbitraryValue
+    }
 
-    if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
+    //
+    else if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
       return []
     }
 
     if (value.length > 0 && supportedTypes.includes(explicitType)) {
-      return [asValue(`[${value}]`, values, tailwindConfig), explicitType]
+      return [asValue(`[${value}]`, options), explicitType]
     }
   }
 
   // Find first matching type
   for (let type of [].concat(types)) {
-    let result = typeMap[type](modifier, values, tailwindConfig)
+    let result = typeMap[type](modifier, options, { tailwindConfig })
     if (result) return [result, type]
   }
 

package/src/util/prefixSelector.js

@@ -2,13 +2,10 @@ import parser from 'postcss-selector-parser'
 import { tap } from './tap'
 
 export default function (prefix, selector) {
-  const getPrefix =
-    typeof prefix === 'function' ? prefix : () => (prefix === undefined ? '' : prefix)
-
   return parser((selectors) => {
     selectors.walkClasses((classSelector) => {
       tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${getPrefix('.' + baseClass)}${baseClass}`
+        classSelector.value = `${prefix}${baseClass}`
       })
     })
   }).processSync(selector)

package/src/util/resolveConfig.js

@@ -40,10 +40,16 @@ function mergeWith(target, ...sources) {
 const configUtils = {
   colors,
   negative(scale) {
+    // TODO: Log that this function isn't really needed anymore?
     return Object.keys(scale)
       .filter((key) => scale[key] !== '0')
       .reduce((negativeScale, key) => {
-        negativeScale[`-${key}`] = negateValue(scale[key])
+        let negativeValue = negateValue(scale[key])
+
+        if (negativeValue !== undefined) {
+          negativeScale[`-${key}`] = negativeValue
+        }
+
         return negativeScale
       }, {})
   },

package/src/util/transformThemeValue.js

@@ -2,7 +2,12 @@ import postcss from 'postcss'
 
 export default function transformThemeValue(themeSection) {
   if (['fontSize', 'outline'].includes(themeSection)) {
-    return (value) => (Array.isArray(value) ? value[0] : value)
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (Array.isArray(value)) value = value[0]
+
+      return value
+    }
   }
 
   if (
@@ -20,18 +25,28 @@ export default function transformThemeValue(themeSection) {
       'animation',
     ].includes(themeSection)
   ) {
-    return (value) => (Array.isArray(value) ? value.join(', ') : value)
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (Array.isArray(value)) value = value.join(', ')
+
+      return value
+    }
   }
 
   // For backwards compatibility reasons, before we switched to underscores
   // instead of commas for arbitrary values.
   if (['gridTemplateColumns', 'gridTemplateRows', 'objectPosition'].includes(themeSection)) {
-    return (value) => (typeof value === 'string' ? postcss.list.comma(value).join(' ') : value)
-  }
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (typeof value === 'string') value = postcss.list.comma(value).join(' ')
 
-  if (themeSection === 'colors') {
-    return (value) => (typeof value === 'function' ? value({}) : value)
+      return value
+    }
   }
 
-  return (value) => value
+  return (value) => {
+    if (typeof value === 'function') value = value({})
+
+    return value
+  }
 }