tailwindcss 3.2.7 → 3.3.1

package/src/lib/load-config.ts

@@ -0,0 +1,31 @@
+import jitiFactory from 'jiti'
+import { transform } from 'sucrase'
+
+import { Config } from '../../types/config'
+
+let jiti: ReturnType<typeof jitiFactory> | null = null
+function lazyJiti() {
+  return (
+    jiti ??
+    (jiti = jitiFactory(__filename, {
+      interopDefault: true,
+      transform: (opts) => {
+        return transform(opts.source, {
+          transforms: ['typescript', 'imports'],
+        })
+      },
+    }))
+  )
+}
+
+export function loadConfig(path: string): Config {
+  let config = (function () {
+    try {
+      return path ? require(path) : {}
+    } catch {
+      return lazyJiti()(path)
+    }
+  })()
+
+  return config.default ?? config
+}

package/src/lib/setupContextUtils.js

@@ -931,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)

package/src/lib/setupTrackingContext.js

@@ -4,13 +4,14 @@ import fs from 'fs'
 import LRU from '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 })
 
@@ -34,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()
@@ -55,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]

package/src/lib/sharedState.js

@@ -1,12 +1,21 @@
 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 env =
+  typeof process !== 'undefined'
+    ? {
+        NODE_ENV: process.env.NODE_ENV,
+        DEBUG: resolveDebug(process.env.DEBUG),
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
+      }
+    : {
+        NODE_ENV: 'production',
+        DEBUG: false,
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: OXIDE_DEFAULT_ENABLED,
+      }
+
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()

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

@@ -1,8 +1,9 @@
 import fs from 'fs'
 import path from 'path'
+import { resolveDefaultConfigPath } from '../../../util/resolveConfigPath'
 import { createProcessor } from './plugin'
 
-export async function build(args, configs) {
+export async function build(args) {
   let input = args['--input']
   let shouldWatch = args['--watch']
 
@@ -23,11 +24,7 @@ export async function build(args, configs) {
   }
 
   // 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 configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 
   let processor = await createProcessor(args, configPath)
 
@@ -42,6 +39,9 @@ export async function build(args, configs) {
 
     await processor.watch()
   } else {
-    await processor.build()
+    await processor.build().catch((e) => {
+      console.error(e)
+      process.exit(1)
+    })
   }
 }

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

@@ -10,12 +10,14 @@ import { loadPostcss, loadPostcssImport, lightningcss } from './deps'
 import { formatNodes, drainStdin, outputFile } from './utils'
 import { env } from '../../../lib/sharedState'
 import resolveConfig from '../../../../resolveConfig'
-import getModuleDependencies from '../../../lib/getModuleDependencies'
 import { parseCandidateFiles } from '../../../lib/content'
 import { createWatcher } from './watching'
 import fastGlob from 'fast-glob'
 import { findAtConfigPath } from '../../../lib/findAtConfigPath'
 import log from '../../../util/log'
+import { loadConfig } from '../../../lib/load-config'
+import getModuleDependencies from '../../../lib/getModuleDependencies'
+import type { Config } from '../../../../types'
 
 /**
  *
@@ -115,7 +117,9 @@ let state = {
   /** @type {{content: string, extension: string}[]} */
   changedContent: [],
 
-  configDependencies: new Set(),
+  /** @type {{config: Config, dependencies: Set<string>, dispose: Function } | null} */
+  configBag: null,
+
   contextDependencies: new Set(),
 
   /** @type {import('../../lib/content.js').ContentPath[]} */
@@ -140,37 +144,35 @@ let state = {
 
   loadConfig(configPath, content) {
     if (this.watcher && configPath) {
-      this.refreshConfigDependencies(configPath)
+      this.refreshConfigDependencies()
     }
 
-    let config = configPath ? require(configPath) : {}
+    let config = loadConfig(configPath)
+    let dependencies = getModuleDependencies(configPath)
+    this.configBag = {
+      config,
+      dependencies,
+      dispose() {
+        for (let file of dependencies) {
+          delete require.cache[require.resolve(file)]
+        }
+      },
+    }
 
     // @ts-ignore
-    config = resolveConfig(config, { content: { files: [] } })
+    this.configBag.config = resolveConfig(this.configBag.config, { content: { files: [] } })
 
     // Override content files if `--content` has been passed explicitly
     if (content?.length > 0) {
-      config.content.files = content
+      this.configBag.config.content.files = content
     }
 
-    return config
+    return this.configBag.config
   },
 
   refreshConfigDependencies(configPath) {
     env.DEBUG && console.time('Module dependencies')
-
-    for (let file of this.configDependencies) {
-      delete require.cache[require.resolve(file)]
-    }
-
-    if (configPath) {
-      let deps = getModuleDependencies(configPath).map(({ file }) => file)
-
-      for (let dependency of deps) {
-        this.configDependencies.add(dependency)
-      }
-    }
-
+    this.configBag?.dispose()
     env.DEBUG && console.timeEnd('Module dependencies')
   },
 
@@ -380,7 +382,11 @@ export async function createProcessor(args, cliConfigPath) {
           // The watcher will start watching the imported CSS files and will be
           // resilient to future errors.
 
-          console.error(err)
+          if (state.watcher) {
+            console.error(err)
+          } else {
+            return Promise.reject(err)
+          }
         }
       )
   }
@@ -413,7 +419,7 @@ export async function createProcessor(args, cliConfigPath) {
         async rebuild(changes) {
           let needsNewContext = changes.some((change) => {
             return (
-              state.configDependencies.has(change.file) ||
+              state.configBag?.dependencies.has(change.file) ||
               state.contextDependencies.has(change.file)
             )
           })

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

@@ -218,7 +218,7 @@ export function createWatcher(args, { state, rebuild }) {
 
     refreshWatchedFiles() {
       watcher.add(Array.from(state.contextDependencies))
-      watcher.add(Array.from(state.configDependencies))
+      watcher.add(Array.from(state.configBag.dependencies))
       watcher.add(state.contentPatterns.all)
     },
   }

package/src/oxide/cli/index.ts

@@ -8,19 +8,6 @@ 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) {
@@ -43,7 +30,12 @@ let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '--esm': { type: Boolean, description: `Initialize configuration file as ESM` },
+      '--ts': { type: Boolean, description: `Initialize configuration file as TypeScript` },
+      '--full': {
+        type: Boolean,
+        description: `Include the default values for all options in the generated configuration file`,
+      },
       '-f': '--full',
     },
   },
@@ -209,4 +201,4 @@ if (args['--help']) {
   process.exit(0)
 }
 
-run(args, configs)
+run(args)

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

@@ -1,22 +1,49 @@
 import fs from 'fs'
 import path from 'path'
 
-export function init(args, configs) {
-  let messages = []
+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
+  }
+}
+
+export function init(args) {
+  let messages: string[] = []
+
+  let isProjectESM = args['--ts'] || args['--esm'] || isESM()
+  let syntax = args['--ts'] ? 'ts' : isProjectESM ? 'js' : 'cjs'
+  let extension = args['--ts'] ? 'ts' : 'js'
+
+  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./tailwind.config.${extension}`)
 
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./${configs.tailwind}`)
   if (fs.existsSync(tailwindConfigLocation)) {
     messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
   } else {
-    let stubFile = fs.readFileSync(
+    let stubContentsFile = fs.readFileSync(
       args['--full']
-        ? path.resolve(__dirname, '../../../../stubs/defaultConfig.stub.js')
-        : path.resolve(__dirname, '../../../../stubs/simpleConfig.stub.js'),
+        ? path.resolve(__dirname, '../../../../stubs/config.full.js')
+        : path.resolve(__dirname, '../../../../stubs/config.simple.js'),
+      'utf8'
+    )
+
+    let stubFile = fs.readFileSync(
+      path.resolve(__dirname, `../../../../stubs/tailwind.config.${syntax}`),
       'utf8'
     )
 
     // Change colors import
-    stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
+    stubContentsFile = stubContentsFile.replace('../colors', 'tailwindcss/colors')
+
+    // Replace contents of {ts,js,cjs} file with the stub {simple,full}.
+    stubFile =
+      stubFile
+        .replace('__CONFIG__', stubContentsFile.replace('module.exports =', '').trim())
+        .trim() + '\n\n'
 
     fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
 

package/src/public/colors.js

@@ -24,6 +24,7 @@ export default {
     700: '#334155',
     800: '#1e293b',
     900: '#0f172a',
+    950: '#020617',
   },
   gray: {
     50: '#f9fafb',
@@ -36,6 +37,7 @@ export default {
     700: '#374151',
     800: '#1f2937',
     900: '#111827',
+    950: '#030712',
   },
   zinc: {
     50: '#fafafa',
@@ -48,6 +50,7 @@ export default {
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
+    950: '#09090b',
   },
   neutral: {
     50: '#fafafa',
@@ -60,6 +63,7 @@ export default {
     700: '#404040',
     800: '#262626',
     900: '#171717',
+    950: '#0a0a0a',
   },
   stone: {
     50: '#fafaf9',
@@ -72,6 +76,7 @@ export default {
     700: '#44403c',
     800: '#292524',
     900: '#1c1917',
+    950: '#0c0a09',
   },
   red: {
     50: '#fef2f2',
@@ -84,6 +89,7 @@ export default {
     700: '#b91c1c',
     800: '#991b1b',
     900: '#7f1d1d',
+    950: '#450a0a',
   },
   orange: {
     50: '#fff7ed',
@@ -96,6 +102,7 @@ export default {
     700: '#c2410c',
     800: '#9a3412',
     900: '#7c2d12',
+    950: '#431407',
   },
   amber: {
     50: '#fffbeb',
@@ -108,6 +115,7 @@ export default {
     700: '#b45309',
     800: '#92400e',
     900: '#78350f',
+    950: '#451a03',
   },
   yellow: {
     50: '#fefce8',
@@ -120,6 +128,7 @@ export default {
     700: '#a16207',
     800: '#854d0e',
     900: '#713f12',
+    950: '#422006',
   },
   lime: {
     50: '#f7fee7',
@@ -132,6 +141,7 @@ export default {
     700: '#4d7c0f',
     800: '#3f6212',
     900: '#365314',
+    950: '#1a2e05',
   },
   green: {
     50: '#f0fdf4',
@@ -144,6 +154,7 @@ export default {
     700: '#15803d',
     800: '#166534',
     900: '#14532d',
+    950: '#052e16',
   },
   emerald: {
     50: '#ecfdf5',
@@ -156,6 +167,7 @@ export default {
     700: '#047857',
     800: '#065f46',
     900: '#064e3b',
+    950: '#022c22',
   },
   teal: {
     50: '#f0fdfa',
@@ -168,6 +180,7 @@ export default {
     700: '#0f766e',
     800: '#115e59',
     900: '#134e4a',
+    950: '#042f2e',
   },
   cyan: {
     50: '#ecfeff',
@@ -180,6 +193,7 @@ export default {
     700: '#0e7490',
     800: '#155e75',
     900: '#164e63',
+    950: '#083344',
   },
   sky: {
     50: '#f0f9ff',
@@ -192,6 +206,7 @@ export default {
     700: '#0369a1',
     800: '#075985',
     900: '#0c4a6e',
+    950: '#082f49',
   },
   blue: {
     50: '#eff6ff',
@@ -204,6 +219,7 @@ export default {
     700: '#1d4ed8',
     800: '#1e40af',
     900: '#1e3a8a',
+    950: '#172554',
   },
   indigo: {
     50: '#eef2ff',
@@ -216,6 +232,7 @@ export default {
     700: '#4338ca',
     800: '#3730a3',
     900: '#312e81',
+    950: '#1e1b4b',
   },
   violet: {
     50: '#f5f3ff',
@@ -228,6 +245,7 @@ export default {
     700: '#6d28d9',
     800: '#5b21b6',
     900: '#4c1d95',
+    950: '#2e1065',
   },
   purple: {
     50: '#faf5ff',
@@ -240,6 +258,7 @@ export default {
     700: '#7e22ce',
     800: '#6b21a8',
     900: '#581c87',
+    950: '#3b0764',
   },
   fuchsia: {
     50: '#fdf4ff',
@@ -252,6 +271,7 @@ export default {
     700: '#a21caf',
     800: '#86198f',
     900: '#701a75',
+    950: '#4a044e',
   },
   pink: {
     50: '#fdf2f8',
@@ -264,6 +284,7 @@ export default {
     700: '#be185d',
     800: '#9d174d',
     900: '#831843',
+    950: '#500724',
   },
   rose: {
     50: '#fff1f2',
@@ -276,6 +297,7 @@ export default {
     700: '#be123c',
     800: '#9f1239',
     900: '#881337',
+    950: '#4c0519',
   },
   get lightBlue() {
     warn({ version: 'v2.2', from: 'lightBlue', to: 'sky' })

package/src/public/default-config.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultConfig from '../../stubs/config.full'
 
 export default cloneDeep(defaultConfig)

package/src/public/default-theme.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultFullConfig from '../../stubs/config.full'
 
-export default cloneDeep(defaultConfig.theme)
+export default cloneDeep(defaultFullConfig.theme)

package/src/public/load-config.js

@@ -0,0 +1,2 @@
+import { loadConfig } from '../lib/load-config'
+export default loadConfig

package/src/util/applyImportantSelector.js

@@ -0,0 +1,30 @@
+import parser from 'postcss-selector-parser'
+import { collectPseudoElements, sortSelector } from './formatVariantSelector.js'
+
+export function applyImportantSelector(selector, important) {
+  let sel = parser().astSync(selector)
+
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
+
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
+
+    let [pseudoElements] = collectPseudoElements(sel)
+    if (pseudoElements.length > 0) {
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
+    }
+  })
+
+  return `${important} ${sel.toString()}`
+}

package/src/util/dataTypes.js

@@ -16,6 +16,10 @@ const placeholderRe = new RegExp(placeholder, 'g')
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
+  if (value.startsWith('--')) {
+    return `var(${value})`
+  }
+
   // Keep raw strings if it starts with `url(`
   if (value.includes('url(')) {
     return value

package/src/util/formatVariantSelector.js

@@ -246,9 +246,9 @@ export function finalizeSelector(current, formats, { context, candidate, base })
 
   // Move pseudo elements to the end of the selector (if necessary)
   selector.each((sel) => {
-    let pseudoElements = collectPseudoElements(sel)
+    let [pseudoElements] = collectPseudoElements(sel)
     if (pseudoElements.length > 0) {
-      sel.nodes.push(pseudoElements.sort(sortSelector))
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
     }
   })
 
@@ -351,23 +351,45 @@ let pseudoElementExceptions = [
  * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
  *
  * @param {Selector} selector
+ * @param {boolean} force
  **/
-function collectPseudoElements(selector) {
+export function collectPseudoElements(selector, force = false) {
   /** @type {Node[]} */
   let nodes = []
+  let seenPseudoElement = null
 
-  for (let node of selector.nodes) {
-    if (isPseudoElement(node)) {
+  for (let node of [...selector.nodes]) {
+    if (isPseudoElement(node, force)) {
       nodes.push(node)
       selector.removeChild(node)
+      seenPseudoElement = node.value
+    } else if (seenPseudoElement !== null) {
+      if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
+        nodes.push(node)
+        selector.removeChild(node)
+      } else {
+        seenPseudoElement = null
+      }
     }
 
     if (node?.nodes) {
-      nodes.push(...collectPseudoElements(node))
+      let hasPseudoElementRestrictions =
+        node.type === 'pseudo' && (node.value === ':is' || node.value === ':has')
+
+      let [collected, seenPseudoElementInSelector] = collectPseudoElements(
+        node,
+        force || hasPseudoElementRestrictions
+      )
+
+      if (seenPseudoElementInSelector) {
+        seenPseudoElement = seenPseudoElementInSelector
+      }
+
+      nodes.push(...collected)
     }
   }
 
-  return nodes
+  return [nodes, seenPseudoElement]
 }
 
 // This will make sure to move pseudo's to the correct spot (the end for
@@ -380,7 +402,7 @@ function collectPseudoElements(selector) {
 //
 // `::before:hover` doesn't work, which means that we can make it work
 // for you by flipping the order.
-function sortSelector(a, z) {
+export function sortSelector(a, z) {
   // Both nodes are non-pseudo's so we can safely ignore them and keep
   // them in the same order.
   if (a.type !== 'pseudo' && z.type !== 'pseudo') {
@@ -404,9 +426,13 @@ function sortSelector(a, z) {
   return isPseudoElement(a) - isPseudoElement(z)
 }
 
-function isPseudoElement(node) {
+function isPseudoElement(node, force = false) {
   if (node.type !== 'pseudo') return false
-  if (pseudoElementExceptions.includes(node.value)) return false
+  if (pseudoElementExceptions.includes(node.value) && !force) return false
 
   return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
 }
+
+function isPseudoClass(node, force) {
+  return node.type === 'pseudo' && !isPseudoElement(node, force)
+}