tailwindcss 3.4.0 → 4.0.0-alpha.1

package/src/cli/build/watching.js

@@ -1,229 +0,0 @@
-// @ts-check
-
-import chokidar from 'chokidar'
-import fs from 'fs'
-import micromatch from 'micromatch'
-import normalizePath from 'normalize-path'
-import path from 'path'
-
-import { readFileWithRetries } from './utils.js'
-
-/**
- * The core idea of this watcher is:
- * 1. Whenever a file is added, changed, or renamed we queue a rebuild
- * 2. Perform as few rebuilds as possible by batching them together
- * 3. Coalesce events that happen in quick succession to avoid unnecessary rebuilds
- * 4. Ensure another rebuild happens _if_ changed while a rebuild is in progress
- */
-
-/**
- *
- * @param {*} args
- * @param {{ state, rebuild(changedFiles: any[]): Promise<any> }} param1
- * @returns {{
- *   fswatcher: import('chokidar').FSWatcher,
- *   refreshWatchedFiles(): void,
- * }}
- */
-export function createWatcher(args, { state, rebuild }) {
-  let shouldPoll = args['--poll']
-  let shouldCoalesceWriteEvents = shouldPoll || process.platform === 'win32'
-
-  // Polling interval in milliseconds
-  // Used only when polling or coalescing add/change events on Windows
-  let pollInterval = 10
-
-  let watcher = chokidar.watch([], {
-    // Force checking for atomic writes in all situations
-    // This causes chokidar to wait up to 100ms for a file to re-added after it's been unlinked
-    // This only works when watching directories though
-    atomic: true,
-
-    usePolling: shouldPoll,
-    interval: shouldPoll ? pollInterval : undefined,
-    ignoreInitial: true,
-    awaitWriteFinish: shouldCoalesceWriteEvents
-      ? {
-          stabilityThreshold: 50,
-          pollInterval: pollInterval,
-        }
-      : false,
-  })
-
-  // A queue of rebuilds, file reads, etc… to run
-  let chain = Promise.resolve()
-
-  /**
-   * A list of files that have been changed since the last rebuild
-   *
-   * @type {{file: string, content: () => Promise<string>, extension: string}[]}
-   */
-  let changedContent = []
-
-  /**
-   * A list of files for which a rebuild has already been queued.
-   * This is used to prevent duplicate rebuilds when multiple events are fired for the same file.
-   * The rebuilt file is cleared from this list when it's associated rebuild has _started_
-   * This is because if the file is changed during a rebuild it won't trigger a new rebuild which it should
-   **/
-  let pendingRebuilds = new Set()
-
-  let _timer
-  let _reject
-
-  /**
-   * Rebuilds the changed files and resolves when the rebuild is
-   * complete regardless of whether it was successful or not
-   */
-  async function rebuildAndContinue() {
-    let changes = changedContent.splice(0)
-
-    // There are no changes to rebuild so we can just do nothing
-    if (changes.length === 0) {
-      return Promise.resolve()
-    }
-
-    // Clear all pending rebuilds for the about-to-be-built files
-    changes.forEach((change) => pendingRebuilds.delete(change.file))
-
-    // Resolve the promise even when the rebuild fails
-    return rebuild(changes).then(
-      () => {},
-      (e) => {
-        console.error(e.toString())
-      }
-    )
-  }
-
-  /**
-   *
-   * @param {*} file
-   * @param {(() => Promise<string>) | null} content
-   * @param {boolean} skipPendingCheck
-   * @returns {Promise<void>}
-   */
-  function recordChangedFile(file, content = null, skipPendingCheck = false) {
-    file = path.resolve(file)
-
-    // Applications like Vim/Neovim fire both rename and change events in succession for atomic writes
-    // In that case rebuild has already been queued by rename, so can be skipped in change
-    if (pendingRebuilds.has(file) && !skipPendingCheck) {
-      return Promise.resolve()
-    }
-
-    // Mark that a rebuild of this file is going to happen
-    // It MUST happen synchronously before the rebuild is queued for this to be effective
-    pendingRebuilds.add(file)
-
-    changedContent.push({
-      file,
-      content: content ?? (() => fs.promises.readFile(file, 'utf8')),
-      extension: path.extname(file).slice(1),
-    })
-
-    if (_timer) {
-      clearTimeout(_timer)
-      _reject()
-    }
-
-    // If a rebuild is already in progress we don't want to start another one until the 10ms timer has expired
-    chain = chain.then(
-      () =>
-        new Promise((resolve, reject) => {
-          _timer = setTimeout(resolve, 10)
-          _reject = reject
-        })
-    )
-
-    // Resolves once this file has been rebuilt (or the rebuild for this file has failed)
-    // This queues as many rebuilds as there are changed files
-    // But those rebuilds happen after some delay
-    // And will immediately resolve if there are no changes
-    chain = chain.then(rebuildAndContinue, rebuildAndContinue)
-
-    return chain
-  }
-
-  watcher.on('change', (file) => recordChangedFile(file))
-  watcher.on('add', (file) => recordChangedFile(file))
-
-  // Restore watching any files that are "removed"
-  // This can happen when a file is pseudo-atomically replaced (a copy is created, overwritten, the old one is unlinked, and the new one is renamed)
-  // TODO: An an optimization we should allow removal when the config changes
-  watcher.on('unlink', (file) => {
-    file = normalizePath(file)
-
-    // Only re-add the file if it's not covered by a dynamic pattern
-    if (!micromatch.some([file], state.contentPatterns.dynamic)) {
-      watcher.add(file)
-    }
-  })
-
-  // Some applications such as Visual Studio (but not VS Code)
-  // will only fire a rename event for atomic writes and not a change event
-  // This is very likely a chokidar bug but it's one we need to work around
-  // We treat this as a change event and rebuild the CSS
-  watcher.on('raw', (evt, filePath, meta) => {
-    if (evt !== 'rename' || filePath === null) {
-      return
-    }
-
-    let watchedPath = meta.watchedPath
-
-    // Watched path might be the file itself
-    // Or the directory it is in
-    filePath = watchedPath.endsWith(filePath) ? watchedPath : path.join(watchedPath, filePath)
-
-    // Skip this event since the files it is for does not match any of the registered content globs
-    if (!micromatch.some([filePath], state.contentPatterns.all)) {
-      return
-    }
-
-    // Skip since we've already queued a rebuild for this file that hasn't happened yet
-    if (pendingRebuilds.has(filePath)) {
-      return
-    }
-
-    // We'll go ahead and add the file to the pending rebuilds list here
-    // It'll be removed when the rebuild starts unless the read fails
-    // which will be taken care of as well
-    pendingRebuilds.add(filePath)
-
-    async function enqueue() {
-      try {
-        // We need to read the file as early as possible outside of the chain
-        // because it may be gone by the time we get to it. doing the read
-        // immediately increases the chance that the file is still there
-        let content = await readFileWithRetries(path.resolve(filePath))
-
-        if (content === undefined) {
-          return
-        }
-
-        // This will push the rebuild onto the chain
-        // We MUST skip the rebuild check here otherwise the rebuild will never happen on Linux
-        // This is because the order of events and timing is different on Linux
-        // @ts-ignore: TypeScript isn't picking up that content is a string here
-        await recordChangedFile(filePath, () => content, true)
-      } catch {
-        // If reading the file fails, it's was probably a deleted temporary file
-        // So we can ignore it and no rebuild is needed
-      }
-    }
-
-    enqueue().then(() => {
-      // If the file read fails we still need to make sure the file isn't stuck in the pending rebuilds list
-      pendingRebuilds.delete(filePath)
-    })
-  })
-
-  return {
-    fswatcher: watcher,
-
-    refreshWatchedFiles() {
-      watcher.add(Array.from(state.contextDependencies))
-      watcher.add(Array.from(state.configBag.dependencies))
-      watcher.add(state.contentPatterns.all)
-    },
-  }
-}

package/src/cli/help/index.js

@@ -1,70 +0,0 @@
-// @ts-check
-import packageJson from '../../../package.json'
-
-export function help({ message, usage, commands, options }) {
-  let indent = 2
-
-  // Render header
-  console.log()
-  console.log(`${packageJson.name} v${packageJson.version}`)
-
-  // Render message
-  if (message) {
-    console.log()
-    for (let msg of message.split('\n')) {
-      console.log(msg)
-    }
-  }
-
-  // Render usage
-  if (usage && usage.length > 0) {
-    console.log()
-    console.log('Usage:')
-    for (let example of usage) {
-      console.log(' '.repeat(indent), example)
-    }
-  }
-
-  // Render commands
-  if (commands && commands.length > 0) {
-    console.log()
-    console.log('Commands:')
-    for (let command of commands) {
-      console.log(' '.repeat(indent), command)
-    }
-  }
-
-  // Render options
-  if (options) {
-    let groupedOptions = {}
-    for (let [key, value] of Object.entries(options)) {
-      if (typeof value === 'object') {
-        groupedOptions[key] = { ...value, flags: [key] }
-      } else {
-        groupedOptions[value].flags.push(key)
-      }
-    }
-
-    console.log()
-    console.log('Options:')
-    for (let { flags, description, deprecated } of Object.values(groupedOptions)) {
-      if (deprecated) continue
-
-      if (flags.length === 1) {
-        console.log(
-          ' '.repeat(indent + 4 /* 4 = "-i, ".length */),
-          flags.slice().reverse().join(', ').padEnd(20, ' '),
-          description
-        )
-      } else {
-        console.log(
-          ' '.repeat(indent),
-          flags.slice().reverse().join(', ').padEnd(24, ' '),
-          description
-        )
-      }
-    }
-  }
-
-  console.log()
-}

package/src/cli/index.js

@@ -1,216 +0,0 @@
-#!/usr/bin/env node
-
-import path from 'path'
-import arg from 'arg'
-import fs from 'fs'
-
-import { build } from './build'
-import { help } from './help'
-import { init } from './init'
-
-function oneOf(...options) {
-  return Object.assign(
-    (value = true) => {
-      for (let option of options) {
-        let parsed = option(value)
-        if (parsed === value) {
-          return parsed
-        }
-      }
-
-      throw new Error('...')
-    },
-    { manualParsing: true }
-  )
-}
-
-let commands = {
-  init: {
-    run: init,
-    args: {
-      '--esm': { type: Boolean, description: `Initialize configuration file as ESM` },
-      '--ts': { type: Boolean, description: `Initialize configuration file as TypeScript` },
-      '--postcss': { type: Boolean, description: `Initialize a \`postcss.config.js\` file` },
-      '--full': {
-        type: Boolean,
-        description: `Include the default values for all options in the generated configuration file`,
-      },
-      '-f': '--full',
-      '-p': '--postcss',
-    },
-  },
-  build: {
-    run: build,
-    args: {
-      '--input': { type: String, description: 'Input file' },
-      '--output': { type: String, description: 'Output file' },
-      '--watch': {
-        type: oneOf(String, Boolean),
-        description: 'Watch for changes and rebuild as needed',
-      },
-      '--poll': {
-        type: Boolean,
-        description: 'Use polling instead of filesystem events when watching',
-      },
-      '--content': {
-        type: String,
-        description: 'Content paths to use for removing unused classes',
-      },
-      '--purge': {
-        type: String,
-        deprecated: true,
-      },
-      '--postcss': {
-        type: oneOf(String, Boolean),
-        description: 'Load custom PostCSS configuration',
-      },
-      '--minify': { type: Boolean, description: 'Minify the output' },
-      '--config': {
-        type: String,
-        description: 'Path to a custom config file',
-      },
-      '--no-autoprefixer': {
-        type: Boolean,
-        description: 'Disable autoprefixer',
-      },
-      '-c': '--config',
-      '-i': '--input',
-      '-o': '--output',
-      '-m': '--minify',
-      '-w': '--watch',
-      '-p': '--poll',
-    },
-  },
-}
-
-let sharedFlags = {
-  '--help': { type: Boolean, description: 'Display usage information' },
-  '-h': '--help',
-}
-
-if (
-  process.stdout.isTTY /* Detect redirecting output to a file */ &&
-  (process.argv[2] === undefined ||
-    process.argv.slice(2).every((flag) => sharedFlags[flag] !== undefined))
-) {
-  help({
-    usage: [
-      'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
-      'tailwindcss init [--full] [--postcss] [options...]',
-    ],
-    commands: Object.keys(commands)
-      .filter((command) => command !== 'build')
-      .map((command) => `${command} [options]`),
-    options: { ...commands.build.args, ...sharedFlags },
-  })
-  process.exit(0)
-}
-
-let command = ((arg = '') => (arg.startsWith('-') ? undefined : arg))(process.argv[2]) || 'build'
-
-if (commands[command] === undefined) {
-  if (fs.existsSync(path.resolve(command))) {
-    // TODO: Deprecate this in future versions
-    // Check if non-existing command, might be a file.
-    command = 'build'
-  } else {
-    help({
-      message: `Invalid command: ${command}`,
-      usage: ['tailwindcss <command> [options]'],
-      commands: Object.keys(commands)
-        .filter((command) => command !== 'build')
-        .map((command) => `${command} [options]`),
-      options: sharedFlags,
-    })
-    process.exit(1)
-  }
-}
-
-// Execute command
-let { args: flags, run } = commands[command]
-let args = (() => {
-  try {
-    let result = arg(
-      Object.fromEntries(
-        Object.entries({ ...flags, ...sharedFlags })
-          .filter(([_key, value]) => !value?.type?.manualParsing)
-          .map(([key, value]) => [key, typeof value === 'object' ? value.type : value])
-      ),
-      { permissive: true }
-    )
-
-    // Manual parsing of flags to allow for special flags like oneOf(Boolean, String)
-    for (let i = result['_'].length - 1; i >= 0; --i) {
-      let flag = result['_'][i]
-      if (!flag.startsWith('-')) continue
-
-      let [flagName, flagValue] = flag.split('=')
-      let handler = flags[flagName]
-
-      // Resolve flagName & handler
-      while (typeof handler === 'string') {
-        flagName = handler
-        handler = flags[handler]
-      }
-
-      if (!handler) continue
-
-      let args = []
-      let offset = i + 1
-
-      // --flag value syntax was used so we need to pull `value` from `args`
-      if (flagValue === undefined) {
-        // Parse args for current flag
-        while (result['_'][offset] && !result['_'][offset].startsWith('-')) {
-          args.push(result['_'][offset++])
-        }
-
-        // Cleanup manually parsed flags + args
-        result['_'].splice(i, 1 + args.length)
-
-        // No args were provided, use default value defined in handler
-        // One arg was provided, use that directly
-        // Multiple args were provided so pass them all in an array
-        flagValue = args.length === 0 ? undefined : args.length === 1 ? args[0] : args
-      } else {
-        // Remove the whole flag from the args array
-        result['_'].splice(i, 1)
-      }
-
-      // Set the resolved value in the `result` object
-      result[flagName] = handler.type(flagValue, flagName)
-    }
-
-    // Ensure that the `command` is always the first argument in the `args`.
-    // This is important so that we don't have to check if a default command
-    // (build) was used or not from within each plugin.
-    //
-    // E.g.: tailwindcss input.css -> _: ['build', 'input.css']
-    // E.g.: tailwindcss build input.css -> _: ['build', 'input.css']
-    if (result['_'][0] !== command) {
-      result['_'].unshift(command)
-    }
-
-    return result
-  } catch (err) {
-    if (err.code === 'ARG_UNKNOWN_OPTION') {
-      help({
-        message: err.message,
-        usage: ['tailwindcss <command> [options]'],
-        options: sharedFlags,
-      })
-      process.exit(1)
-    }
-    throw err
-  }
-})()
-
-if (args['--help']) {
-  help({
-    options: { ...flags, ...sharedFlags },
-    usage: [`tailwindcss ${command} [options]`],
-  })
-  process.exit(0)
-}
-
-run(args)

package/src/cli/init/index.js

@@ -1,79 +0,0 @@
-// @ts-check
-
-import fs from 'fs'
-import path from 'path'
-
-function isESM() {
-  const pkgPath = path.resolve('./package.json')
-
-  try {
-    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
-    return pkg.type && pkg.type === 'module'
-  } catch (err) {
-    return false
-  }
-}
-
-export function init(args) {
-  let messages = []
-
-  let isProjectESM = args['--ts'] || args['--esm'] || isESM()
-  let syntax = args['--ts'] ? 'ts' : isProjectESM ? 'js' : 'cjs'
-  let extension = args['--ts'] ? 'ts' : 'js'
-
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./tailwind.config.${extension}`)
-
-  if (fs.existsSync(tailwindConfigLocation)) {
-    messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
-  } else {
-    let stubContentsFile = fs.readFileSync(
-      args['--full']
-        ? path.resolve(__dirname, '../../../stubs/config.full.js')
-        : path.resolve(__dirname, '../../../stubs/config.simple.js'),
-      'utf8'
-    )
-
-    let stubFile = fs.readFileSync(
-      path.resolve(__dirname, `../../../stubs/tailwind.config.${syntax}`),
-      'utf8'
-    )
-
-    // Change colors import
-    stubContentsFile = stubContentsFile.replace('../colors', 'tailwindcss/colors')
-
-    // Replace contents of {ts,js,cjs} file with the stub {simple,full}.
-    stubFile =
-      stubFile
-        .replace('__CONFIG__', stubContentsFile.replace('module.exports =', '').trim())
-        .trim() + '\n\n'
-
-    fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
-
-    messages.push(`Created Tailwind CSS config file: ${path.basename(tailwindConfigLocation)}`)
-  }
-
-  if (args['--postcss']) {
-    let postcssConfigLocation = path.resolve('./postcss.config.js')
-    if (fs.existsSync(postcssConfigLocation)) {
-      messages.push(`${path.basename(postcssConfigLocation)} already exists.`)
-    } else {
-      let stubFile = fs.readFileSync(
-        isProjectESM
-          ? path.resolve(__dirname, '../../../stubs/postcss.config.js')
-          : path.resolve(__dirname, '../../../stubs/postcss.config.cjs'),
-        'utf8'
-      )
-
-      fs.writeFileSync(postcssConfigLocation, stubFile, 'utf8')
-
-      messages.push(`Created PostCSS config file: ${path.basename(postcssConfigLocation)}`)
-    }
-  }
-
-  if (messages.length > 0) {
-    console.log()
-    for (let message of messages) {
-      console.log(message)
-    }
-  }
-}

package/src/cli-peer-dependencies.js

@@ -1,15 +0,0 @@
-export function lazyPostcss() {
-  return require('postcss')
-}
-
-export function lazyPostcssImport() {
-  return require('postcss-import')
-}
-
-export function lazyAutoprefixer() {
-  return require('autoprefixer')
-}
-
-export function lazyCssnano() {
-  return require('cssnano')
-}

package/src/cli.js

@@ -1,7 +0,0 @@
-#!/usr/bin/env node
-
-if (__OXIDE__) {
-  module.exports = require('./oxide/cli')
-} else {
-  module.exports = require('./cli/index')
-}

package/src/corePluginList.js

@@ -1 +0,0 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","lineClamp","display","aspectRatio","size","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","captionSide","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","listStyleImage","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","hyphens","whitespace","textWrap","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content","forcedColorAdjust"]