tailwindcss 3.3.2 → 3.3.3

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

@@ -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/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,14 +25,14 @@ 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)
       },
       __OXIDE__ &&
         function lightningCssPlugin(_root, result) {

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

@@ -49,10 +49,22 @@ export function normalize(value, isRoot = true) {
     value = value.trim()
   }
 
-  // Add spaces around operators inside math functions like calc() that do not follow an operator
-  // or '('.
-  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
+  value = normalizeMathOperatorSpacing(value)
+
+  return value
+}
+
+/**
+ * Add spaces around operators inside math functions
+ * like calc() that do not follow an operator or '('.
+ *
+ * @param {string} value
+ * @returns {string}
+ */
+function normalizeMathOperatorSpacing(value) {
+  return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     let vars = []
+
     return match
       .replace(/var\((--.+?)[,)]/g, (match, g1) => {
         vars.push(g1)
@@ -61,8 +73,6 @@ export function normalize(value, isRoot = true) {
       .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
       .replace(placeholderRe, () => vars.shift())
   })
-
-  return value
 }
 
 export function url(value) {
@@ -178,11 +188,12 @@ export function image(value) {
 }
 
 let gradientTypes = new Set([
+  'conic-gradient',
   'linear-gradient',
   'radial-gradient',
+  'repeating-conic-gradient',
   'repeating-linear-gradient',
   'repeating-radial-gradient',
-  'conic-gradient',
 ])
 export function gradient(value) {
   value = normalize(value)

package/src/util/formatVariantSelector.js

@@ -9,7 +9,7 @@ import { movePseudos } from './pseudoElements'
 /** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
 /** @typedef {import('postcss-selector-parser').Node} Node */
 
-/** @typedef {{format: string, isArbitraryVariant: boolean}[]} RawFormats */
+/** @typedef {{format: string, respectPrefix: boolean}[]} RawFormats */
 /** @typedef {import('postcss-selector-parser').Root} ParsedFormats */
 /** @typedef {RawFormats | ParsedFormats} AcceptedFormats */
 
@@ -29,7 +29,7 @@ export function formatVariantSelector(formats, { context, candidate }) {
 
     return {
       ...format,
-      ast: format.isArbitraryVariant ? ast : prefixSelector(prefix, ast),
+      ast: format.respectPrefix ? prefixSelector(prefix, ast) : ast,
     }
   })
 

package/src/util/prefixSelector.js

@@ -17,6 +17,7 @@ export default function (prefix, selector, prependNegative = false) {
     return selector
   }
 
+  /** @type {import('postcss-selector-parser').Root} */
   let ast = typeof selector === 'string' ? parser().astSync(selector) : selector
 
   ast.walkClasses((classSelector) => {

package/src/util/pseudoElements.js

@@ -19,40 +19,37 @@
 // **Jumpable**
 // Any terminal element may "jump" over combinators when moving to the end of the selector
 //
-// This is a backwards-compat quirk of :before and :after variants.
+// This is a backwards-compat quirk of pseudo element variants from earlier versions of Tailwind CSS.
 
 /** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */
 
 /** @type {Record<string, PseudoProperty[]>} */
 let elementProperties = {
+  // Pseudo elements from the spec
   '::after': ['terminal', 'jumpable'],
-  '::backdrop': ['terminal'],
+  '::backdrop': ['terminal', 'jumpable'],
   '::before': ['terminal', 'jumpable'],
   '::cue': ['terminal'],
   '::cue-region': ['terminal'],
   '::first-letter': ['terminal', 'jumpable'],
   '::first-line': ['terminal', 'jumpable'],
   '::grammar-error': ['terminal'],
-  '::marker': ['terminal'],
+  '::marker': ['terminal', 'jumpable'],
   '::part': ['terminal', 'actionable'],
-  '::placeholder': ['terminal'],
-  '::selection': ['terminal'],
+  '::placeholder': ['terminal', 'jumpable'],
+  '::selection': ['terminal', 'jumpable'],
   '::slotted': ['terminal'],
   '::spelling-error': ['terminal'],
   '::target-text': ['terminal'],
 
-  // other
+  // Pseudo elements from the spec with special rules
   '::file-selector-button': ['terminal', 'actionable'],
-  '::-webkit-progress-bar': ['terminal', 'actionable'],
 
-  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-  '::-webkit-scrollbar': ['terminal', 'actionable'],
-  '::-webkit-scrollbar-button': ['terminal', 'actionable'],
-  '::-webkit-scrollbar-thumb': ['terminal', 'actionable'],
-  '::-webkit-scrollbar-track': ['terminal', 'actionable'],
-  '::-webkit-scrollbar-track-piece': ['terminal', 'actionable'],
-  '::-webkit-scrollbar-corner': ['terminal', 'actionable'],
-  '::-webkit-resizer': ['terminal', 'actionable'],
+  // Library-specific pseudo elements used by component libraries
+  // These are Shadow DOM-like
+  '::deep': ['actionable'],
+  '::v-deep': ['actionable'],
+  '::ng-deep': ['actionable'],
 
   // Note: As a rule, double colons (::) should be used instead of a single colon
   // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
@@ -65,8 +62,8 @@ let elementProperties = {
 
   // The default value is used when the pseudo-element is not recognized
   // Because it's not recognized, we don't know if it's terminal or not
-  // So we assume it can't be moved AND can have user-action pseudo classes attached to it
-  __default__: ['actionable'],
+  // So we assume it can be moved AND can have user-action pseudo classes attached to it
+  __default__: ['terminal', 'actionable'],
 }
 
 /**

package/src/value-parser/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) Bogdan Chadkin <trysound@yandex.ru>
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/src/value-parser/README.md

@@ -0,0 +1,3 @@
+# postcss-value-parser (forked + inlined)
+
+This is a customized version of of [PostCSS Value Parser](https://github.com/TrySound/postcss-value-parser) to fix some bugs around parsing CSS functions.

package/src/value-parser/index.d.ts

@@ -0,0 +1,177 @@
+declare namespace postcssValueParser {
+  interface BaseNode {
+    /**
+     * The offset, inclusive, inside the CSS value at which the node starts.
+     */
+    sourceIndex: number
+
+    /**
+     * The offset, exclusive, inside the CSS value at which the node ends.
+     */
+    sourceEndIndex: number
+
+    /**
+     * The node's characteristic value
+     */
+    value: string
+  }
+
+  interface ClosableNode {
+    /**
+     * Whether the parsed CSS value ended before the node was properly closed
+     */
+    unclosed?: true
+  }
+
+  interface AdjacentAwareNode {
+    /**
+     * The token at the start of the node
+     */
+    before: string
+
+    /**
+     * The token at the end of the node
+     */
+    after: string
+  }
+
+  interface CommentNode extends BaseNode, ClosableNode {
+    type: 'comment'
+  }
+
+  interface DivNode extends BaseNode, AdjacentAwareNode {
+    type: 'div'
+  }
+
+  interface FunctionNode extends BaseNode, ClosableNode, AdjacentAwareNode {
+    type: 'function'
+
+    /**
+     * Nodes inside the function
+     */
+    nodes: Node[]
+  }
+
+  interface SpaceNode extends BaseNode {
+    type: 'space'
+  }
+
+  interface StringNode extends BaseNode, ClosableNode {
+    type: 'string'
+
+    /**
+     * The quote type delimiting the string
+     */
+    quote: '"' | "'"
+  }
+
+  interface UnicodeRangeNode extends BaseNode {
+    type: 'unicode-range'
+  }
+
+  interface WordNode extends BaseNode {
+    type: 'word'
+  }
+
+  /**
+   * Any node parsed from a CSS value
+   */
+  type Node =
+    | CommentNode
+    | DivNode
+    | FunctionNode
+    | SpaceNode
+    | StringNode
+    | UnicodeRangeNode
+    | WordNode
+
+  interface CustomStringifierCallback {
+    /**
+     * @param node The node to stringify
+     * @returns The serialized CSS representation of the node
+     */
+    (nodes: Node): string | undefined
+  }
+
+  interface WalkCallback {
+    /**
+     * @param node  The currently visited node
+     * @param index The index of the node in the series of parsed nodes
+     * @param nodes The series of parsed nodes
+     * @returns Returning `false` will prevent traversal of descendant nodes (only applies if `bubble` was set to `true` in the `walk()` call)
+     */
+    (node: Node, index: number, nodes: Node[]): void | boolean
+  }
+
+  /**
+   * A CSS dimension, decomposed into its numeric and unit parts
+   */
+  interface Dimension {
+    number: string
+    unit: string
+  }
+
+  /**
+   * A wrapper around a parsed CSS value that allows for inspecting and walking nodes
+   */
+  interface ParsedValue {
+    /**
+     * The series of parsed nodes
+     */
+    nodes: Node[]
+
+    /**
+     * Walk all parsed nodes, applying a callback
+     *
+     * @param callback A visitor callback that will be executed for each node
+     * @param bubble   When set to `true`, walking will be done inside-out instead of outside-in
+     */
+    walk(callback: WalkCallback, bubble?: boolean): this
+  }
+
+  interface ValueParser {
+    /**
+     * Decompose a CSS dimension into its numeric and unit part
+     *
+     * @param value The dimension to decompose
+     * @returns An object representing `number` and `unit` part of the dimension or `false` if the decomposing fails
+     */
+    unit(value: string): Dimension | false
+
+    /**
+     * Serialize a series of nodes into a CSS value
+     *
+     * @param nodes  The nodes to stringify
+     * @param custom A custom stringifier callback
+     * @returns The generated CSS value
+     */
+    stringify(nodes: Node | Node[], custom?: CustomStringifierCallback): string
+
+    /**
+     * Walk a series of nodes, applying a callback
+     *
+     * @param nodes    The nodes to walk
+     * @param callback A visitor callback that will be executed for each node
+     * @param bubble   When set to `true`, walking will be done inside-out instead of outside-in
+     */
+    walk(nodes: Node[], callback: WalkCallback, bubble?: boolean): void
+
+    /**
+     * Parse a CSS value into a series of nodes to operate on
+     *
+     * @param value The value to parse
+     */
+    new (value: string): ParsedValue
+
+    /**
+     * Parse a CSS value into a series of nodes to operate on
+     *
+     * @param value The value to parse
+     */
+    (value: string): ParsedValue
+  }
+}
+
+declare const postcssValueParser: postcssValueParser.ValueParser
+
+export = postcssValueParser

package/src/value-parser/index.js

@@ -0,0 +1,28 @@
+var parse = require('./parse')
+var walk = require('./walk')
+var stringify = require('./stringify')
+
+function ValueParser(value) {
+  if (this instanceof ValueParser) {
+    this.nodes = parse(value)
+    return this
+  }
+  return new ValueParser(value)
+}
+
+ValueParser.prototype.toString = function () {
+  return Array.isArray(this.nodes) ? stringify(this.nodes) : ''
+}
+
+ValueParser.prototype.walk = function (cb, bubble) {
+  walk(this.nodes, cb, bubble)
+  return this
+}
+
+ValueParser.unit = require('./unit')
+
+ValueParser.walk = walk
+
+ValueParser.stringify = stringify
+
+module.exports = ValueParser