tailwindcss 3.0.24 → 3.1.0

package/src/util/pluginUtils.js

@@ -95,9 +95,19 @@ function splitAlpha(modifier) {
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
+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
+}
+
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
-    return options.values?.[modifier]
+    return parseColorFormat(options.values?.[modifier])
   }
 
   let [color, alpha] = splitAlpha(modifier)
@@ -110,6 +120,8 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
       return undefined
     }
 
+    normalizedColor = parseColorFormat(normalizedColor)
+
     if (isArbitraryValue(alpha)) {
       return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }

package/src/util/resolveConfig.js

@@ -8,6 +8,9 @@ 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'
@@ -66,38 +69,6 @@ const configUtils = {
         {}
       )
   },
-  /*
-  rgb(property) {
-    if (!property.startsWith('--')) {
-      throw new Error(
-        'The rgb() helper requires a custom property name to be passed as the first argument.'
-      )
-    }
-
-    return ({ opacityValue }) => {
-      if (opacityValue === undefined || opacityValue === 1) {
-        return `rgb(var(${property}) / 1.0)`
-      }
-
-      return `rgb(var(${property}) / ${opacityValue})`
-    }
-  },
-  hsl(property) {
-    if (!property.startsWith('--')) {
-      throw new Error(
-        'The hsl() helper requires a custom property name to be passed as the first argument.'
-      )
-    }
-
-    return ({ opacityValue }) => {
-      if (opacityValue === undefined || opacityValue === 1) {
-        return `hsl(var(${property}) / 1)`
-      }
-
-      return `hsl(var(${property}) / ${opacityValue})`
-    }
-  },
-  */
 }
 
 function value(valueToResolve, ...args) {
@@ -166,40 +137,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)
 
-    if (val === undefined) {
-      return defaultValue
-    }
+        val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
+      }
 
-    if (isPlainObject(val)) {
-      return cloneDeep(val)
-    }
+      if (val !== undefined) {
+        if (path.alpha !== undefined) {
+          let normalized = parseColorFormat(val)
 
-    return val
-  }
+          return withAlphaValue(normalized, path.alpha, toColorValue(normalized))
+        }
 
-  resolvePath.theme = resolvePath
+        if (isPlainObject(val)) {
+          return cloneDeep(val)
+        }
+
+        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
   }, {})
 }
 

package/src/util/splitAtTopLevelOnly.js

@@ -0,0 +1,71 @@
+import * as regex from '../lib/regex'
+
+/**
+ * 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 SPECIALS = new RegExp(`[(){}\\[\\]${regex.escape(separator)}]`, 'g')
+
+  let depth = 0
+  let lastIndex = 0
+  let found = false
+  let separatorIndex = 0
+  let separatorStart = 0
+  let separatorLength = separator.length
+
+  // Find all paren-like things & character
+  // And only split on commas if they're top-level
+  for (let match of input.matchAll(SPECIALS)) {
+    let matchesSeparator = match[0] === separator[separatorIndex]
+    let atEndOfSeparator = separatorIndex === separatorLength - 1
+    let matchesFullSeparator = matchesSeparator && atEndOfSeparator
+
+    if (match[0] === '(') depth++
+    if (match[0] === ')') depth--
+    if (match[0] === '[') depth++
+    if (match[0] === ']') depth--
+    if (match[0] === '{') depth++
+    if (match[0] === '}') depth--
+
+    if (matchesSeparator && depth === 0) {
+      if (separatorStart === 0) {
+        separatorStart = match.index
+      }
+
+      separatorIndex++
+    }
+
+    if (matchesFullSeparator && depth === 0) {
+      found = true
+
+      yield input.substring(lastIndex, separatorStart)
+      lastIndex = separatorStart + separatorLength
+    }
+
+    if (separatorIndex === separatorLength) {
+      separatorIndex = 0
+      separatorStart = 0
+    }
+  }
+
+  // Provide the last segment of the string if available
+  // Otherwise the whole string since no `char`s were found
+  // This mirrors the behavior of string.split()
+  if (found) {
+    yield input.substring(lastIndex)
+  } else {
+    yield input
+  }
+}

package/src/util/toPath.js

@@ -4,7 +4,7 @@
  * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
  *
  * Example:
- * a -> ['a]
+ * a -> ['a']
  * a.b.c -> ['a', 'b', 'c']
  * a[b].c -> ['a', 'b', 'c']
  * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']

package/src/util/transformThemeValue.js

@@ -44,8 +44,10 @@ export default function transformThemeValue(themeSection) {
     }
   }
 
-  return (value) => {
-    if (typeof value === 'function') 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/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

package/stubs/defaultConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   presets: [],
@@ -194,11 +195,9 @@ module.exports = {
       '3xl': '1.5rem',
       full: '9999px',
     },
-    /*
     borderSpacing: ({ theme }) => ({
       ...theme('spacing'),
     }),
-    */
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',
@@ -722,7 +721,7 @@ module.exports = {
       8: '8px',
     },
     ringColor: ({ theme }) => ({
-      DEFAULT: theme('colors.blue.500', '#3b82f6'),
+      DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
       ...theme('colors'),
     }),
     ringOffsetColor: ({ theme }) => theme('colors'),

package/stubs/simpleConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   theme: {

package/types/config.d.ts

@@ -0,0 +1,325 @@
+import type { CorePluginList } from './generated/CorePluginList'
+import type { DefaultColors } from './generated/colors'
+
+// Helpers
+type Expand<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: Expand<O[K]> }
+    : never
+  : T
+type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>
+}
+type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+
+interface PluginUtils {
+  colors: DefaultColors
+  theme(path: string, defaultValue?: unknown): any
+  breakpoints<I = Record<string, unknown>, O = I>(arg: I): O
+  rgb(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
+  hsl(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
+}
+
+// Content related config
+type FilePath = string
+type RawFile = { raw: string; extension?: string }
+type ExtractorFn = (content: string) => string[]
+type TransformerFn = (content: string) => string
+type ContentConfig =
+  | (FilePath | RawFile)[]
+  | {
+      files: (FilePath | RawFile)[]
+      extract?: ExtractorFn | { [extension: string]: ExtractorFn }
+      transform?: TransformerFn | { [extension: string]: TransformerFn }
+    }
+
+// Important related config
+type ImportantConfig = boolean | string
+
+// Prefix related config
+type PrefixConfig = string
+
+// Separator related config
+type SeparatorConfig = string
+
+// Safelist related config
+type SafelistConfig =
+  | string[]
+  | {
+      pattern: RegExp
+      variants: string[]
+    }[]
+
+// Presets related config
+type PresetsConfig = Config[]
+
+// Future related config
+type FutureConfigValues = never // Replace with 'future-feature-1' | 'future-feature-2'
+type FutureConfig = Expand<'all' | Partial<Record<FutureConfigValues, boolean>>> | []
+
+// Experimental related config
+type ExperimentalConfigValues = 'optimizeUniversalDefaults' // Replace with 'experimental-feature-1' | 'experimental-feature-2'
+type ExperimentalConfig = Expand<'all' | Partial<Record<ExperimentalConfigValues, boolean>>> | []
+
+// DarkMode related config
+type DarkModeConfig =
+  // Use the `media` query strategy.
+  | 'media'
+  // Use the `class` stategy, which requires a `.dark` class on the `html`.
+  | 'class'
+  // Use the `class` stategy with a custom class instead of `.dark`.
+  | ['class', string]
+
+type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
+type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
+
+// Theme related config
+interface ThemeConfig {
+  // Responsiveness
+  screens: ResolvableTo<ScreensConfig>
+
+  // Reusable base configs
+  colors: ResolvableTo<RecursiveKeyValuePair>
+  spacing: ResolvableTo<KeyValuePair>
+
+  // Components
+  container: ResolvableTo<
+    Partial<{
+      screens: ScreensConfig
+      center: boolean
+      padding: string | Record<string, string>
+    }>
+  >
+
+  // Utilities
+  inset: ThemeConfig['spacing']
+  zIndex: ResolvableTo<KeyValuePair>
+  order: ResolvableTo<KeyValuePair>
+  gridColumn: ResolvableTo<KeyValuePair>
+  gridColumnStart: ResolvableTo<KeyValuePair>
+  gridColumnEnd: ResolvableTo<KeyValuePair>
+  gridRow: ResolvableTo<KeyValuePair>
+  gridRowStart: ResolvableTo<KeyValuePair>
+  gridRowEnd: ResolvableTo<KeyValuePair>
+  margin: ThemeConfig['spacing']
+  aspectRatio: ResolvableTo<KeyValuePair>
+  height: ThemeConfig['spacing']
+  maxHeight: ThemeConfig['spacing']
+  minHeight: ResolvableTo<KeyValuePair>
+  width: ThemeConfig['spacing']
+  maxWidth: ResolvableTo<KeyValuePair>
+  minWidth: ResolvableTo<KeyValuePair>
+  flex: ResolvableTo<KeyValuePair>
+  flexShrink: ResolvableTo<KeyValuePair>
+  flexGrow: ResolvableTo<KeyValuePair>
+  flexBasis: ThemeConfig['spacing']
+  borderSpacing: ThemeConfig['spacing']
+  transformOrigin: ResolvableTo<KeyValuePair>
+  translate: ThemeConfig['spacing']
+  rotate: ResolvableTo<KeyValuePair>
+  skew: ResolvableTo<KeyValuePair>
+  scale: ResolvableTo<KeyValuePair>
+  animation: ResolvableTo<KeyValuePair>
+  keyframes: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair>>>
+  cursor: ResolvableTo<KeyValuePair>
+  scrollMargin: ThemeConfig['spacing']
+  scrollPadding: ThemeConfig['spacing']
+  listStyleType: ResolvableTo<KeyValuePair>
+  columns: ResolvableTo<KeyValuePair>
+  gridAutoColumns: ResolvableTo<KeyValuePair>
+  gridAutoRows: ResolvableTo<KeyValuePair>
+  gridTemplateColumns: ResolvableTo<KeyValuePair>
+  gridTemplateRows: ResolvableTo<KeyValuePair>
+  gap: ThemeConfig['spacing']
+  space: ThemeConfig['spacing']
+  divideWidth: ThemeConfig['borderWidth']
+  divideColor: ThemeConfig['borderColor']
+  divideOpacity: ThemeConfig['borderOpacity']
+  borderRadius: ResolvableTo<KeyValuePair>
+  borderWidth: ResolvableTo<KeyValuePair>
+  borderColor: ThemeConfig['colors']
+  borderOpacity: ThemeConfig['opacity']
+  backgroundColor: ThemeConfig['colors']
+  backgroundOpacity: ThemeConfig['opacity']
+  backgroundImage: ResolvableTo<KeyValuePair>
+  gradientColorStops: ThemeConfig['colors']
+  backgroundSize: ResolvableTo<KeyValuePair>
+  backgroundPosition: ResolvableTo<KeyValuePair>
+  fill: ThemeConfig['colors']
+  stroke: ThemeConfig['colors']
+  strokeWidth: ResolvableTo<KeyValuePair>
+  objectPosition: ResolvableTo<KeyValuePair>
+  padding: ThemeConfig['spacing']
+  textIndent: ThemeConfig['spacing']
+  fontFamily: ResolvableTo<KeyValuePair<string, string[]>>
+  fontSize: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | [fontSize: string, lineHeight: string]
+      | [
+          fontSize: string,
+          configuration: Partial<{
+            lineHeight: string
+            letterSpacing: string
+          }>
+        ]
+    >
+  >
+  fontWeight: ResolvableTo<KeyValuePair>
+  lineHeight: ResolvableTo<KeyValuePair>
+  letterSpacing: ResolvableTo<KeyValuePair>
+  textColor: ThemeConfig['colors']
+  textOpacity: ThemeConfig['opacity']
+  textDecorationColor: ThemeConfig['colors']
+  textDecorationThickness: ResolvableTo<KeyValuePair>
+  textUnderlineOffset: ResolvableTo<KeyValuePair>
+  placeholderColor: ThemeConfig['colors']
+  placeholderOpacity: ThemeConfig['opacity']
+  caretColor: ThemeConfig['colors']
+  accentColor: ThemeConfig['colors']
+  opacity: ResolvableTo<KeyValuePair>
+  boxShadow: ResolvableTo<KeyValuePair>
+  boxShadowColor: ThemeConfig['colors']
+  outlineWidth: ResolvableTo<KeyValuePair>
+  outlineOffset: ResolvableTo<KeyValuePair>
+  outlineColor: ThemeConfig['colors']
+  ringWidth: ResolvableTo<KeyValuePair>
+  ringColor: ThemeConfig['colors']
+  ringOpacity: ThemeConfig['opacity']
+  ringOffsetWidth: ResolvableTo<KeyValuePair>
+  ringOffsetColor: ThemeConfig['colors']
+  blur: ResolvableTo<KeyValuePair>
+  brightness: ResolvableTo<KeyValuePair>
+  contrast: ResolvableTo<KeyValuePair>
+  dropShadow: ResolvableTo<KeyValuePair>
+  grayscale: ResolvableTo<KeyValuePair>
+  hueRotate: ResolvableTo<KeyValuePair>
+  invert: ResolvableTo<KeyValuePair>
+  saturate: ResolvableTo<KeyValuePair>
+  sepia: ResolvableTo<KeyValuePair>
+  backdropBlur: ThemeConfig['blur']
+  backdropBrightness: ThemeConfig['brightness']
+  backdropContrast: ThemeConfig['contrast']
+  backdropGrayscale: ThemeConfig['grayscale']
+  backdropHueRotate: ThemeConfig['hueRotate']
+  backdropInvert: ThemeConfig['invert']
+  backdropOpacity: ThemeConfig['opacity']
+  backdropSaturate: ThemeConfig['saturate']
+  backdropSepia: ThemeConfig['sepia']
+  transitionProperty: ResolvableTo<KeyValuePair>
+  transitionTimingFunction: ResolvableTo<KeyValuePair>
+  transitionDelay: ResolvableTo<KeyValuePair>
+  transitionDuration: ResolvableTo<KeyValuePair>
+  willChange: ResolvableTo<KeyValuePair>
+  content: ResolvableTo<KeyValuePair>
+
+  // Custom
+  [key: string]: any
+}
+
+// Core plugins related config
+type CorePluginsConfig = CorePluginList[] | Expand<Partial<Record<CorePluginList, boolean>>>
+
+// Plugins related config
+type ValueType =
+  | 'any'
+  | 'color'
+  | 'url'
+  | 'image'
+  | 'length'
+  | 'percentage'
+  | 'position'
+  | 'lookup'
+  | 'generic-name'
+  | 'family-name'
+  | 'number'
+  | 'line-width'
+  | 'absolute-size'
+  | 'relative-size'
+  | 'shadow'
+export interface PluginAPI {
+  // for registering new static utility styles
+  addUtilities(
+    utilities: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+    }>
+  ): void
+  // for registering new dynamic utility styles
+  matchUtilities<T>(
+    utilities: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+      type: ValueType | ValueType[]
+      values: KeyValuePair<string, T>
+      supportsNegativeValues: boolean
+    }>
+  ): void
+  // for registering new static component styles
+  addComponents(
+    components: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+    }>
+  ): void
+  // for registering new dynamic component styles
+  matchComponents<T>(
+    components: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+      type: ValueType | ValueType[]
+      values: KeyValuePair<string, T>
+      supportsNegativeValues: boolean
+    }>
+  ): void
+  // for registering new base styles
+  addBase(base: RecursiveKeyValuePair | RecursiveKeyValuePair[]): void
+  // for registering custom variants
+  addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
+  // for looking up values in the user’s theme configuration
+  theme: <TDefaultValue = Config['theme']>(
+    path?: string,
+    defaultValue?: TDefaultValue
+  ) => TDefaultValue
+  // for looking up values in the user’s Tailwind configuration
+  config: <TDefaultValue = Config>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue
+  // for checking if a core plugin is enabled
+  corePlugins(path: string): boolean
+  // for manually escaping strings meant to be used in class names
+  e: (className: string) => string
+}
+export type PluginCreator = (api: PluginAPI) => void
+export type PluginsConfig = (
+  | PluginCreator
+  | { handler: PluginCreator; config?: Config }
+  | { (options: any): { handler: PluginCreator; config?: Config }; __isOptionsFunction: true }
+)[]
+
+// Top level config related
+interface RequiredConfig {
+  content: ContentConfig
+}
+
+interface OptionalConfig {
+  important: Partial<ImportantConfig>
+  prefix: Partial<PrefixConfig>
+  separator: Partial<SeparatorConfig>
+  safelist: Partial<SafelistConfig>
+  presets: Partial<PresetsConfig>
+  future: Partial<FutureConfig>
+  experimental: Partial<ExperimentalConfig>
+  darkMode: Partial<DarkModeConfig>
+  theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }>
+  corePlugins: Partial<CorePluginsConfig>
+  plugins: Partial<PluginsConfig>
+  // Custom
+  [key: string]: any
+}
+
+export type Config = RequiredConfig & Partial<OptionalConfig>