tailwindcss 3.3.1 → 3.3.2

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

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'
@@ -1262,7 +1261,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 +1306,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 +1749,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 +1772,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 +1799,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 +1824,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/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/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'
@@ -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
@@ -162,7 +162,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/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'

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

@@ -34,7 +34,7 @@ module.exports = function tailwindcss(configOrPath) {
 
         processTailwindFeatures(context)(root, result)
       },
-      env.OXIDE &&
+      __OXIDE__ &&
         function lightningCssPlugin(_root, result) {
           let postcss = require('postcss')
           let lightningcss = require('lightningcss')

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

package/src/util/colorNames.js

@@ -0,0 +1,150 @@
+export default {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50],
+}

package/src/util/formatVariantSelector.js

@@ -2,6 +2,7 @@ import selectorParser from 'postcss-selector-parser'
 import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
+import { movePseudos } from './pseudoElements'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
@@ -245,12 +246,7 @@ 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)
-    if (pseudoElements.length > 0) {
-      sel.nodes.push(...pseudoElements.sort(sortSelector))
-    }
-  })
+  selector.each((sel) => movePseudos(sel))
 
   return selector.toString()
 }
@@ -318,121 +314,3 @@ export function handleMergePseudo(selector, format) {
 
   return [selector, format]
 }
-
-// Note: As a rule, double colons (::) should be used instead of a single colon
-// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
-// this distinction was not present in older versions of the W3C spec, most
-// browsers support both syntaxes for the original pseudo-elements.
-let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter']
-
-// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = [
-  '::file-selector-button',
-
-  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-  '::-webkit-scrollbar',
-  '::-webkit-scrollbar-button',
-  '::-webkit-scrollbar-thumb',
-  '::-webkit-scrollbar-track',
-  '::-webkit-scrollbar-track-piece',
-  '::-webkit-scrollbar-corner',
-  '::-webkit-resizer',
-]
-
-/**
- * This will make sure to move pseudo's to the correct spot (the end for
- * pseudo elements) because otherwise the selector will never work
- * anyway.
- *
- * E.g.:
- *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
- *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
- *
- * `::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
- **/
-export function collectPseudoElements(selector, force = false) {
-  /** @type {Node[]} */
-  let nodes = []
-  let seenPseudoElement = null
-
-  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) {
-      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, seenPseudoElement]
-}
-
-// This will make sure to move pseudo's to the correct spot (the end for
-// pseudo elements) because otherwise the selector will never work
-// anyway.
-//
-// E.g.:
-//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-//
-// `::before:hover` doesn't work, which means that we can make it work
-// for you by flipping the order.
-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') {
-    return 0
-  }
-
-  // If one of them is a combinator, we need to keep it in the same order
-  // because that means it will start a new "section" in the selector.
-  if ((a.type === 'combinator') ^ (z.type === 'combinator')) {
-    return 0
-  }
-
-  // One of the items is a pseudo and the other one isn't. Let's move
-  // the pseudo to the right.
-  if ((a.type === 'pseudo') ^ (z.type === 'pseudo')) {
-    return (a.type === 'pseudo') - (z.type === 'pseudo')
-  }
-
-  // Both are pseudo's, move the pseudo elements (except for
-  // ::file-selector-button) to the right.
-  return isPseudoElement(a) - isPseudoElement(z)
-}
-
-function isPseudoElement(node, force = false) {
-  if (node.type !== 'pseudo') 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)
-}

package/src/util/pluginUtils.js

@@ -115,11 +115,7 @@ export function parseColorFormat(value) {
 }
 
 function unwrapArbitraryModifier(modifier) {
-  modifier = modifier.slice(1, -1)
-  if (modifier.startsWith('--')) {
-    modifier = `var(${modifier})`
-  }
-  return modifier
+  return normalize(modifier.slice(1, -1))
 }
 
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {