tailwindcss 3.2.4 → 3.2.5

package/src/cli/index.js

@@ -1,3 +1,234 @@
-export * from './build'
-export * from './config'
-export * from './content'
+#!/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',
+      postcss: 'postcss.config.cjs',
+    }
+  : {
+      tailwind: 'tailwind.config.js',
+      postcss: 'postcss.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` },
+      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` 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, configs)

package/src/cli.js

@@ -1,223 +1,7 @@
 #!/usr/bin/env node
 
-import path from 'path'
-import arg from 'arg'
-import fs from 'fs'
-
-import { build } from './cli/build'
-import { help } from './cli/help'
-import { init } from './cli/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',
-      postcss: 'postcss.config.cjs',
-    }
-  : {
-      tailwind: 'tailwind.config.js',
-      postcss: 'postcss.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 }
-  )
+if (process.env.OXIDE) {
+  module.exports = require('./oxide/cli')
+} else {
+  module.exports = require('./cli/index')
 }
-
-let commands = {
-  init: {
-    run: init,
-    args: {
-      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
-      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
-      '-f': '--full',
-      '-p': '--postcss',
-    },
-  },
-  build: {
-    run: build,
-    args: {
-      '--input': { type: String, description: 'Input file' },
-      '--output': { type: String, description: 'Output file' },
-      '--watch': { type: 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 = flag
-      let handler = flags[flag]
-
-      // Resolve flagName & handler
-      while (typeof handler === 'string') {
-        flagName = handler
-        handler = flags[handler]
-      }
-
-      if (!handler) continue
-
-      let args = []
-      let offset = i + 1
-
-      // 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)
-
-      // Set the resolved value in the `result` object
-      result[flagName] = handler.type(
-        args.length === 0 ? undefined : args.length === 1 ? args[0] : args,
-        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/corePlugins.js

@@ -150,9 +150,13 @@ export let variantPlugins = {
 
     let variants = {
       group: (_, { modifier }) =>
-        modifier ? [`:merge(.group\\/${modifier})`, ' &'] : [`:merge(.group)`, ' &'],
+        modifier
+          ? [`:merge(.group\\/${escapeClassName(modifier)})`, ' &']
+          : [`:merge(.group)`, ' &'],
       peer: (_, { modifier }) =>
-        modifier ? [`:merge(.peer\\/${modifier})`, ' ~ &'] : [`:merge(.peer)`, ' ~ &'],
+        modifier
+          ? [`:merge(.peer\\/${escapeClassName(modifier)})`, ' ~ &']
+          : [`:merge(.peer)`, ' ~ &'],
     }
 
     for (let [name, fn] of Object.entries(variants)) {
@@ -163,7 +167,30 @@ export let variantPlugins = {
           if (!result.includes('&')) result = '&' + result
 
           let [a, b] = fn('', extra)
-          return result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+
+          let start = null
+          let end = null
+          let quotes = 0
+
+          for (let i = 0; i < result.length; ++i) {
+            let c = result[i]
+            if (c === '&') {
+              start = i
+            } else if (c === "'" || c === '"') {
+              quotes += 1
+            } else if (start !== null && c === ' ' && !quotes) {
+              end = i
+            }
+          }
+
+          if (start !== null && end === null) {
+            end = result.length
+          }
+
+          // Basically this but can handle quotes:
+          // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+
+          return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
         },
         { values: Object.fromEntries(pseudoVariants) }
       )
@@ -1836,6 +1863,7 @@ export let corePlugins = {
       {
         text: (value) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
+
           let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }

package/src/index.js

@@ -1,47 +1,5 @@
-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.DEBUG &&
-        function (root) {
-          console.timeEnd('JIT TOTAL')
-          console.log('\n')
-          return root
-        },
-    ].filter(Boolean),
-  }
+if (process.env.OXIDE) {
+  module.exports = require('./oxide/postcss-plugin')
+} else {
+  module.exports = require('./plugin')
 }
-
-module.exports.postcss = true

package/src/lib/content.js

@@ -164,50 +164,45 @@ function resolvePathSymlinks(contentPath) {
  * @param {any} context
  * @param {ContentPath[]} candidateFiles
  * @param {Map<string, number>} fileModifiedMap
- * @returns {{ content: string, extension: string }[]}
+ * @returns {[{ content: string, extension: string }[], Map<string, number>]}
  */
 export function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
   let changedContent = context.tailwindConfig.content.files
     .filter((item) => typeof item.raw === 'string')
     .map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
 
-  for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {
-    let content = fs.readFileSync(changedFile, 'utf8')
+  let [changedFiles, mTimesToCommit] = resolveChangedFiles(candidateFiles, fileModifiedMap)
+
+  for (let changedFile of changedFiles) {
     let extension = path.extname(changedFile).slice(1)
-    changedContent.push({ content, extension })
+    changedContent.push({ file: changedFile, extension })
   }
 
-  return changedContent
+  return [changedContent, mTimesToCommit]
 }
 
 /**
  *
  * @param {ContentPath[]} candidateFiles
  * @param {Map<string, number>} fileModifiedMap
- * @returns {Set<string>}
+ * @returns {[Set<string>, Map<string, number>]}
  */
 function resolveChangedFiles(candidateFiles, fileModifiedMap) {
   let paths = candidateFiles.map((contentPath) => contentPath.pattern)
+  let mTimesToCommit = new Map()
 
   let changedFiles = new Set()
   env.DEBUG && console.time('Finding changed files')
   let files = fastGlob.sync(paths, { absolute: true })
   for (let file of files) {
-    let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity
+    let prevModified = fileModifiedMap.get(file) || -Infinity
     let modified = fs.statSync(file).mtimeMs
 
-    // This check is intentionally >= because we track the last modified time of context dependencies
-    // earier in the process and we want to make sure we don't miss any changes that happen
-    // when a context dependency is also a content dependency
-    // Ideally, we'd do all this tracking at one time but that is a larger refactor
-    // than we want to commit to right now, so this is a decent compromise.
-    // This should be sufficient because file modification times will be off by at least
-    // 1ms (the precision of fstat in Node) in most cases if they exist and were changed.
-    if (modified >= prevModified) {
+    if (modified > prevModified) {
       changedFiles.add(file)
-      fileModifiedMap.set(file, modified)
+      mTimesToCommit.set(file, modified)
     }
   }
   env.DEBUG && console.timeEnd('Finding changed files')
-  return changedFiles
+  return [changedFiles, mTimesToCommit]
 }

package/src/lib/defaultExtractor.js

@@ -28,8 +28,14 @@ function* buildRegExps(context) {
       : ''
 
   let utility = regex.any([
-    // Arbitrary properties
-    /\[[^\s:'"`]+:[^\s]+\]/,
+    // Arbitrary properties (without square brackets)
+    /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+
+    // Arbitrary properties with balanced square brackets
+    // This is a targeted fix to continue to allow theme()
+    // with square brackets to work in arbitrary properties
+    // while fixing a problem with the regex matching too much
+    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
 
     // Utilities
     regex.pattern([
@@ -184,7 +190,7 @@ function clipAtBalancedParens(input) {
     // This means that there was an extra closing `]`
     // We'll clip to just before it
     if (depth < 0) {
-      return input.substring(0, match.index)
+      return input.substring(0, match.index - 1)
     }
 
     // We've finished balancing the brackets but there still may be characters that can be included

package/src/lib/detectNesting.js

@@ -1,3 +1,11 @@
+function isRoot(node) {
+  return node.type === 'root'
+}
+
+function isAtLayer(node) {
+  return node.type === 'atrule' && node.name === 'layer'
+}
+
 export default function (_context) {
   return (root, result) => {
     let found = false
@@ -5,7 +13,7 @@ export default function (_context) {
     root.walkAtRules('tailwind', (node) => {
       if (found) return false
 
-      if (node.parent && node.parent.type !== 'root') {
+      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
         found = true
         node.warn(
           result,