tailwindcss 3.2.3 → 3.2.5

package/src/cli/build/plugin.js

@@ -10,7 +10,7 @@ import loadOptions from 'postcss-load-config/src/options' // Little bit scary, l
 import tailwind from '../../processTailwindFeatures'
 import { loadAutoprefixer, loadCssNano, loadPostcss, loadPostcssImport } from './deps'
 import { formatNodes, drainStdin, outputFile } from './utils'
-import { env } from '../shared'
+import { env } from '../../lib/sharedState'
 import resolveConfig from '../../../resolveConfig.js'
 import getModuleDependencies from '../../lib/getModuleDependencies.js'
 import { parseCandidateFiles } from '../../lib/content.js'
@@ -184,10 +184,17 @@ let state = {
     let files = fastGlob.sync(this.contentPatterns.all)
 
     for (let file of files) {
-      content.push({
-        content: fs.readFileSync(path.resolve(file), 'utf8'),
-        extension: path.extname(file).slice(1),
-      })
+      if (env.OXIDE) {
+        content.push({
+          file,
+          extension: path.extname(file).slice(1),
+        })
+      } else {
+        content.push({
+          content: fs.readFileSync(path.resolve(file), 'utf8'),
+          extension: path.extname(file).slice(1),
+        })
+      }
     }
 
     // Resolve raw content in the tailwind config
@@ -234,11 +241,9 @@ let state = {
       env.DEBUG && console.timeEnd('Watch new files')
     }
 
-    env.DEBUG && console.time('Reading content files')
     for (let file of this.readContentPaths()) {
       this.context.changedContent.push(file)
     }
-    env.DEBUG && console.timeEnd('Reading content files')
 
     return this.context
   },
@@ -355,8 +360,8 @@ export async function createProcessor(args, cliConfigPath) {
         }
 
         return Promise.all([
-          outputFile(output, result.css),
-          result.map && outputFile(output + '.map', result.map.toString()),
+          outputFile(result.opts.to, result.css),
+          result.map && outputFile(result.opts.to + '.map', result.map.toString()),
         ])
       })
       .then(() => {
@@ -364,6 +369,23 @@ export async function createProcessor(args, cliConfigPath) {
         console.error()
         console.error('Done in', (end - start) / BigInt(1e6) + 'ms.')
       })
+      .then(
+        () => {},
+        (err) => {
+          // TODO: If an initial build fails we can't easily pick up any PostCSS dependencies
+          // that were collected before the error occurred
+          // The result is not stored on the error so we have to store it externally
+          // and pull the messages off of it here somehow
+
+          // This results in a less than ideal DX because the watcher will not pick up
+          // changes to imported CSS if one of them caused an error during the initial build
+          // If you fix it and then save the main CSS file so there's no error
+          // The watcher will start watching the imported CSS files and will be
+          // resilient to future errors.
+
+          console.error(err)
+        }
+      )
   }
 
   /**

package/src/cli/build/watching.js

@@ -97,14 +97,15 @@ export function createWatcher(args, { state, rebuild }) {
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
+   * @param {boolean} skipPendingCheck
    * @returns {Promise<void>}
    */
-  function recordChangedFile(file, content = null) {
+  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)) {
+    if (pendingRebuilds.has(file) && !skipPendingCheck) {
       return Promise.resolve()
     }
 
@@ -198,8 +199,10 @@ export function createWatcher(args, { state, rebuild }) {
         }
 
         // 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)
+        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

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