tailwindcss 3.2.7 → 3.3.0

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/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,19 @@
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
+export function applyImportantSelector(selector, important) {
+  let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector)
+  if (!matches) return `${important} ${wrapWithIs(selector)}`
+
+  let [, before, pseudo, brackets] = matches
+  return `${important} ${wrapWithIs(before + brackets)}${pseudo}`
+}
+
+function wrapWithIs(selector) {
+  let parts = splitAtTopLevelOnly(selector, ' ')
+
+  if (parts.length === 1 && parts[0].startsWith(':is(') && parts[0].endsWith(')')) {
+    return selector
+  }
+
+  return `:is(${selector})`
+}

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/getAllConfigs.js

@@ -1,8 +1,8 @@
-import defaultConfig from '../../stubs/defaultConfig.stub.js'
+import defaultFullConfig from '../../stubs/config.full.js'
 import { flagEnabled } from '../featureFlags'
 
 export default function getAllConfigs(config) {
-  const configs = (config?.presets ?? [defaultConfig])
+  const configs = (config?.presets ?? [defaultFullConfig])
     .slice()
     .reverse()
     .flatMap((preset) => getAllConfigs(preset instanceof Function ? preset() : preset))

package/src/util/normalizeConfig.js

@@ -1,3 +1,4 @@
+import { flagEnabled } from '../featureFlags'
 import log, { dim } from './log'
 
 export function normalizeConfig(config) {
@@ -189,7 +190,7 @@ export function normalizeConfig(config) {
         return content.relative
       }
 
-      return config.future?.relativeContentPathsByDefault ?? false
+      return flagEnabled(config, 'relativeContentPathsByDefault')
     })(),
 
     files: (() => {
@@ -296,5 +297,22 @@ export function normalizeConfig(config) {
     }
   }
 
+  // Warn if the line-clamp plugin is installed
+  if (config.plugins.length > 0) {
+    let plugin
+    try {
+      plugin = require('@tailwindcss/line-clamp')
+    } catch {}
+
+    if (plugin && config.plugins.includes(plugin)) {
+      log.warn('line-clamp-in-core', [
+        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
+        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
+      ])
+
+      config.plugins = config.plugins.filter((p) => p !== plugin)
+    }
+  }
+
   return config
 }

package/src/util/pluginUtils.js

@@ -114,6 +114,14 @@ export function parseColorFormat(value) {
   return value
 }
 
+function unwrapArbitraryModifier(modifier) {
+  modifier = modifier.slice(1, -1)
+  if (modifier.startsWith('--')) {
+    modifier = `var(${modifier})`
+  }
+  return modifier
+}
+
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
     return parseColorFormat(options.values?.[modifier])
@@ -134,7 +142,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     normalizedColor = parseColorFormat(normalizedColor)
 
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
+      return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
@@ -268,7 +276,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
       if (configValue !== null) {
         utilityModifier = configValue
       } else if (isArbitraryValue(utilityModifier)) {
-        utilityModifier = utilityModifier.slice(1, -1)
+        utilityModifier = unwrapArbitraryModifier(utilityModifier)
       }
     }
   }

package/src/util/resolveConfigPath.js

@@ -1,6 +1,13 @@
 import fs from 'fs'
 import path from 'path'
 
+const defaultConfigFiles = [
+  './tailwind.config.js',
+  './tailwind.config.cjs',
+  './tailwind.config.mjs',
+  './tailwind.config.ts',
+]
+
 function isObject(value) {
   return typeof value === 'object' && value !== null
 }
@@ -43,7 +50,11 @@ export default function resolveConfigPath(pathOrConfig) {
   }
 
   // require('tailwindcss')
-  for (const configFile of ['./tailwind.config.js', './tailwind.config.cjs']) {
+  return resolveDefaultConfigPath()
+}
+
+export function resolveDefaultConfigPath() {
+  for (const configFile of defaultConfigFiles) {
     try {
       const configPath = path.resolve(configFile)
       fs.accessSync(configPath)

package/src/util/splitAtTopLevelOnly.js

@@ -17,17 +17,24 @@ export function splitAtTopLevelOnly(input, separator) {
   let stack = []
   let parts = []
   let lastPos = 0
+  let isEscaped = false
 
   for (let idx = 0; idx < input.length; idx++) {
     let char = input[idx]
 
-    if (stack.length === 0 && char === separator[0]) {
+    if (stack.length === 0 && char === separator[0] && !isEscaped) {
       if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
         parts.push(input.slice(lastPos, idx))
         lastPos = idx + separator.length
       }
     }
 
+    if (isEscaped) {
+      isEscaped = false
+    } else if (char === '\\') {
+      isEscaped = true
+    }
+
     if (char === '(' || char === '[' || char === '{') {
       stack.push(char)
     } else if (

package/stubs/.gitignore

@@ -0,0 +1 @@
+!*

package/stubs/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}