tailwindcss 0.0.0-insiders.df011dc → 0.0.0-insiders.e2d5f21

package/src/util/pluginUtils.js

@@ -1,36 +1,28 @@
 import selectorParser from 'postcss-selector-parser'
 import escapeCommas from './escapeCommas'
 import { withAlphaValue } from './withAlphaVariable'
-import isKeyframeRule from './isKeyframeRule'
-import { parseColor } from './color'
-
-export function applyPseudoToMarker(selector, marker, state, join) {
-  let states = [state]
-
-  let markerIdx = selector.indexOf(marker + ':')
-
-  if (markerIdx !== -1) {
-    let existingMarker = selector.slice(markerIdx, selector.indexOf(' ', markerIdx))
-
-    states = states.concat(
-      selector.slice(markerIdx + marker.length + 1, existingMarker.length).split(':')
-    )
-
-    selector = selector.replace(existingMarker, '')
-  }
-
-  return join(`${[marker, ...states].join(':')}`, selector)
-}
+import {
+  normalize,
+  length,
+  number,
+  percentage,
+  url,
+  color as validateColor,
+  genericName,
+  familyName,
+  image,
+  absoluteSize,
+  relativeSize,
+  position,
+  lineWidth,
+  shadow,
+} from './dataTypes'
+import negateValue from './negateValue'
 
 export function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
     selectors.walkClasses((sel) => {
-      let updatedClass = updateClass(sel.value, {
-        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)
@@ -43,155 +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 (modifier[0] !== '[' || modifier[modifier.length - 1] !== ']') {
-    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)
   }
 
-  // convert `_` to ` `, escept for escaped underscores `\_`
-  value = value
-    .replace(/([^\\])_/g, '$1 ')
-    .replace(/^_/g, ' ')
-    .replace(/\\_/g, '_')
-
-  // add spaces around operators inside calc() that do not follow an operator or (
-  return value.replace(
-    /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
-    '$1 $2 '
-  )
-}
-
-export function asUnit(modifier, units, lookup = {}) {
-  return asValue(modifier, lookup, {
-    validate: (value) => {
-      let unitsPattern = `(?:${units.join('|')})`
-      return (
-        new RegExp(`${unitsPattern}$`).test(value) ||
-        new RegExp(`^calc\\(.+?${unitsPattern}`).test(value)
-      )
-    },
-  })
+  return resolveArbitraryValue(modifier, validate)
 }
 
 function isArbitraryValue(input) {
@@ -208,88 +95,98 @@ 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 (lookup[color] !== undefined) {
+  if (alpha !== undefined) {
+    let normalizedColor =
+      options.values?.[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
+
+    if (normalizedColor === undefined) {
+      return undefined
+    }
+
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(lookup[color], alpha.slice(1, -1))
+      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
       return undefined
     }
 
-    return withAlphaValue(lookup[color], tailwindConfig.theme.opacity[alpha])
+    return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
-  return asValue(modifier, lookup, {
-    validate: (value) => parseColor(value) !== null,
-  })
-}
-
-export function asAngle(modifier, lookup = {}) {
-  return asUnit(modifier, ['deg', 'grad', 'rad', 'turn'], lookup)
+  return asValue(modifier, options, { validate: validateColor })
 }
 
-export function asLength(modifier, lookup = {}) {
-  return asUnit(
-    modifier,
-    [
-      'cm',
-      'mm',
-      'Q',
-      'in',
-      'pc',
-      'pt',
-      'px',
-      'em',
-      'ex',
-      'ch',
-      'rem',
-      'lh',
-      'vw',
-      'vh',
-      'vmin',
-      'vmax',
-      '%',
-    ],
-    lookup
-  )
+export function asLookupValue(modifier, options = {}) {
+  return options.values?.[modifier]
 }
 
-export function asLookupValue(modifier, lookup = {}) {
-  return lookup[modifier]
+function guess(validate) {
+  return (modifier, options) => {
+    return asValue(modifier, options, { validate })
+  }
 }
 
 let typeMap = {
   any: asValue,
   color: asColor,
-  angle: asAngle,
-  length: asLength,
+  url: guess(url),
+  image: guess(image),
+  length: guess(length),
+  percentage: guess(percentage),
+  position: guess(position),
   lookup: asLookupValue,
+  'generic-name': guess(genericName),
+  'family-name': guess(familyName),
+  number: guess(number),
+  'line-width': guess(lineWidth),
+  'absolute-size': guess(absoluteSize),
+  'relative-size': guess(relativeSize),
+  shadow: guess(shadow),
 }
 
+let supportedTypes = Object.keys(typeMap)
+
 function splitAtFirst(input, delim) {
-  return (([first, ...rest]) => [first, rest.join(delim)])(input.split(delim))
+  let idx = input.indexOf(delim)
+  if (idx === -1) return [undefined, input]
+  return [input.slice(0, idx), input.slice(idx + 1)]
 }
 
-export function coerceValue(type, modifier, values, tailwindConfig) {
-  let [scaleType, arbitraryType = scaleType] = [].concat(type)
-
+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 (value.length > 0 && Object.keys(typeMap).includes(explicitType)) {
-      return [asValue(`[${value}]`, values, tailwindConfig), explicitType]
+    //
+    else if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
+      return []
     }
 
-    return [typeMap[arbitraryType](modifier, values, tailwindConfig), arbitraryType]
+    if (value.length > 0 && supportedTypes.includes(explicitType)) {
+      return [asValue(`[${value}]`, options), explicitType]
+    }
+  }
+
+  // Find first matching type
+  for (let type of [].concat(types)) {
+    let result = typeMap[type](modifier, options, { tailwindConfig })
+    if (result) return [result, type]
   }
 
-  return [typeMap[scaleType](modifier, values, tailwindConfig), scaleType]
+  return []
 }

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

@@ -2,10 +2,10 @@ import negateValue from './negateValue'
 import corePluginList from '../corePluginList'
 import configurePlugins from './configurePlugins'
 import defaultConfig from '../../stubs/defaultConfig.stub'
-import colors from '../../colors'
-import log from './log'
+import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
+import { normalizeConfig } from './normalizeConfig'
 
 function isFunction(input) {
   return typeof input === 'function'
@@ -40,15 +40,18 @@ 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]),
-        }),
-        {}
-      )
+      .reduce((negativeScale, key) => {
+        let negativeValue = negateValue(scale[key])
+
+        if (negativeValue !== undefined) {
+          negativeScale[`-${key}`] = negativeValue
+        }
+
+        return negativeScale
+      }, {})
   },
   breakpoints(screens) {
     return Object.keys(screens)
@@ -224,59 +227,3 @@ export default function resolveConfig(configs) {
     )
   )
 }
-
-let warnedAbout = new Set()
-function normalizeConfig(config) {
-  if (!warnedAbout.has('purge-deprecation') && config.hasOwnProperty('purge')) {
-    log.warn([
-      'The `purge` option in your tailwind.config.js file has been deprecated.',
-      'Please rename this to `content` instead.',
-    ])
-    warnedAbout.add('purge-deprecation')
-  }
-
-  config.content = {
-    content: (() => {
-      let { content, purge } = config
-
-      if (Array.isArray(purge)) return purge
-      if (Array.isArray(purge?.content)) return purge.content
-      if (Array.isArray(content)) return content
-      if (Array.isArray(content?.content)) return content.content
-
-      return []
-    })(),
-    safelist: (() => {
-      let { content, purge } = config
-
-      let [safelistKey, safelistPaths] = (() => {
-        if (Array.isArray(content?.safelist)) return ['content.safelist', content.safelist]
-        if (Array.isArray(purge?.safelist)) return ['purge.safelist', purge.safelist]
-        if (Array.isArray(purge?.options?.safelist))
-          return ['purge.options.safelist', purge.options.safelist]
-        return [null, []]
-      })()
-
-      return safelistPaths.map((content) => {
-        if (typeof content === 'string') {
-          return { raw: content, extension: 'html' }
-        }
-
-        if (content instanceof RegExp) {
-          throw new Error(
-            `Values inside '${safelistKey}' can only be of type 'string', found 'regex'.`
-          )
-        }
-
-        throw new Error(
-          `Values inside '${safelistKey}' can only be of type 'string', found '${typeof content}'.`
-        )
-      })
-    })(),
-    extract: config.content?.extract || config.purge?.extract || {},
-    options: config.content?.options || config.purge?.options || {},
-    transform: config.content?.transform || config.purge?.transform || {},
-  }
-
-  return config
-}

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

package/src/util/withAlphaVariable.js

@@ -15,30 +15,35 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
+  let properties = [].concat(property)
   if (typeof color === 'function') {
     return {
       [variable]: '1',
-      [property]: color({ opacityVariable: variable, opacityValue: `var(${variable})` }),
+      ...Object.fromEntries(
+        properties.map((p) => {
+          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })]
+        })
+      ),
     }
   }
 
   const parsed = parseColor(color)
 
   if (parsed === null) {
-    return {
-      [property]: color,
-    }
+    return Object.fromEntries(properties.map((p) => [p, color]))
   }
 
   if (parsed.alpha !== undefined) {
     // Has an alpha value, return color as-is
-    return {
-      [property]: color,
-    }
+    return Object.fromEntries(properties.map((p) => [p, color]))
   }
 
   return {
     [variable]: '1',
-    [property]: formatColor({ ...parsed, alpha: `var(${variable})` }),
+    ...Object.fromEntries(
+      properties.map((p) => {
+        return [p, formatColor({ ...parsed, alpha: `var(${variable})` })]
+      })
+    ),
   }
 }