tailwindcss 0.0.0-insiders.fda68f7 → 0.0.0-oxide.6bf5e56

package/src/util/parseDependency.js

@@ -1,45 +1,44 @@
-import isGlob from 'is-glob'
-import globParent from 'glob-parent'
-import path from 'path'
-
-// Based on `glob-base`
-// https://github.com/micromatch/glob-base/blob/master/index.js
-function parseGlob(pattern) {
-  let glob = pattern
-  let base = globParent(pattern)
-
-  if (base !== '.') {
-    glob = pattern.substr(base.length)
-    if (glob.charAt(0) === '/') {
-      glob = glob.substr(1)
-    }
-  }
-
-  if (glob.substr(0, 2) === './') {
-    glob = glob.substr(2)
+// @ts-check
+
+/**
+ * @typedef {{type: 'dependency', file: string} | {type: 'dir-dependency', dir: string, glob: string}} Dependency
+ */
+
+/**
+ *
+ * @param {import('../lib/content.js').ContentPath} contentPath
+ * @returns {Dependency[]}
+ */
+export default function parseDependency(contentPath) {
+  if (contentPath.ignore) {
+    return []
   }
-  if (glob.charAt(0) === '/') {
-    glob = glob.substr(1)
-  }
-
-  return { base, glob }
-}
-
-export default function parseDependency(normalizedFileOrGlob) {
-  let message
 
-  if (isGlob(normalizedFileOrGlob)) {
-    let { base, glob } = parseGlob(normalizedFileOrGlob)
-    message = { type: 'dir-dependency', dir: path.resolve(base), glob }
-  } else {
-    message = { type: 'dependency', file: path.resolve(normalizedFileOrGlob) }
+  if (!contentPath.glob) {
+    return [
+      {
+        type: 'dependency',
+        file: contentPath.base,
+      },
+    ]
   }
 
-  // rollup-plugin-postcss does not support dir-dependency messages
-  // but directories can be watched in the same way as files
-  if (message.type === 'dir-dependency' && process.env.ROLLUP_WATCH === 'true') {
-    message = { type: 'dependency', file: message.dir }
+  if (process.env.ROLLUP_WATCH === 'true') {
+    // rollup-plugin-postcss does not support dir-dependency messages
+    // but directories can be watched in the same way as files
+    return [
+      {
+        type: 'dependency',
+        file: contentPath.base,
+      },
+    ]
   }
 
-  return message
+  return [
+    {
+      type: 'dir-dependency',
+      dir: contentPath.base,
+      glob: contentPath.glob,
+    },
+  ]
 }

package/src/util/parseGlob.js

@@ -0,0 +1,24 @@
+import globParent from 'glob-parent'
+
+// Based on `glob-base`
+// https://github.com/micromatch/glob-base/blob/master/index.js
+export function parseGlob(pattern) {
+  let glob = pattern
+  let base = globParent(pattern)
+
+  if (base !== '.') {
+    glob = pattern.substr(base.length)
+    if (glob.charAt(0) === '/') {
+      glob = glob.substr(1)
+    }
+  }
+
+  if (glob.substr(0, 2) === './') {
+    glob = glob.substr(2)
+  }
+  if (glob.charAt(0) === '/') {
+    glob = glob.substr(1)
+  }
+
+  return { base, glob }
+}

package/src/util/pluginUtils.js

@@ -1,36 +1,30 @@
 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'
+import { backgroundSize } from './validateFormalSyntax'
+import { flagEnabled } from '../featureFlags.js'
 
 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,253 +37,278 @@ export function updateAllClasses(selectors, updateClass) {
   return result
 }
 
-export function updateLastClasses(selectors, updateClass) {
+export function filterSelectorsForClass(selectors, classCandidate) {
   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)
+      const containsClass = sel.nodes.some(
+        (node) => node.type === 'class' && node.value === classCandidate
+      )
+      if (!containsClass) {
+        sel.remove()
       }
     })
   })
+
   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
+  if (options.supportsNegativeValues && modifier.startsWith('-')) {
+    return asNegativeValue(modifier.slice(1), options.values, validate)
   }
 
-  value = modifier.slice(1, -1)
-
-  if (!validate(value)) {
-    return undefined
-  }
-
-  // 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) {
   return input.startsWith('[') && input.endsWith(']')
 }
 
-function splitAlpha(modifier) {
+function splitUtilityModifier(modifier) {
   let slashIdx = modifier.lastIndexOf('/')
 
   if (slashIdx === -1 || slashIdx === modifier.length - 1) {
-    return [modifier]
+    return [modifier, undefined]
+  }
+
+  let arbitrary = isArbitraryValue(modifier)
+
+  // The modifier could be of the form `[foo]/[bar]`
+  // We want to handle this case properly
+  // without affecting `[foo/bar]`
+  if (arbitrary && !modifier.includes(']/[')) {
+    return [modifier, undefined]
   }
 
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
-export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
-  if (lookup[modifier] !== undefined) {
-    return lookup[modifier]
+export function parseColorFormat(value) {
+  if (typeof value === 'string' && value.includes('<alpha-value>')) {
+    let oldValue = value
+
+    return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+  }
+
+  return value
+}
+
+function unwrapArbitraryModifier(modifier) {
+  modifier = modifier.slice(1, -1)
+  if (modifier.startsWith('--')) {
+    modifier = `var(${modifier})`
+  }
+  return modifier
+}
+
+export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
+  if (options.values?.[modifier] !== undefined) {
+    return parseColorFormat(options.values?.[modifier])
   }
 
-  let [color, alpha] = splitAlpha(modifier)
+  // TODO: Hoist this up to getMatchingTypes or something
+  // We do this here because we need the alpha value (if any)
+  let [color, alpha] = splitUtilityModifier(modifier)
+
+  if (alpha !== undefined) {
+    let normalizedColor =
+      options.values?.[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
+
+    if (normalizedColor === undefined) {
+      return undefined
+    }
+
+    normalizedColor = parseColorFormat(normalizedColor)
 
-  if (lookup[color] !== undefined) {
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(lookup[color], alpha.slice(1, -1))
+      return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
     }
 
     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 = {
+export 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),
+  size: guess(backgroundSize),
 }
 
+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 (options.values && modifier in options.values) {
+    for (let { type } of types ?? []) {
+      let result = typeMap[type](modifier, options, {
+        tailwindConfig,
+      })
+
+      if (result === undefined) {
+        continue
+      }
+
+      return [result, type, null]
+    }
+  }
 
   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, null]
+    }
+  }
+
+  let matches = getMatchingTypes(types, modifier, options, tailwindConfig)
+
+  // Find first matching type
+  for (let match of matches) {
+    return match
+  }
+
+  return []
+}
+
+/**
+ *
+ * @param {{type: string}[]} types
+ * @param {string} rawModifier
+ * @param {any} options
+ * @param {any} tailwindConfig
+ * @returns {Iterator<[value: string, type: string, modifier: string | null]>}
+ */
+export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
+  let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
+  let [modifier, utilityModifier] = splitUtilityModifier(rawModifier)
+
+  let canUseUtilityModifier =
+    modifiersEnabled &&
+    options.modifiers != null &&
+    (options.modifiers === 'any' ||
+      (typeof options.modifiers === 'object' &&
+        ((utilityModifier && isArbitraryValue(utilityModifier)) ||
+          utilityModifier in options.modifiers)))
+
+  if (!canUseUtilityModifier) {
+    modifier = rawModifier
+    utilityModifier = undefined
   }
 
-  return [typeMap[scaleType](modifier, values, tailwindConfig), scaleType]
+  if (utilityModifier !== undefined && modifier === '') {
+    modifier = 'DEFAULT'
+  }
+
+  // Check the full value first
+  // TODO: Move to asValue… somehow
+  if (utilityModifier !== undefined) {
+    if (typeof options.modifiers === 'object') {
+      let configValue = options.modifiers?.[utilityModifier] ?? null
+      if (configValue !== null) {
+        utilityModifier = configValue
+      } else if (isArbitraryValue(utilityModifier)) {
+        utilityModifier = unwrapArbitraryModifier(utilityModifier)
+      }
+    }
+  }
+
+  for (let { type } of types ?? []) {
+    let result = typeMap[type](modifier, options, {
+      tailwindConfig,
+    })
+
+    if (result === undefined) {
+      continue
+    }
+
+    yield [result, type, utilityModifier ?? null]
+  }
 }

package/src/util/prefixSelector.js

@@ -1,15 +1,14 @@
 import parser from 'postcss-selector-parser'
-import { tap } from './tap'
-
-export default function (prefix, selector) {
-  const getPrefix =
-    typeof prefix === 'function' ? prefix : () => (prefix === undefined ? '' : prefix)
 
+export default function (prefix, selector, prependNegative = false) {
   return parser((selectors) => {
     selectors.walkClasses((classSelector) => {
-      tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${getPrefix('.' + baseClass)}${baseClass}`
-      })
+      let baseClass = classSelector.value
+      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+      classSelector.value = shouldPlaceNegativeBeforePrefix
+        ? `-${prefix}${baseClass.slice(1)}`
+        : `${prefix}${baseClass}`
     })
   }).processSync(selector)
 }

package/src/util/removeAlphaVariables.js

@@ -0,0 +1,24 @@
+/**
+ * This function removes any uses of CSS variables used as an alpha channel
+ *
+ * This is required for selectors like `:visited` which do not allow
+ * changes in opacity or external control using CSS variables.
+ *
+ * @param {import('postcss').Container} container
+ * @param {string[]} toRemove
+ */
+export function removeAlphaVariables(container, toRemove) {
+  container.walkDecls((decl) => {
+    if (toRemove.includes(decl.prop)) {
+      decl.remove()
+
+      return
+    }
+
+    for (let varName of toRemove) {
+      if (decl.value.includes(`/ var(${varName})`)) {
+        decl.value = decl.value.replace(`/ var(${varName})`, '')
+      }
+    }
+  })
+}