tailwindcss 0.0.0-insiders.ea10bb9 → 0.0.0-insiders.ea4e1cd

package/src/lib/remap-bitfield.js

@@ -0,0 +1,82 @@
+// @ts-check
+
+/**
+ * We must remap all the old bits to new bits for each set variant
+ * Only arbitrary variants are considered as those are the only
+ * ones that need to be re-sorted at this time
+ *
+ * An iterated process that removes and sets individual bits simultaneously
+ * will not work because we may have a new bit that is also a later old bit
+ * This means that we would be removing a previously set bit which we don't
+ * want to do
+ *
+ * For example (assume `bN` = `1<<N`)
+ * Given the "total" mapping `[[b1, b3], [b2, b4], [b3, b1], [b4, b2]]`
+ * The mapping is "total" because:
+ * 1. Every input and output is accounted for
+ * 2. All combinations are unique
+ * 3. No one input maps to multiple outputs and vice versa
+ * And, given an offset with all bits set:
+ * V = b1 | b2 | b3 | b4
+ *
+ * Let's explore the issue with removing and setting bits simultaneously:
+ * V & ~b1 | b3 = b2 | b3 | b4
+ * V & ~b2 | b4 = b3 | b4
+ * V & ~b3 | b1 = b1 | b4
+ * V & ~b4 | b2 = b1 | b2
+ *
+ * As you can see, we end up with the wrong result.
+ * This is because we're removing a bit that was previously set.
+ * And, thus the final result is missing b3 and b4.
+ *
+ * Now, let's explore the issue with removing the bits first:
+ * V & ~b1 = b2 | b3 | b4
+ * V & ~b2 = b3 | b4
+ * V & ~b3 = b4
+ * V & ~b4 = 0
+ *
+ * And then setting the bits:
+ * V | b3 = b3
+ * V | b4 = b3 | b4
+ * V | b1 = b1 | b3 | b4
+ * V | b2 = b1 | b2 | b3 | b4
+ *
+ * We get the correct result because we're not removing any bits that were
+ * previously set thus properly remapping the bits to the new order
+ *
+ * To collect this into a single operation that can be done simultaneously
+ * we must first create a mask for the old bits that are set and a mask for
+ * the new bits that are set. Then we can remove the old bits and set the new
+ * bits simultaneously in a "single" operation like so:
+ * OldMask = b1 | b2 | b3 | b4
+ * NewMask = b3 | b4 | b1 | b2
+ *
+ * So this:
+ * V & ~oldMask | newMask
+ *
+ * Expands to this:
+ * V & ~b1 & ~b2 & ~b3 & ~b4 | b3 | b4 | b1 | b2
+ *
+ * Which becomes this:
+ * b1 | b2 | b3 | b4
+ *
+ * Which is the correct result!
+ *
+ * @param {bigint} num
+ * @param {[bigint, bigint][]} mapping
+ */
+export function remapBitfield(num, mapping) {
+  // Create masks for the old and new bits that are set
+  let oldMask = 0n
+  let newMask = 0n
+  for (let [oldBit, newBit] of mapping) {
+    if (num & oldBit) {
+      oldMask = oldMask | oldBit
+      newMask = newMask | newBit
+    }
+  }
+
+  // Remove all old bits
+  // Set all new bits
+  return (num & ~oldMask) | newMask
+}

package/src/lib/setupContextUtils.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)
@@ -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) {
@@ -919,12 +931,19 @@ function registerPlugins(plugins, context) {
     prefix(context, 'peer'),
   ]
   context.getClassOrder = function getClassOrder(classes) {
+    // Sort classes so they're ordered in a deterministic manner
+    let sorted = [...classes].sort((a, z) => {
+      if (a === z) return 0
+      if (a < z) return -1
+      return 1
+    })
+
     // Non-util classes won't be generated, so we default them to null
-    let sortedClassNames = new Map(classes.map((className) => [className, null]))
+    let sortedClassNames = new Map(sorted.map((className) => [className, null]))
 
     // Sort all classes in order
     // Non-tailwind classes won't be generated and will be left as `null`
-    let rules = generateRules(new Set(classes), context)
+    let rules = generateRules(new Set(sorted), context)
     rules = context.offsets.sort(rules)
 
     let idx = BigInt(parasiteUtilities.length)
@@ -950,23 +969,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 +1118,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
@@ -1219,12 +1268,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]
     }
   }
 
@@ -1259,7 +1308,7 @@ export function getContext(
     userConfigPath,
   })
 
-  trackModified([...contextDependencies], getFileModifiedMap(context))
+  let [, mtimesToCommit] = trackModified([...contextDependencies], getFileModifiedMap(context))
 
   // ---
 
@@ -1274,5 +1323,5 @@ export function getContext(
 
   contextSourcesMap.get(context).add(sourcePath)
 
-  return [context, true]
+  return [context, true, mtimesToCommit]
 }

package/src/lib/setupTrackingContext.js

@@ -1,14 +1,17 @@
+// @ts-check
+
 import fs from 'fs'
-import LRU from 'quick-lru'
+import LRU from '@alloc/quick-lru'
 
 import hash from '../util/hashConfig'
-import getModuleDependencies from '../lib/getModuleDependencies'
 import resolveConfig from '../public/resolve-config'
 import resolveConfigPath from '../util/resolveConfigPath'
 import { getContext, getFileModifiedMap } from './setupContextUtils'
 import parseDependency from '../util/parseDependency'
 import { validateConfig } from '../util/validateConfig.js'
 import { parseCandidateFiles, resolvedChangedContent } from './content.js'
+import { loadConfig } from '../lib/load-config'
+import getModuleDependencies from './getModuleDependencies'
 
 let configPathCache = new LRU({ maxSize: 100 })
 
@@ -32,7 +35,7 @@ function getTailwindConfig(configOrPath) {
     let [prevConfig, prevConfigHash, prevDeps, prevModified] =
       configPathCache.get(userConfigPath) || []
 
-    let newDeps = getModuleDependencies(userConfigPath).map((dep) => dep.file)
+    let newDeps = getModuleDependencies(userConfigPath)
 
     let modified = false
     let newModified = new Map()
@@ -53,8 +56,7 @@ function getTailwindConfig(configOrPath) {
     for (let file of newDeps) {
       delete require.cache[file]
     }
-    let newConfig = resolveConfig(require(userConfigPath))
-    newConfig = validateConfig(newConfig)
+    let newConfig = validateConfig(resolveConfig(loadConfig(userConfigPath)))
     let newHash = hash(newConfig)
     configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified])
     return [newConfig, userConfigPath, newHash, newDeps]
@@ -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,7 +1,18 @@
-export const env = {
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: resolveDebug(process.env.DEBUG),
-}
+import pkg from '../../package.json'
+
+export const env =
+  typeof process !== 'undefined'
+    ? {
+        NODE_ENV: process.env.NODE_ENV,
+        DEBUG: resolveDebug(process.env.DEBUG),
+        ENGINE: pkg.tailwindcss.engine,
+      }
+    : {
+        NODE_ENV: 'production',
+        DEBUG: false,
+        ENGINE: pkg.tailwindcss.engine,
+      }
+
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()

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 { resolveDefaultConfigPath } from '../../../util/resolveConfigPath'
+import { createProcessor } from './plugin'
+
+export async function build(args) {
+  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'] : resolveDefaultConfigPath()
+
+  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().catch((e) => {
+      console.error(e)
+      process.exit(1)
+    })
+  }
+}