tailwindcss 3.4.0 → 4.0.0-alpha.1

package/src/util/normalizeConfig.js

@@ -1,301 +0,0 @@
-import { flagEnabled } from '../featureFlags'
-import log, { dim } from './log'
-
-export function normalizeConfig(config) {
-  // Quick structure validation
-  /**
-   * type FilePath = string
-   * type RawFile = { raw: string, extension?: string }
-   * type ExtractorFn = (content: string) => Array<string>
-   * type TransformerFn = (content: string) => string
-   *
-   * type Content =
-   *   | Array<FilePath | RawFile>
-   *   | {
-   *       files: Array<FilePath | RawFile>,
-   *       extract?: ExtractorFn | { [extension: string]: ExtractorFn }
-   *       transform?: TransformerFn | { [extension: string]: TransformerFn }
-   *   }
-   */
-  let valid = (() => {
-    // `config.purge` should not exist anymore
-    if (config.purge) {
-      return false
-    }
-
-    // `config.content` should exist
-    if (!config.content) {
-      return false
-    }
-
-    // `config.content` should be an object or an array
-    if (
-      !Array.isArray(config.content) &&
-      !(typeof config.content === 'object' && config.content !== null)
-    ) {
-      return false
-    }
-
-    // When `config.content` is an array, it should consist of FilePaths or RawFiles
-    if (Array.isArray(config.content)) {
-      return config.content.every((path) => {
-        // `path` can be a string
-        if (typeof path === 'string') return true
-
-        // `path` can be an object { raw: string, extension?: string }
-        // `raw` must be a string
-        if (typeof path?.raw !== 'string') return false
-
-        // `extension` (if provided) should also be a string
-        if (path?.extension && typeof path?.extension !== 'string') {
-          return false
-        }
-
-        return true
-      })
-    }
-
-    // When `config.content` is an object
-    if (typeof config.content === 'object' && config.content !== null) {
-      // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content`
-      if (
-        Object.keys(config.content).some(
-          (key) => !['files', 'relative', 'extract', 'transform'].includes(key)
-        )
-      ) {
-        return false
-      }
-
-      // `config.content.files` should exist of FilePaths or RawFiles
-      if (Array.isArray(config.content.files)) {
-        if (
-          !config.content.files.every((path) => {
-            // `path` can be a string
-            if (typeof path === 'string') return true
-
-            // `path` can be an object { raw: string, extension?: string }
-            // `raw` must be a string
-            if (typeof path?.raw !== 'string') return false
-
-            // `extension` (if provided) should also be a string
-            if (path?.extension && typeof path?.extension !== 'string') {
-              return false
-            }
-
-            return true
-          })
-        ) {
-          return false
-        }
-
-        // `config.content.extract` is optional, and can be a Function or a Record<String, Function>
-        if (typeof config.content.extract === 'object') {
-          for (let value of Object.values(config.content.extract)) {
-            if (typeof value !== 'function') {
-              return false
-            }
-          }
-        } else if (
-          !(config.content.extract === undefined || typeof config.content.extract === 'function')
-        ) {
-          return false
-        }
-
-        // `config.content.transform` is optional, and can be a Function or a Record<String, Function>
-        if (typeof config.content.transform === 'object') {
-          for (let value of Object.values(config.content.transform)) {
-            if (typeof value !== 'function') {
-              return false
-            }
-          }
-        } else if (
-          !(
-            config.content.transform === undefined || typeof config.content.transform === 'function'
-          )
-        ) {
-          return false
-        }
-
-        // `config.content.relative` is optional and can be a boolean
-        if (
-          typeof config.content.relative !== 'boolean' &&
-          typeof config.content.relative !== 'undefined'
-        ) {
-          return false
-        }
-      }
-
-      return true
-    }
-
-    return false
-  })()
-
-  if (!valid) {
-    log.warn('purge-deprecation', [
-      'The `purge`/`content` options have changed in Tailwind CSS v3.0.',
-      'Update your configuration file to eliminate this warning.',
-      'https://tailwindcss.com/docs/upgrade-guide#configure-content-sources',
-    ])
-  }
-
-  // Normalize the `safelist`
-  config.safelist = (() => {
-    let { content, purge, safelist } = config
-
-    if (Array.isArray(safelist)) return safelist
-    if (Array.isArray(content?.safelist)) return content.safelist
-    if (Array.isArray(purge?.safelist)) return purge.safelist
-    if (Array.isArray(purge?.options?.safelist)) return purge.options.safelist
-
-    return []
-  })()
-
-  // Normalize the `blocklist`
-  config.blocklist = (() => {
-    let { blocklist } = config
-
-    if (Array.isArray(blocklist)) {
-      if (blocklist.every((item) => typeof item === 'string')) {
-        return blocklist
-      }
-
-      log.warn('blocklist-invalid', [
-        'The `blocklist` option must be an array of strings.',
-        'https://tailwindcss.com/docs/content-configuration#discarding-classes',
-      ])
-    }
-
-    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.',
-      'https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function',
-    ])
-    config.prefix = ''
-  } else {
-    config.prefix = config.prefix ?? ''
-  }
-
-  // Normalize the `content`
-  config.content = {
-    relative: (() => {
-      let { content } = config
-
-      if (content?.relative) {
-        return content.relative
-      }
-
-      return flagEnabled(config, 'relativeContentPathsByDefault')
-    })(),
-
-    files: (() => {
-      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
-      if (Array.isArray(content?.files)) return content.files
-
-      return []
-    })(),
-
-    extract: (() => {
-      let extract = (() => {
-        if (config.purge?.extract) return config.purge.extract
-        if (config.content?.extract) return config.content.extract
-
-        if (config.purge?.extract?.DEFAULT) return config.purge.extract.DEFAULT
-        if (config.content?.extract?.DEFAULT) return config.content.extract.DEFAULT
-
-        if (config.purge?.options?.extractors) return config.purge.options.extractors
-        if (config.content?.options?.extractors) return config.content.options.extractors
-
-        return {}
-      })()
-
-      let extractors = {}
-
-      let defaultExtractor = (() => {
-        if (config.purge?.options?.defaultExtractor) {
-          return config.purge.options.defaultExtractor
-        }
-
-        if (config.content?.options?.defaultExtractor) {
-          return config.content.options.defaultExtractor
-        }
-
-        return undefined
-      })()
-
-      if (defaultExtractor !== undefined) {
-        extractors.DEFAULT = defaultExtractor
-      }
-
-      // Functions
-      if (typeof extract === 'function') {
-        extractors.DEFAULT = extract
-      }
-
-      // Arrays
-      else if (Array.isArray(extract)) {
-        for (let { extensions, extractor } of extract ?? []) {
-          for (let extension of extensions) {
-            extractors[extension] = extractor
-          }
-        }
-      }
-
-      // Objects
-      else if (typeof extract === 'object' && extract !== null) {
-        Object.assign(extractors, extract)
-      }
-
-      return extractors
-    })(),
-
-    transform: (() => {
-      let transform = (() => {
-        if (config.purge?.transform) return config.purge.transform
-        if (config.content?.transform) return config.content.transform
-
-        if (config.purge?.transform?.DEFAULT) return config.purge.transform.DEFAULT
-        if (config.content?.transform?.DEFAULT) return config.content.transform.DEFAULT
-
-        return {}
-      })()
-
-      let transformers = {}
-
-      if (typeof transform === 'function') {
-        transformers.DEFAULT = transform
-      }
-
-      if (typeof transform === 'object' && transform !== null) {
-        Object.assign(transformers, transform)
-      }
-
-      return transformers
-    })(),
-  }
-
-  // Validate globs to prevent bogus globs.
-  // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
-  for (let file of config.content.files) {
-    if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
-      log.warn('invalid-glob-braces', [
-        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
-        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
-        // TODO: Add https://tw.wtf/invalid-glob-braces
-      ])
-      break
-    }
-  }
-
-  return config
-}

package/src/util/normalizeScreens.js

@@ -1,140 +0,0 @@
-/**
- * @typedef {object} ScreenValue
- * @property {number|undefined} min
- * @property {number|undefined} max
- * @property {string|undefined} raw
- */
-
-/**
- * @typedef {object} Screen
- * @property {string} name
- * @property {boolean} not
- * @property {ScreenValue[]} values
- */
-
-/**
- * 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
- *
- * @returns {Screen[]}
- */
-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(), not: false, values: [{ min: screen, max: undefined }] }
-      }
-
-      let [name, options] = screen
-      name = name.toString()
-
-      if (typeof options === 'string') {
-        return { name, not: false, values: [{ min: options, max: undefined }] }
-      }
-
-      if (Array.isArray(options)) {
-        return { name, not: false, values: options.map((option) => resolveValue(option)) }
-      }
-
-      return { name, not: false, values: [resolveValue(options)] }
-    })
-  }
-
-  return normalizeScreens(Object.entries(screens ?? {}), false)
-}
-
-/**
- * @param {Screen} screen
- * @returns {{result: false, reason: string} | {result: true, reason: null}}
- */
-export function isScreenSortable(screen) {
-  if (screen.values.length !== 1) {
-    return { result: false, reason: 'multiple-values' }
-  } else if (screen.values[0].raw !== undefined) {
-    return { result: false, reason: 'raw-values' }
-  } else if (screen.values[0].min !== undefined && screen.values[0].max !== undefined) {
-    return { result: false, reason: 'min-and-max' }
-  }
-
-  return { result: true, reason: null }
-}
-
-/**
- * @param {'min' | 'max'} type
- * @param {Screen | 'string'} a
- * @param {Screen | 'string'} z
- * @returns {number}
- */
-export function compareScreens(type, a, z) {
-  let aScreen = toScreen(a, type)
-  let zScreen = toScreen(z, type)
-
-  let aSorting = isScreenSortable(aScreen)
-  let bSorting = isScreenSortable(zScreen)
-
-  // These cases should never happen and indicate a bug in Tailwind CSS itself
-  if (aSorting.reason === 'multiple-values' || bSorting.reason === 'multiple-values') {
-    throw new Error(
-      'Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.'
-    )
-  } else if (aSorting.reason === 'raw-values' || bSorting.reason === 'raw-values') {
-    throw new Error(
-      'Attempted to sort a screen with raw values. This should never happen. Please open a bug report.'
-    )
-  } else if (aSorting.reason === 'min-and-max' || bSorting.reason === 'min-and-max') {
-    throw new Error(
-      'Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.'
-    )
-  }
-
-  // Let the sorting begin
-  let { min: aMin, max: aMax } = aScreen.values[0]
-  let { min: zMin, max: zMax } = zScreen.values[0]
-
-  // Negating screens flip their behavior. Basically `not min-width` is `max-width`
-  if (a.not) [aMin, aMax] = [aMax, aMin]
-  if (z.not) [zMin, zMax] = [zMax, zMin]
-
-  aMin = aMin === undefined ? aMin : parseFloat(aMin)
-  aMax = aMax === undefined ? aMax : parseFloat(aMax)
-  zMin = zMin === undefined ? zMin : parseFloat(zMin)
-  zMax = zMax === undefined ? zMax : parseFloat(zMax)
-
-  let [aValue, zValue] = type === 'min' ? [aMin, zMin] : [zMax, aMax]
-
-  return aValue - zValue
-}
-
-/**
- *
- * @param {PartialScreen> | string} value
- * @param {'min' | 'max'} type
- * @returns {Screen}
- */
-export function toScreen(value, type) {
-  if (typeof value === 'object') {
-    return value
-  }
-
-  return {
-    name: 'arbitrary-screen',
-    values: [{ [type]: value }],
-  }
-}
-
-function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {
-  return { min, max, raw }
-}

package/src/util/parseAnimationValue.js

@@ -1,68 +0,0 @@
-const DIRECTIONS = new Set(['normal', 'reverse', 'alternate', 'alternate-reverse'])
-const PLAY_STATES = new Set(['running', 'paused'])
-const FILL_MODES = new Set(['none', 'forwards', 'backwards', 'both'])
-const ITERATION_COUNTS = new Set(['infinite'])
-const TIMINGS = new Set([
-  'linear',
-  'ease',
-  'ease-in',
-  'ease-out',
-  'ease-in-out',
-  'step-start',
-  'step-end',
-])
-const TIMING_FNS = ['cubic-bezier', 'steps']
-
-const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
-const SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-const TIME = /^(-?[\d.]+m?s)$/
-const DIGIT = /^(\d+)$/
-
-export default function parseAnimationValue(input) {
-  let animations = input.split(COMMA)
-  return animations.map((animation) => {
-    let value = animation.trim()
-    let result = { value }
-    let parts = value.split(SPACE)
-    let seen = new Set()
-
-    for (let part of parts) {
-      if (!seen.has('DIRECTIONS') && DIRECTIONS.has(part)) {
-        result.direction = part
-        seen.add('DIRECTIONS')
-      } else if (!seen.has('PLAY_STATES') && PLAY_STATES.has(part)) {
-        result.playState = part
-        seen.add('PLAY_STATES')
-      } else if (!seen.has('FILL_MODES') && FILL_MODES.has(part)) {
-        result.fillMode = part
-        seen.add('FILL_MODES')
-      } else if (
-        !seen.has('ITERATION_COUNTS') &&
-        (ITERATION_COUNTS.has(part) || DIGIT.test(part))
-      ) {
-        result.iterationCount = part
-        seen.add('ITERATION_COUNTS')
-      } else if (!seen.has('TIMING_FUNCTION') && TIMINGS.has(part)) {
-        result.timingFunction = part
-        seen.add('TIMING_FUNCTION')
-      } else if (!seen.has('TIMING_FUNCTION') && TIMING_FNS.some((f) => part.startsWith(`${f}(`))) {
-        result.timingFunction = part
-        seen.add('TIMING_FUNCTION')
-      } else if (!seen.has('DURATION') && TIME.test(part)) {
-        result.duration = part
-        seen.add('DURATION')
-      } else if (!seen.has('DELAY') && TIME.test(part)) {
-        result.delay = part
-        seen.add('DELAY')
-      } else if (!seen.has('NAME')) {
-        result.name = part
-        seen.add('NAME')
-      } else {
-        if (!result.unknown) result.unknown = []
-        result.unknown.push(part)
-      }
-    }
-
-    return result
-  })
-}

package/src/util/parseBoxShadowValue.js

@@ -1,72 +0,0 @@
-import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
-
-let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
-
-export function parseBoxShadowValue(input) {
-  let shadows = splitAtTopLevelOnly(input, ',')
-  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/parseDependency.js

@@ -1,44 +0,0 @@
-// @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 (!contentPath.glob) {
-    return [
-      {
-        type: 'dependency',
-        file: contentPath.base,
-      },
-    ]
-  }
-
-  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 [
-    {
-      type: 'dir-dependency',
-      dir: contentPath.base,
-      glob: contentPath.glob,
-    },
-  ]
-}

package/src/util/parseGlob.js

@@ -1,24 +0,0 @@
-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/parseObjectStyles.js

@@ -1,19 +0,0 @@
-import postcss from 'postcss'
-import postcssNested from 'postcss-nested'
-import postcssJs from 'postcss-js'
-
-export default function parseObjectStyles(styles) {
-  if (!Array.isArray(styles)) {
-    return parseObjectStyles([styles])
-  }
-
-  return styles.flatMap((style) => {
-    return postcss([
-      postcssNested({
-        bubble: ['screen'],
-      }),
-    ]).process(style, {
-      parser: postcssJs,
-    }).root.nodes
-  })
-}