tailwindcss 3.2.3 → 3.2.5

package/src/oxide/cli/build/watching.ts

@@ -0,0 +1,225 @@
+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'
+
+/**
+ * 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(
+      () => {},
+      () => {}
+    )
+  }
+
+  /**
+   *
+   * @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') {
+      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.configDependencies))
+      watcher.add(state.contentPatterns.all)
+    },
+  }
+}

package/src/oxide/cli/help/index.ts

@@ -0,0 +1,69 @@
+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/oxide/cli/index.ts

@@ -0,0 +1,212 @@
+#!/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 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
+  }
+}
+
+let configs = isESM() ? { tailwind: 'tailwind.config.cjs' } : { tailwind: 'tailwind.config.js' }
+
+// ---
+
+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: {
+      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '-f': '--full',
+    },
+  },
+  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',
+      },
+      '--minify': { type: Boolean, description: 'Minify the output' },
+      '--config': {
+        type: String,
+        description: 'Path to a custom config file',
+      },
+      '-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] [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, configs)

package/src/oxide/cli/init/index.ts

@@ -0,0 +1,32 @@
+import fs from 'fs'
+import path from 'path'
+
+export function init(args, configs) {
+  let messages = []
+
+  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./${configs.tailwind}`)
+  if (fs.existsSync(tailwindConfigLocation)) {
+    messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
+  } else {
+    let stubFile = fs.readFileSync(
+      args['--full']
+        ? path.resolve(__dirname, '../../../../stubs/defaultConfig.stub.js')
+        : path.resolve(__dirname, '../../../../stubs/simpleConfig.stub.js'),
+      'utf8'
+    )
+
+    // Change colors import
+    stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
+
+    fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
+
+    messages.push(`Created Tailwind CSS config file: ${path.basename(tailwindConfigLocation)}`)
+  }
+
+  if (messages.length > 0) {
+    console.log()
+    for (let message of messages) {
+      console.log(message)
+    }
+  }
+}

package/src/oxide/cli.ts

@@ -0,0 +1 @@
+import './cli/index'

package/src/oxide/postcss-plugin.ts

@@ -0,0 +1 @@
+module.exports = require('../plugin.js')

package/src/plugin.js

@@ -0,0 +1,107 @@
+import setupTrackingContext from './lib/setupTrackingContext'
+import processTailwindFeatures from './processTailwindFeatures'
+import { env } from './lib/sharedState'
+import { findAtConfigPath } from './lib/findAtConfigPath'
+
+module.exports = function tailwindcss(configOrPath) {
+  return {
+    postcssPlugin: 'tailwindcss',
+    plugins: [
+      env.DEBUG &&
+        function (root) {
+          console.log('\n')
+          console.time('JIT TOTAL')
+          return root
+        },
+      function (root, result) {
+        // Use the path for the `@config` directive if it exists, otherwise use the
+        // path for the file being processed
+        configOrPath = findAtConfigPath(root, result) ?? configOrPath
+
+        let context = setupTrackingContext(configOrPath)
+
+        if (root.type === 'document') {
+          let roots = root.nodes.filter((node) => node.type === 'root')
+
+          for (const root of roots) {
+            if (root.type === 'root') {
+              processTailwindFeatures(context)(root, result)
+            }
+          }
+
+          return
+        }
+
+        processTailwindFeatures(context)(root, result)
+      },
+      env.OXIDE &&
+        function lightningCssPlugin(_root, result) {
+          let postcss = require('postcss')
+          let lightningcss = require('lightningcss')
+          let browserslist = require('browserslist')
+
+          try {
+            let transformed = lightningcss.transform({
+              filename: result.opts.from,
+              code: Buffer.from(result.root.toString()),
+              minify: false,
+              sourceMap: !!result.map,
+              inputSourceMap: result.map ? result.map.toString() : undefined,
+              targets:
+                typeof process !== 'undefined' && process.env.JEST_WORKER_ID
+                  ? { chrome: 106 << 16 }
+                  : lightningcss.browserslistToTargets(
+                      browserslist(require('../package.json').browserslist)
+                    ),
+
+              drafts: {
+                nesting: true,
+                customMedia: true,
+              },
+            })
+
+            result.map = Object.assign(result.map ?? {}, {
+              toJSON() {
+                return transformed.map.toJSON()
+              },
+              toString() {
+                return transformed.map.toString()
+              },
+            })
+
+            result.root = postcss.parse(transformed.code.toString('utf8'))
+          } catch (err) {
+            if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) {
+              let lines = err.source.split('\n')
+              err = new Error(
+                [
+                  'Error formatting using Lightning CSS:',
+                  '',
+                  ...[
+                    '```css',
+                    ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
+                    ' '.repeat(err.loc.column - 1) + '^-- ' + err.toString(),
+                    ...lines.slice(err.loc.line, err.loc.line + 2),
+                    '```',
+                  ],
+                ].join('\n')
+              )
+            }
+
+            if (Error.captureStackTrace) {
+              Error.captureStackTrace(err, lightningCssPlugin)
+            }
+            throw err
+          }
+        },
+      env.DEBUG &&
+        function (root) {
+          console.timeEnd('JIT TOTAL')
+          console.log('\n')
+          return root
+        },
+    ].filter(Boolean),
+  }
+}
+
+module.exports.postcss = true

package/src/util/color.js

@@ -8,10 +8,10 @@ let ALPHA_SEP = /\s*[,/]\s*/
 let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
 
 let RGB = new RegExp(
-  `^(rgb)a?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
+  `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 let HSL = new RegExp(
-  `^(hsl)a?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
+  `^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
 // In "loose" mode the color may contain fewer than 3 parts, as long as at least
@@ -52,6 +52,16 @@ export function parseColor(value, { loose = false } = {}) {
 
   let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
 
+  // rgba(var(--my-color), 0.1)
+  // hsla(var(--my-color), 0.1)
+  if (color.length === 2 && color[0].startsWith('var(')) {
+    return {
+      mode: match[1],
+      color: [color[0]],
+      alpha: color[1],
+    }
+  }
+
   if (!loose && color.length !== 3) {
     return null
   }
@@ -69,5 +79,10 @@ export function parseColor(value, { loose = false } = {}) {
 
 export function formatColor({ mode, color, alpha }) {
   let hasAlpha = alpha !== undefined
+
+  if (mode === 'rgba' || mode === 'hsla') {
+    return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
+  }
+
   return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
 }