tailwindcss 3.0.0-alpha.1 → 3.0.2

package/src/util/isValidArbitraryValue.js

@@ -0,0 +1,61 @@
+let matchingBrackets = new Map([
+  ['{', '}'],
+  ['[', ']'],
+  ['(', ')'],
+])
+let inverseMatchingBrackets = new Map(
+  Array.from(matchingBrackets.entries()).map(([k, v]) => [v, k])
+)
+
+let quotes = new Set(['"', "'", '`'])
+
+// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
+// values don't count, and brackets inside quotes also don't count.
+//
+// E.g.: w-[this-is]w-[weird-and-invalid]
+// E.g.: w-[this-is\\]w-\\[weird-but-valid]
+// E.g.: content-['this-is-also-valid]-weirdly-enough']
+export default function isValidArbitraryValue(value) {
+  let stack = []
+  let inQuotes = false
+
+  for (let i = 0; i < value.length; i++) {
+    let char = value[i]
+
+    if (char === ':' && !inQuotes && stack.length === 0) {
+      return false
+    }
+
+    // Non-escaped quotes allow us to "allow" anything in between
+    if (quotes.has(char) && value[i - 1] !== '\\') {
+      inQuotes = !inQuotes
+    }
+
+    if (inQuotes) continue
+    if (value[i - 1] === '\\') continue // Escaped
+
+    if (matchingBrackets.has(char)) {
+      stack.push(char)
+    } else if (inverseMatchingBrackets.has(char)) {
+      let inverse = inverseMatchingBrackets.get(char)
+
+      // Nothing to pop from, therefore it is unbalanced
+      if (stack.length <= 0) {
+        return false
+      }
+
+      // Popped value must match the inverse value, otherwise it is unbalanced
+      if (stack.pop() !== inverse) {
+        return false
+      }
+    }
+  }
+
+  // If there is still something on the stack, it is also unbalanced
+  if (stack.length > 0) {
+    return false
+  }
+
+  // All good, totally balanced!
+  return true
+}

package/src/util/nameClass.js

@@ -1,7 +1,7 @@
 import escapeClassName from './escapeClassName'
 import escapeCommas from './escapeCommas'
 
-function asClass(name) {
+export function asClass(name) {
   return escapeCommas(`.${escapeClassName(name)}`)
 }
 
@@ -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/normalizeScreens.js

@@ -0,0 +1,45 @@
+/**
+ * A function that normalizes the various forms that the screens object can be
+ * provided in.
+ *
+ * Input(s):
+ *   - ['100px', '200px'] // Raw strings
+ *   - { sm: '100px', md: '200px' } // Object with string values
+ *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
+ *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
+ *
+ * Output(s):
+ *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
+ */
+export function normalizeScreens(screens, root = true) {
+  if (Array.isArray(screens)) {
+    return screens.map((screen) => {
+      if (root && Array.isArray(screen)) {
+        throw new Error('The tuple syntax is not supported for `screens`.')
+      }
+
+      if (typeof screen === 'string') {
+        return { name: screen.toString(), values: [{ min: screen, max: undefined }] }
+      }
+
+      let [name, options] = screen
+      name = name.toString()
+
+      if (typeof options === 'string') {
+        return { name, values: [{ min: options, max: undefined }] }
+      }
+
+      if (Array.isArray(options)) {
+        return { name, values: options.map((option) => resolveValue(option)) }
+      }
+
+      return { name, values: [resolveValue(options)] }
+    })
+  }
+
+  return normalizeScreens(Object.entries(screens ?? {}), false)
+}
+
+function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {
+  return { min, max, raw }
+}

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
+  }
 }