tailwindcss 3.3.1 → 3.3.3

package/src/cli/build/plugin.js

@@ -185,7 +185,7 @@ let state = {
     let files = fastGlob.sync(this.contentPatterns.all)
 
     for (let file of files) {
-      if (env.OXIDE) {
+      if (__OXIDE__) {
         content.push({
           file,
           extension: path.extname(file).slice(1),
@@ -278,9 +278,9 @@ export async function createProcessor(args, cliConfigPath) {
   let tailwindPlugin = () => {
     return {
       postcssPlugin: 'tailwindcss',
-      Once(root, { result }) {
+      async Once(root, { result }) {
         env.DEBUG && console.time('Compiling CSS')
-        tailwind(({ createContext }) => {
+        await tailwind(({ createContext }) => {
           console.error()
           console.error('Rebuilding...')
 

package/src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-if (process.env.OXIDE) {
+if (__OXIDE__) {
   module.exports = require('./oxide/cli')
 } else {
   module.exports = require('./cli/index')

package/src/corePlugins.js

@@ -1,7 +1,6 @@
 import fs from 'fs'
 import * as path from 'path'
 import postcss from 'postcss'
-import { env } from './lib/sharedState'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
 import escapeClassName from './util/escapeClassName'
@@ -23,6 +22,7 @@ import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadow
 import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
 import { normalize } from './util/dataTypes'
+import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -81,7 +81,7 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant, matchVariant, config }) => {
+  pseudoClassVariants: ({ addVariant, matchVariant, config, prefix }) => {
     let pseudoVariants = [
       // Positional
       ['first', '&:first-child'],
@@ -152,12 +152,12 @@ export let variantPlugins = {
     let variants = {
       group: (_, { modifier }) =>
         modifier
-          ? [`:merge(.group\\/${escapeClassName(modifier)})`, ' &']
-          : [`:merge(.group)`, ' &'],
+          ? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
+          : [`:merge(${prefix('.group')})`, ' &'],
       peer: (_, { modifier }) =>
         modifier
-          ? [`:merge(.peer\\/${escapeClassName(modifier)})`, ' ~ &']
-          : [`:merge(.peer)`, ' ~ &'],
+          ? [`:merge(${prefix('.peer')}\\/${escapeClassName(modifier)})`, ' ~ &']
+          : [`:merge(${prefix('.peer')})`, ' ~ &'],
     }
 
     for (let [name, fn] of Object.entries(variants)) {
@@ -193,7 +193,12 @@ export let variantPlugins = {
 
           return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
         },
-        { values: Object.fromEntries(pseudoVariants) }
+        {
+          values: Object.fromEntries(pseudoVariants),
+          [INTERNAL_FEATURES]: {
+            respectPrefix: false,
+          },
+        }
       )
     }
   },
@@ -914,7 +919,7 @@ export let corePlugins = {
   },
 
   animation: ({ matchUtilities, theme, config }) => {
-    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
+    let prefixName = (name) => escapeClassName(config('prefix') + name)
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]
@@ -1262,7 +1267,7 @@ export let corePlugins = {
         'space-x': (value) => {
           value = value === '0' ? '0px' : value
 
-          if (env.OXIDE) {
+          if (__OXIDE__) {
             return {
               '& > :not([hidden]) ~ :not([hidden])': {
                 '--tw-space-x-reverse': '0',
@@ -1307,7 +1312,7 @@ export let corePlugins = {
         'divide-x': (value) => {
           value = value === '0' ? '0px' : value
 
-          if (env.OXIDE) {
+          if (__OXIDE__) {
             return {
               '& > :not([hidden]) ~ :not([hidden])': {
                 '@defaults border-width': {},
@@ -1750,7 +1755,13 @@ export let corePlugins = {
       return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
     }
 
-    return function ({ matchUtilities, theme }) {
+    return function ({ matchUtilities, theme, addDefaults }) {
+      addDefaults('gradient-color-stops', {
+        '--tw-gradient-from-position': ' ',
+        '--tw-gradient-via-position': ' ',
+        '--tw-gradient-to-position': ' ',
+      })
+
       let options = {
         values: flattenColorPalette(theme('gradientColorStops')),
         type: ['color', 'any'],
@@ -1767,13 +1778,9 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': `${toColorValue(
-                value,
-                'from'
-              )} var(--tw-gradient-from-position)`,
-              '--tw-gradient-from-position': ' ',
-              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-from-position)`,
-              '--tw-gradient-to-position': ' ',
+              '@defaults gradient-color-stops': {},
+              '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
+              '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
               '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
@@ -1798,12 +1805,10 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-via-position': ' ',
+              '@defaults gradient-color-stops': {},
               '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
-              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
-                value,
-                'via'
+                value
               )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
@@ -1825,8 +1830,8 @@ export let corePlugins = {
       matchUtilities(
         {
           to: (value) => ({
-            '--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
-            '--tw-gradient-to-position': ' ',
+            '@defaults gradient-color-stops': {},
+            '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
           }),
         },
         options

package/src/css/preflight.css

@@ -163,6 +163,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -300,6 +302,13 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */

package/src/featureFlags.js

@@ -1,15 +1,14 @@
 import colors from 'picocolors'
 import log from './util/log'
-import { env } from './lib/sharedState'
 
 let defaults = {
   optimizeUniversalDefaults: false,
   generalizedModifiers: true,
   get disableColorOpacityUtilitiesByDefault() {
-    return env.OXIDE
+    return __OXIDE__
   },
   get relativeContentPathsByDefault() {
-    return env.OXIDE
+    return __OXIDE__
   },
 }
 

package/src/index.js

@@ -1,5 +1 @@
-if (process.env.OXIDE) {
-  module.exports = require('./oxide/postcss-plugin')
-} else {
-  module.exports = require('./plugin')
-}
+module.exports = require('./plugin')

package/src/lib/defaultExtractor.js

@@ -35,7 +35,7 @@ function* buildRegExps(context) {
     // This is a targeted fix to continue to allow theme()
     // with square brackets to work in arbitrary properties
     // while fixing a problem with the regex matching too much
-    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
+    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
 
     // Utilities
     regex.pattern([

package/src/lib/evaluateTailwindFunctions.js

@@ -1,7 +1,7 @@
 import dlv from 'dlv'
 import didYouMean from 'didyoumean'
 import transformThemeValue from '../util/transformThemeValue'
-import parseValue from 'postcss-value-parser'
+import parseValue from '../value-parser/index'
 import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 import { toPath } from '../util/toPath'
@@ -146,6 +146,9 @@ function resolveVNode(node, vNode, functions) {
 }
 
 function resolveFunctions(node, input, functions) {
+  let hasAnyFn = Object.keys(functions).some((fn) => input.includes(`${fn}(`))
+  if (!hasAnyFn) return input
+
   return parseValue(input)
     .walk((vNode) => {
       resolveVNode(node, vNode, functions)

package/src/lib/expandApplyAtRules.js

@@ -4,7 +4,7 @@ import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import escapeClassName from '../util/escapeClassName'
 import { applyImportantSelector } from '../util/applyImportantSelector'
-import { collectPseudoElements, sortSelector } from '../util/formatVariantSelector.js'
+import { movePseudos } from '../util/pseudoElements'
 
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
 
@@ -566,13 +566,7 @@ function processApply(root, context, localCache) {
 
             // Move pseudo elements to the end of the selector (if necessary)
             let selector = parser().astSync(rule.selector)
-            selector.each((sel) => {
-              let [pseudoElements] = collectPseudoElements(sel)
-              if (pseudoElements.length > 0) {
-                sel.nodes.push(...pseudoElements.sort(sortSelector))
-              }
-            })
-
+            selector.each((sel) => movePseudos(sel))
             rule.selector = selector.toString()
           })
         }

package/src/lib/expandTailwindAtRules.js

@@ -1,5 +1,5 @@
 import fs from 'fs'
-import LRU from 'quick-lru'
+import LRU from '@alloc/quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import log from '../util/log'
@@ -98,7 +98,7 @@ function buildStylesheet(rules, context) {
 }
 
 export default function expandTailwindAtRules(context) {
-  return (root) => {
+  return async (root) => {
     let layerNodes = {
       base: null,
       components: null,
@@ -130,7 +130,7 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Reading changed files')
 
-    if (env.OXIDE) {
+    if (__OXIDE__) {
       // TODO: Pass through or implement `extractor`
       for (let candidate of require('@tailwindcss/oxide').parseCandidateStringsFromFiles(
         context.changedContent
@@ -145,12 +145,14 @@ export default function expandTailwindAtRules(context) {
       //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
       // }
     } else {
-      for (let { file, content, extension } of context.changedContent) {
-        let transformer = getTransformer(context.tailwindConfig, extension)
-        let extractor = getExtractor(context, extension)
-        content = file ? fs.readFileSync(file, 'utf8') : content
-        getClassCandidates(transformer(content), extractor, candidates, seen)
-      }
+      await Promise.all(
+        context.changedContent.map(async ({ file, content, extension }) => {
+          let transformer = getTransformer(context.tailwindConfig, extension)
+          let extractor = getExtractor(context, extension)
+          content = file ? await fs.promises.readFile(file, 'utf8') : content
+          getClassCandidates(transformer(content), extractor, candidates, seen)
+        })
+      )
     }
 
     env.DEBUG && console.timeEnd('Reading changed files')
@@ -162,7 +164,7 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Generate rules')
     env.DEBUG && console.time('Sorting candidates')
-    let sortedCandidates = env.OXIDE
+    let sortedCandidates = __OXIDE__
       ? candidates
       : new Set(
           [...candidates].sort((a, z) => {

package/src/lib/generateRules.js

@@ -13,7 +13,7 @@ import {
 } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
-import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
+import { isValidVariantFormatString, parseVariant, INTERNAL_FEATURES } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
 import { flagEnabled } from '../featureFlags'
@@ -193,13 +193,13 @@ function applyVariant(variant, matches, context) {
     //   group[:hover]    (`-` is missing)
     let match = /(.)(-?)\[(.*)\]/g.exec(variant)
     if (match) {
-      let [, char, seperator, value] = match
+      let [, char, separator, value] = match
       // @-[200px] case
-      if (char === '@' && seperator === '-') return []
+      if (char === '@' && separator === '-') return []
       // group[:hover] case
-      if (char !== '@' && seperator === '') return []
+      if (char !== '@' && separator === '') return []
 
-      variant = variant.replace(`${seperator}[${value}]`, '')
+      variant = variant.replace(`${separator}[${value}]`, '')
       args.value = value
     }
   }
@@ -230,9 +230,16 @@ function applyVariant(variant, matches, context) {
 
   if (context.variantMap.has(variant)) {
     let isArbitraryVariant = isArbitraryValue(variant)
+    let internalFeatures = context.variantOptions.get(variant)?.[INTERNAL_FEATURES] ?? {}
     let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
+    let respectPrefix = (() => {
+      if (isArbitraryVariant) return false
+      if (internalFeatures.respectPrefix === false) return false
+      return true
+    })()
+
     for (let [meta, rule] of matches) {
       // Don't generate variants for user css
       if (meta.layer === 'user') {
@@ -293,7 +300,7 @@ function applyVariant(variant, matches, context) {
           format(selectorFormat) {
             collectedFormats.push({
               format: selectorFormat,
-              isArbitraryVariant,
+              respectPrefix,
             })
           },
           args,
@@ -322,7 +329,7 @@ function applyVariant(variant, matches, context) {
         if (typeof ruleWithVariant === 'string') {
           collectedFormats.push({
             format: ruleWithVariant,
-            isArbitraryVariant,
+            respectPrefix,
           })
         }
 
@@ -366,7 +373,7 @@ function applyVariant(variant, matches, context) {
             //                    format: .foo &
             collectedFormats.push({
               format: modified.replace(rebuiltBase, '&'),
-              isArbitraryVariant,
+              respectPrefix,
             })
             rule.selector = before
           })

package/src/lib/setupContextUtils.js

@@ -24,6 +24,8 @@ import { Offsets } from './offsets.js'
 import { flagEnabled } from '../featureFlags.js'
 import { finalizeSelector, formatVariantSelector } from '../util/formatVariantSelector'
 
+export const INTERNAL_FEATURES = Symbol()
+
 const VARIANT_TYPES = {
   AddVariant: Symbol.for('ADD_VARIANT'),
   MatchVariant: Symbol.for('MATCH_VARIANT'),
@@ -230,8 +232,8 @@ export function parseVariant(variant) {
         return ({ format }) => format(str)
       }
 
-      let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str)
-      return ({ wrap }) => wrap(postcss.atRule({ name, params: params.trim() }))
+      let [, name, params] = /@(\S*)( .+|[({].*)?/g.exec(str)
+      return ({ wrap }) => wrap(postcss.atRule({ name, params: params?.trim() ?? '' }))
     })
     .reverse()
 
@@ -949,7 +951,11 @@ function registerPlugins(plugins, context) {
     let idx = BigInt(parasiteUtilities.length)
 
     for (const [, rule] of rules) {
-      sortedClassNames.set(rule.raws.tailwind.candidate, idx++)
+      let candidate = rule.raws.tailwind.candidate
+
+      // When multiple rules match a candidate
+      // always take the position of the first one
+      sortedClassNames.set(candidate, sortedClassNames.get(candidate) ?? idx++)
     }
 
     return classes.map((className) => {
@@ -1119,17 +1125,24 @@ function registerPlugins(plugins, context) {
           }
 
           let isArbitraryVariant = !(value in (options.values ?? {}))
+          let internalFeatures = options[INTERNAL_FEATURES] ?? {}
+
+          let respectPrefix = (() => {
+            if (isArbitraryVariant) return false
+            if (internalFeatures.respectPrefix === false) return false
+            return true
+          })()
 
           formatStrings = formatStrings.map((format) =>
             format.map((str) => ({
               format: str,
-              isArbitraryVariant,
+              respectPrefix,
             }))
           )
 
           manualFormatStrings = manualFormatStrings.map((format) => ({
             format,
-            isArbitraryVariant,
+            respectPrefix,
           }))
 
           let opts = {

package/src/lib/setupTrackingContext.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 import fs from 'fs'
-import LRU from 'quick-lru'
+import LRU from '@alloc/quick-lru'
 
 import hash from '../util/hashConfig'
 import resolveConfig from '../public/resolve-config'
@@ -63,9 +63,7 @@ function getTailwindConfig(configOrPath) {
   }
 
   // It's a plain object, not a path
-  let newConfig = resolveConfig(
-    configOrPath.config === undefined ? configOrPath : configOrPath.config
-  )
+  let newConfig = resolveConfig(configOrPath?.config ?? configOrPath ?? {})
 
   newConfig = validateConfig(newConfig)
 

package/src/lib/sharedState.js

@@ -1,5 +1,4 @@
 import pkg from '../../package.json'
-let OXIDE_DEFAULT_ENABLED = pkg.tailwindcss.engine === 'oxide'
 
 export const env =
   typeof process !== 'undefined'
@@ -7,13 +6,11 @@ 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),
       }
     : {
         NODE_ENV: 'production',
         DEBUG: false,
         ENGINE: pkg.tailwindcss.engine,
-        OXIDE: OXIDE_DEFAULT_ENABLED,
       }
 
 export const contextMap = new Map()
@@ -24,18 +21,6 @@ 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/plugin.ts

@@ -184,7 +184,7 @@ let state = {
     let files = fastGlob.sync(this.contentPatterns.all)
 
     for (let file of files) {
-      if (env.OXIDE) {
+      if (__OXIDE__) {
         content.push({
           file,
           extension: path.extname(file).slice(1),

package/src/plugin.js

@@ -13,7 +13,7 @@ module.exports = function tailwindcss(configOrPath) {
           console.time('JIT TOTAL')
           return root
         },
-      function (root, result) {
+      async 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
@@ -25,16 +25,16 @@ module.exports = function tailwindcss(configOrPath) {
 
           for (const root of roots) {
             if (root.type === 'root') {
-              processTailwindFeatures(context)(root, result)
+              await processTailwindFeatures(context)(root, result)
             }
           }
 
           return
         }
 
-        processTailwindFeatures(context)(root, result)
+        await processTailwindFeatures(context)(root, result)
       },
-      env.OXIDE &&
+      __OXIDE__ &&
         function lightningCssPlugin(_root, result) {
           let postcss = require('postcss')
           let lightningcss = require('lightningcss')

package/src/processTailwindFeatures.js

@@ -12,7 +12,7 @@ import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
-  return function (root, result) {
+  return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     detectNesting()(root, result)
@@ -44,7 +44,8 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    expandTailwindAtRules(context)(root, result)
+    await expandTailwindAtRules(context)(root, result)
+
     // Partition apply rules that are generated by
     // addComponents, addUtilities and so on.
     partitionApplyAtRules()(root, result)

package/src/util/applyImportantSelector.js

@@ -1,5 +1,5 @@
 import parser from 'postcss-selector-parser'
-import { collectPseudoElements, sortSelector } from './formatVariantSelector.js'
+import { movePseudos } from './pseudoElements'
 
 export function applyImportantSelector(selector, important) {
   let sel = parser().astSync(selector)
@@ -20,10 +20,7 @@ export function applyImportantSelector(selector, important) {
       ]
     }
 
-    let [pseudoElements] = collectPseudoElements(sel)
-    if (pseudoElements.length > 0) {
-      sel.nodes.push(...pseudoElements.sort(sortSelector))
-    }
+    movePseudos(sel)
   })
 
   return `${important} ${sel.toString()}`

package/src/util/color.js

@@ -1,4 +1,4 @@
-import namedColors from 'color-name'
+import namedColors from './colorNames'
 
 let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
 let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i