tailwindcss 3.2.3 → 3.2.5

package/src/lib/setupContextUtils.js

@@ -17,7 +17,7 @@ import { env } from './sharedState'
 import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
-import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import isSyntacticallyValidPropertyValue from '../util/isSyntacticallyValidPropertyValue'
 import { generateRules, getClassNameFromSelector } from './generateRules'
 import { hasContentChanged } from './cacheInvalidation.js'
 import { Offsets } from './offsets.js'
@@ -54,32 +54,50 @@ function normalizeOptionTypes({ type = 'any', ...options }) {
 }
 
 function parseVariantFormatString(input) {
-  if (input.includes('{')) {
-    if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
-
-    return input
-      .split(/{(.*)}/gim)
-      .flatMap((line) => parseVariantFormatString(line))
-      .filter(Boolean)
-  }
-
-  return [input.trim()]
-}
-
-function isBalanced(input) {
-  let count = 0
-
-  for (let char of input) {
-    if (char === '{') {
-      count++
+  /** @type {string[]} */
+  let parts = []
+
+  // When parsing whitespace around special characters are insignificant
+  // However, _inside_ of a variant they could be
+  // Because the selector could look like this
+  // @media { &[data-name="foo bar"] }
+  // This is why we do not skip whitespace
+
+  let current = ''
+  let depth = 0
+
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
+
+    if (char === '\\') {
+      // Escaped characters are not special
+      current += '\\' + input[++idx]
+    } else if (char === '{') {
+      // Nested rule: start
+      ++depth
+      parts.push(current.trim())
+      current = ''
     } else if (char === '}') {
-      if (--count < 0) {
-        return false // unbalanced
+      // Nested rule: end
+      if (--depth < 0) {
+        throw new Error(`Your { and } are unbalanced.`)
       }
+
+      parts.push(current.trim())
+      current = ''
+    } else {
+      // Normal character
+      current += char
     }
   }
 
-  return count === 0
+  if (current.length > 0) {
+    parts.push(current.trim())
+  }
+
+  parts = parts.filter((part) => part !== '')
+
+  return parts
 }
 
 function insertInto(list, value, { before = [] } = {}) {
@@ -253,25 +271,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
   }
 
   function resolveThemeValue(path, defaultValue, opts = {}) {
-    const [pathRoot, ...subPaths] = toPath(path)
-    const value = getConfigValue(['theme', pathRoot, ...subPaths], defaultValue)
-    return transformThemeValue(pathRoot)(value, opts)
+    let parts = toPath(path)
+    let value = getConfigValue(['theme', ...parts], defaultValue)
+    return transformThemeValue(parts[0])(value, opts)
   }
 
-  const theme = Object.assign(
-    (path, defaultValue = undefined) => resolveThemeValue(path, defaultValue),
-    {
-      withAlpha: (path, opacityValue) => resolveThemeValue(path, undefined, { opacityValue }),
-    }
-  )
-
   let variantIdentifier = 0
   let api = {
     postcss,
     prefix: applyConfiguredPrefix,
     e: escapeClassName,
     config: getConfigValue,
-    theme,
+    theme: resolveThemeValue,
     corePlugins: (path) => {
       if (Array.isArray(tailwindConfig.corePlugins)) {
         return tailwindConfig.corePlugins.includes(path)
@@ -407,7 +418,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             }
           }
 
-          if (!isValidArbitraryValue(value)) {
+          if (!isSyntacticallyValidPropertyValue(value)) {
             return []
           }
 
@@ -487,7 +498,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             }
           }
 
-          if (!isValidArbitraryValue(value)) {
+          if (!isSyntacticallyValidPropertyValue(value)) {
             return []
           }
 
@@ -639,6 +650,7 @@ export function getFileModifiedMap(context) {
 
 function trackModified(files, fileModifiedMap) {
   let changed = false
+  let mtimesToCommit = new Map()
 
   for (let file of files) {
     if (!file) continue
@@ -659,10 +671,10 @@ function trackModified(files, fileModifiedMap) {
       changed = true
     }
 
-    fileModifiedMap.set(file, newModified)
+    mtimesToCommit.set(file, newModified)
   }
 
-  return changed
+  return [changed, mtimesToCommit]
 }
 
 function extractVariantAtRules(node) {
@@ -950,23 +962,35 @@ function registerPlugins(plugins, context) {
 
   // Generate a list of strings for autocompletion purposes, e.g.
   // ['uppercase', 'lowercase', ...]
-  context.getClassList = function getClassList() {
+  context.getClassList = function getClassList(options = {}) {
     let output = []
 
     for (let util of classList) {
       if (Array.isArray(util)) {
-        let [utilName, options] = util
+        let [utilName, utilOptions] = util
         let negativeClasses = []
 
-        for (let [key, value] of Object.entries(options?.values ?? {})) {
+        let modifiers = Object.keys(utilOptions?.modifiers ?? {})
+
+        if (utilOptions?.types?.some(({ type }) => type === 'color')) {
+          modifiers.push(...Object.keys(context.tailwindConfig.theme.opacity ?? {}))
+        }
+
+        let metadata = { modifiers }
+        let includeMetadata = options.includeMetadata && modifiers.length > 0
+
+        for (let [key, value] of Object.entries(utilOptions?.values ?? {})) {
           // Ignore undefined and null values
           if (value == null) {
             continue
           }
 
-          output.push(formatClass(utilName, key))
-          if (options?.supportsNegativeValues && negateValue(value)) {
-            negativeClasses.push(formatClass(utilName, `-${key}`))
+          let cls = formatClass(utilName, key)
+          output.push(includeMetadata ? [cls, metadata] : cls)
+
+          if (utilOptions?.supportsNegativeValues && negateValue(value)) {
+            let cls = formatClass(utilName, `-${key}`)
+            negativeClasses.push(includeMetadata ? [cls, metadata] : cls)
           }
         }
 
@@ -1087,20 +1111,38 @@ function registerPlugins(plugins, context) {
             })
           }
 
-          let result = formatStrings.map((formatString) =>
-            finalizeSelector(formatVariantSelector('&', ...formatString), {
-              selector: `.${candidate}`,
-              candidate,
-              context,
-              isArbitraryVariant: !(value in (options.values ?? {})),
-            })
+          let isArbitraryVariant = !(value in (options.values ?? {}))
+
+          formatStrings = formatStrings.map((format) =>
+            format.map((str) => ({
+              format: str,
+              isArbitraryVariant,
+            }))
+          )
+
+          manualFormatStrings = manualFormatStrings.map((format) => ({
+            format,
+            isArbitraryVariant,
+          }))
+
+          let opts = {
+            candidate,
+            context,
+          }
+
+          let result = formatStrings.map((formats) =>
+            finalizeSelector(`.${candidate}`, formatVariantSelector(formats, opts), opts)
               .replace(`.${candidate}`, '&')
               .replace('{ & }', '')
               .trim()
           )
 
           if (manualFormatStrings.length > 0) {
-            result.push(formatVariantSelector('&', ...manualFormatStrings))
+            result.push(
+              formatVariantSelector(manualFormatStrings, opts)
+                .toString()
+                .replace(`.${candidate}`, '&')
+            )
           }
 
           return result
@@ -1165,7 +1207,8 @@ export function createContext(tailwindConfig, changedContent = [], root = postcs
     candidateRuleCache: new Map(),
     classCache: new Map(),
     applyClassCache: new Map(),
-    notClassCache: new Set(),
+    // Seed the not class cache with the blocklist (which is only strings)
+    notClassCache: new Set(tailwindConfig.blocklist ?? []),
     postCssNodeCache: new Map(),
     candidateRuleMap: new Map(),
     tailwindConfig,
@@ -1218,12 +1261,12 @@ export function getContext(
   // If there's already a context in the cache and we don't need to
   // reset the context, return the cached context.
   if (existingContext) {
-    let contextDependenciesChanged = trackModified(
+    let [contextDependenciesChanged, mtimesToCommit] = trackModified(
       [...contextDependencies],
       getFileModifiedMap(existingContext)
     )
     if (!contextDependenciesChanged && !cssDidChange) {
-      return [existingContext, false]
+      return [existingContext, false, mtimesToCommit]
     }
   }
 
@@ -1258,7 +1301,7 @@ export function getContext(
     userConfigPath,
   })
 
-  trackModified([...contextDependencies], getFileModifiedMap(context))
+  let [, mtimesToCommit] = trackModified([...contextDependencies], getFileModifiedMap(context))
 
   // ---
 
@@ -1273,5 +1316,5 @@ export function getContext(
 
   contextSourcesMap.get(context).add(sourcePath)
 
-  return [context, true]
+  return [context, true, mtimesToCommit]
 }

package/src/lib/setupTrackingContext.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import fs from 'fs'
 import LRU from 'quick-lru'
 
@@ -101,7 +103,7 @@ export default function setupTrackingContext(configOrPath) {
         }
       }
 
-      let [context] = getContext(
+      let [context, , mTimesToCommit] = getContext(
         root,
         result,
         tailwindConfig,
@@ -110,6 +112,8 @@ export default function setupTrackingContext(configOrPath) {
         contextDependencies
       )
 
+      let fileModifiedMap = getFileModifiedMap(context)
+
       let candidateFiles = getCandidateFiles(context, tailwindConfig)
 
       // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
@@ -118,8 +122,6 @@ export default function setupTrackingContext(configOrPath) {
       // because it's impossible for a layer in one file to end up in the actual @tailwind rule
       // in another file since independent sources are effectively isolated.
       if (tailwindDirectives.size > 0) {
-        let fileModifiedMap = getFileModifiedMap(context)
-
         // Add template paths as postcss dependencies.
         for (let contentPath of candidateFiles) {
           for (let dependency of parseDependency(contentPath)) {
@@ -127,12 +129,28 @@ export default function setupTrackingContext(configOrPath) {
           }
         }
 
-        for (let changedContent of resolvedChangedContent(
+        let [changedContent, contentMTimesToCommit] = resolvedChangedContent(
           context,
           candidateFiles,
           fileModifiedMap
-        )) {
-          context.changedContent.push(changedContent)
+        )
+
+        for (let content of changedContent) {
+          context.changedContent.push(content)
+        }
+
+        // Add the mtimes of the content files to the commit list
+        // We can overwrite the existing values because unconditionally
+        // This is because:
+        // 1. Most of the files here won't be in the map yet
+        // 2. If they are that means it's a context dependency
+        // and we're reading this after the context. This means
+        // that the mtime we just read is strictly >= the context
+        // mtime. Unless the user / os is doing something weird
+        // in which the mtime would be going backwards. If that
+        // happens there's already going to be problems.
+        for (let [path, mtime] of contentMTimesToCommit.entries()) {
+          mTimesToCommit.set(path, mtime)
         }
       }
 
@@ -140,6 +158,13 @@ export default function setupTrackingContext(configOrPath) {
         registerDependency({ type: 'dependency', file })
       }
 
+      // "commit" the new modified time for all context deps
+      // We do this here because we want content tracking to
+      // read the "old" mtime even when it's a context dependency.
+      for (let [path, mtime] of mTimesToCommit.entries()) {
+        fileModifiedMap.set(path, mtime)
+      }
+
       return context
     }
   }

package/src/lib/sharedState.js

@@ -1,6 +1,11 @@
+import pkg from '../../package.json'
+let OXIDE_DEFAULT_ENABLED = pkg.tailwindcss.engine === 'oxide'
+
 export const env = {
   NODE_ENV: process.env.NODE_ENV,
   DEBUG: resolveDebug(process.env.DEBUG),
+  ENGINE: pkg.tailwindcss.engine,
+  OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
 }
 export const contextMap = new Map()
 export const configContextMap = new Map()
@@ -10,6 +15,18 @@ export const NOT_ON_DEMAND = new String('*')
 
 export const NONE = Symbol('__NONE__')
 
+function resolveBoolean(value, defaultValue) {
+  if (value === undefined) {
+    return defaultValue
+  }
+
+  if (value === '0' || value === 'false') {
+    return false
+  }
+
+  return true
+}
+
 export function resolveDebug(debug) {
   if (debug === undefined) {
     return false

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

@@ -0,0 +1,91 @@
+import packageJson from '../../../../package.json'
+import browserslist from 'browserslist'
+import { Result } from 'postcss'
+
+import {
+  // @ts-ignore
+  lazyPostcss,
+
+  // @ts-ignore
+  lazyPostcssImport,
+
+  // @ts-ignore
+  lazyCssnano,
+
+  // @ts-ignore
+} from '../../../../peers/index'
+
+export function lazyLightningCss() {
+  // TODO: Make this lazy/bundled
+  return require('lightningcss')
+}
+
+let lightningCss
+
+function loadLightningCss() {
+  if (lightningCss) {
+    return lightningCss
+  }
+
+  // Try to load a local version first
+  try {
+    return (lightningCss = require('lightningcss'))
+  } catch {}
+
+  return (lightningCss = lazyLightningCss())
+}
+
+export async function lightningcss(shouldMinify: boolean, result: Result) {
+  let css = loadLightningCss()
+
+  try {
+    let transformed = css.transform({
+      filename: result.opts.from || 'input.css',
+      code: Buffer.from(result.css, 'utf-8'),
+      minify: shouldMinify,
+      sourceMap: !!result.map,
+      inputSourceMap: result.map ? result.map.toString() : undefined,
+      targets: css.browserslistToTargets(browserslist(packageJson.browserslist)),
+      drafts: {
+        nesting: true,
+      },
+    })
+
+    return Object.assign(result, {
+      css: transformed.code.toString('utf8'),
+      map: result.map
+        ? Object.assign(result.map, {
+            toString() {
+              return transformed.map.toString()
+            },
+          })
+        : result.map,
+    })
+  } catch (err) {
+    console.error('Unable to use Lightning CSS. Using raw version instead.')
+    console.error(err)
+
+    return result
+  }
+}
+
+/**
+ * @returns {import('postcss')}
+ */
+export function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
+export function loadPostcssImport() {
+  // Try to load a local `postcss-import` version first
+  try {
+    return require('postcss-import')
+  } catch {}
+
+  return lazyPostcssImport()
+}

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

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import path from 'path'
+import { createProcessor } from './plugin'
+
+export async function build(args, configs) {
+  let input = args['--input']
+  let shouldWatch = args['--watch']
+
+  // TODO: Deprecate this in future versions
+  if (!input && args['_'][1]) {
+    console.error('[deprecation] Running tailwindcss without -i, please provide an input file.')
+    input = args['--input'] = args['_'][1]
+  }
+
+  if (input && input !== '-' && !fs.existsSync((input = path.resolve(input)))) {
+    console.error(`Specified input file ${args['--input']} does not exist.`)
+    process.exit(9)
+  }
+
+  if (args['--config'] && !fs.existsSync((args['--config'] = path.resolve(args['--config'])))) {
+    console.error(`Specified config file ${args['--config']} does not exist.`)
+    process.exit(9)
+  }
+
+  // TODO: Reference the @config path here if exists
+  let configPath = args['--config']
+    ? args['--config']
+    : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
+        path.resolve(`./${configs.tailwind}`)
+      )
+
+  let processor = await createProcessor(args, configPath)
+
+  if (shouldWatch) {
+    // Abort the watcher if stdin is closed to avoid zombie processes
+    // You can disable this behavior with --watch=always
+    if (args['--watch'] !== 'always') {
+      process.stdin.on('end', () => process.exit(0))
+    }
+
+    process.stdin.resume()
+
+    await processor.watch()
+  } else {
+    await processor.build()
+  }
+}