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

package/src/util/resolveConfig.js

@@ -1,20 +1,20 @@
 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'
+import isPlainObject from './isPlainObject'
+import { cloneDeep } from './cloneDeep'
+import { parseColorFormat } from './pluginUtils'
+import { withAlphaValue } from './withAlphaVariable'
+import toColorValue from './toColorValue'
 
 function isFunction(input) {
   return typeof input === 'function'
 }
 
-function isObject(input) {
-  return typeof input === 'object' && input !== null
-}
-
 function mergeWith(target, ...sources) {
   let customizer = sources.pop()
 
@@ -23,8 +23,8 @@ function mergeWith(target, ...sources) {
       let merged = customizer(target[k], source[k])
 
       if (merged === undefined) {
-        if (isObject(target[k]) && isObject(source[k])) {
-          target[k] = mergeWith(target[k], source[k], customizer)
+        if (isPlainObject(target[k]) && isPlainObject(source[k])) {
+          target[k] = mergeWith({}, target[k], source[k], customizer)
         } else {
           target[k] = source[k]
         }
@@ -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)
@@ -95,12 +98,12 @@ function mergeThemes(themes) {
 
 function mergeExtensionCustomizer(merged, value) {
   // When we have an array of objects, we do want to merge it
-  if (Array.isArray(merged) && isObject(merged[0])) {
+  if (Array.isArray(merged) && isPlainObject(merged[0])) {
     return merged.concat(value)
   }
 
   // When the incoming value is an array, and the existing config is an object, prepend the existing object
-  if (Array.isArray(value) && isObject(value[0]) && isObject(merged)) {
+  if (Array.isArray(value) && isPlainObject(value[0]) && isPlainObject(merged)) {
     return [merged, ...value]
   }
 
@@ -129,32 +132,81 @@ function mergeExtensions({ extend, ...theme }) {
   })
 }
 
+/**
+ *
+ * @param {string} key
+ * @return {Iterable<string[] & {alpha: string | undefined}>}
+ */
+function* toPaths(key) {
+  let path = toPath(key)
+
+  if (path.length === 0) {
+    return
+  }
+
+  yield path
+
+  if (Array.isArray(key)) {
+    return
+  }
+
+  let pattern = /^(.*?)\s*\/\s*([^/]+)$/
+  let matches = key.match(pattern)
+
+  if (matches !== null) {
+    let [, prefix, alpha] = matches
+
+    let newPath = toPath(prefix)
+    newPath.alpha = alpha
+
+    yield newPath
+  }
+}
+
 function resolveFunctionKeys(object) {
+  // theme('colors.red.500 / 0.5') -> ['colors', 'red', '500 / 0', '5]
+
   const resolvePath = (key, defaultValue) => {
-    const path = toPath(key)
+    for (const path of toPaths(key)) {
+      let index = 0
+      let val = object
 
-    let index = 0
-    let val = object
+      while (val !== undefined && val !== null && index < path.length) {
+        val = val[path[index++]]
 
-    while (val !== undefined && val !== null && index < path.length) {
-      val = val[path[index++]]
-      val = isFunction(val) ? val(resolvePath, configUtils) : val
-    }
+        let shouldResolveAsFn =
+          isFunction(val) && (path.alpha === undefined || index <= path.length - 1)
 
-    return val === undefined ? defaultValue : val
-  }
+        val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
+      }
+
+      if (val !== undefined) {
+        if (path.alpha !== undefined) {
+          let normalized = parseColorFormat(val)
+
+          return withAlphaValue(normalized, path.alpha, toColorValue(normalized))
+        }
+
+        if (isPlainObject(val)) {
+          return cloneDeep(val)
+        }
 
-  resolvePath.theme = resolvePath
+        return val
+      }
+    }
 
-  for (let key in configUtils) {
-    resolvePath[key] = configUtils[key]
+    return defaultValue
   }
 
+  Object.assign(resolvePath, {
+    theme: resolvePath,
+    ...configUtils,
+  })
+
   return Object.keys(object).reduce((resolved, key) => {
-    return {
-      ...resolved,
-      [key]: isFunction(object[key]) ? object[key](resolvePath, configUtils) : object[key],
-    }
+    resolved[key] = isFunction(object[key]) ? object[key](resolvePath, configUtils) : object[key]
+
+    return resolved
   }, {})
 }
 
@@ -207,7 +259,6 @@ export default function resolveConfig(configs) {
       prefix: '',
       important: false,
       separator: ':',
-      variantOrder: defaultConfig.variantOrder,
     },
   ]
 
@@ -224,59 +275,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/splitAtTopLevelOnly.js

@@ -0,0 +1,45 @@
+/**
+ * This splits a string on a top-level character.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren placement.
+ *
+ * Expected behavior using commas:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ * @param {string} separator
+ */
+export function splitAtTopLevelOnly(input, separator) {
+  let stack = []
+  let parts = []
+  let lastPos = 0
+
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
+
+    if (stack.length === 0 && char === separator[0]) {
+      if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
+        parts.push(input.slice(lastPos, idx))
+        lastPos = idx + separator.length
+      }
+    }
+
+    if (char === '(' || char === '[' || char === '{') {
+      stack.push(char)
+    } else if (
+      (char === ')' && stack[stack.length - 1] === '(') ||
+      (char === ']' && stack[stack.length - 1] === '[') ||
+      (char === '}' && stack[stack.length - 1] === '{')
+    ) {
+      stack.pop()
+    }
+  }
+
+  parts.push(input.slice(lastPos))
+
+  return parts
+}

package/src/util/toPath.js

@@ -1,4 +1,26 @@
+/**
+ * Parse a path string into an array of path segments.
+ *
+ * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
+ *
+ * Example:
+ * a -> ['a']
+ * a.b.c -> ['a', 'b', 'c']
+ * a[b].c -> ['a', 'b', 'c']
+ * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
+ * a[b][c][d] -> ['a', 'b', 'c', 'd']
+ *
+ * @param {string|string[]} path
+ **/
 export function toPath(path) {
   if (Array.isArray(path)) return path
-  return path.split(/[\.\]\[]+/g)
+
+  let openBrackets = path.split('[').length - 1
+  let closedBrackets = path.split(']').length - 1
+
+  if (openBrackets !== closedBrackets) {
+    throw new Error(`Path is invalid. Has unbalanced brackets: ${path}`)
+  }
+
+  return path.split(/\.(?![^\[]*\])|[\[\]]/g).filter(Boolean)
 }

package/src/util/transformThemeValue.js

@@ -1,13 +1,26 @@
 import postcss from 'postcss'
+import isPlainObject from './isPlainObject'
 
 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 (themeSection === 'fontFamily') {
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      let families = Array.isArray(value) && isPlainObject(value[1]) ? value[0] : value
+      return Array.isArray(families) ? families.join(', ') : families
+    }
   }
 
   if (
     [
-      'fontFamily',
       'boxShadow',
       'transitionProperty',
       'transitionDuration',
@@ -20,18 +33,30 @@ 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, opts = {}) => {
+    if (typeof value === 'function') {
+      value = value(opts)
+    }
+
+    return value
+  }
 }

package/src/util/validateConfig.js

@@ -0,0 +1,13 @@
+import log from './log'
+
+export function validateConfig(config) {
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` option in your Tailwind CSS configuration is missing or empty.',
+      'Configure your content sources or your generated CSS will be missing styles.',
+      'https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
+  return config
+}

package/src/util/validateFormalSyntax.js

@@ -0,0 +1,34 @@
+import { length, percentage } from './dataTypes'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
+/**
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#formal_syntax
+ *
+ * background-size =
+ *  <bg-size>#
+ *
+ * <bg-size> =
+ *   [ <length-percentage [0,∞]> | auto ]{1,2}  |
+ *   cover                                      |
+ *   contain
+ *
+ * <length-percentage> =
+ *   <length>      |
+ *   <percentage>
+ *
+ * @param {string} value
+ */
+export function backgroundSize(value) {
+  let keywordValues = ['cover', 'contain']
+  // the <length-percentage> type will probably be a css function
+  // so we have to use `splitAtTopLevelOnly`
+  return splitAtTopLevelOnly(value, ',').every((part) => {
+    let sizes = splitAtTopLevelOnly(part, '_').filter(Boolean)
+    if (sizes.length === 1 && keywordValues.includes(sizes[0])) return true
+
+    if (sizes.length !== 1 && sizes.length !== 2) return false
+
+    return sizes.every((size) => length(size) || percentage(size) || size === 'auto')
+  })
+}

package/src/util/withAlphaVariable.js

@@ -5,7 +5,7 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
     return color({ opacityValue: alphaValue })
   }
 
-  let parsed = parseColor(color)
+  let parsed = parseColor(color, { loose: true })
 
   if (parsed === null) {
     return defaultValue
@@ -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})` })]
+      })
+    ),
   }
 }