tailwindcss 3.3.2 → 3.3.4

package/src/util/dataTypes.js

@@ -10,13 +10,34 @@ function isCSSFunction(value) {
   return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
 }
 
-const placeholder = '--tw-placeholder'
-const placeholderRe = new RegExp(placeholder, 'g')
+// These properties accept a `<dashed-ident>` as one of the values. This means that you can use them
+// as: `timeline-scope: --tl;`
+//
+// Without the `var(--tl)`, in these cases we don't want to normalize the value, and you should add
+// the `var()` yourself.
+//
+// More info:
+// - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
+// - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+//
+const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
+  // Concrete properties
+  'scroll-timeline-name',
+  'timeline-scope',
+  'view-timeline-name',
+  'font-palette',
+
+  // Shorthand properties
+  'scroll-timeline',
+  'animation-timeline',
+  'view-timeline',
+])
 
 // 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('--')) {
+export function normalize(value, context = null, isRoot = true) {
+  let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property)
+  if (value.startsWith('--') && !isVarException) {
     return `var(${value})`
   }
 
@@ -30,7 +51,7 @@ export function normalize(value, isRoot = true) {
           return part
         }
 
-        return normalize(part, false)
+        return normalize(part, context, false)
       })
       .join('')
   }
@@ -49,22 +70,83 @@ 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) => {
-    let vars = []
-    return match
-      .replace(/var\((--.+?)[,)]/g, (match, g1) => {
-        vars.push(g1)
-        return match.replace(g1, placeholder)
-      })
-      .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
-      .replace(placeholderRe, () => vars.shift())
-  })
+  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) {
+  let preventFormattingInFunctions = ['theme']
+
+  return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
+    let result = ''
+
+    function lastChar() {
+      let char = result.trimEnd()
+      return char[char.length - 1]
+    }
+
+    for (let i = 0; i < match.length; i++) {
+      function peek(word) {
+        return word.split('').every((char, j) => match[i + j] === char)
+      }
+
+      function consumeUntil(chars) {
+        let minIndex = Infinity
+        for (let char of chars) {
+          let index = match.indexOf(char, i)
+          if (index !== -1 && index < minIndex) {
+            minIndex = index
+          }
+        }
+
+        let result = match.slice(i, minIndex)
+        i += result.length - 1
+        return result
+      }
+
+      let char = match[i]
+
+      // Handle `var(--variable)`
+      if (peek('var')) {
+        // When we consume until `)`, then we are dealing with this scenario:
+        //   `var(--example)`
+        //
+        // When we consume until `,`, then we are dealing with this scenario:
+        //   `var(--example, 1rem)`
+        //
+        //   In this case we do want to "format", the default value as well
+        result += consumeUntil([')', ','])
+      }
+
+      // Skip formatting inside known functions
+      else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
+        result += consumeUntil([')'])
+      }
+
+      // Handle operators
+      else if (
+        ['+', '-', '*', '/'].includes(char) &&
+        !['(', '+', '-', '*', '/'].includes(lastChar())
+      ) {
+        result += ` ${char} `
+      } else {
+        result += char
+      }
+    }
+
+    // Simplify multiple spaces
+    return result.replace(/\s+/g, ' ')
+  })
+}
+
 export function url(value) {
   return value.startsWith('url(')
 }
@@ -178,11 +260,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

@@ -3,13 +3,14 @@ import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
 import { movePseudos } from './pseudoElements'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
 /** @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 +30,7 @@ export function formatVariantSelector(formats, { context, candidate }) {
 
     return {
       ...format,
-      ast: format.isArbitraryVariant ? ast : prefixSelector(prefix, ast),
+      ast: format.respectPrefix ? prefixSelector(prefix, ast) : ast,
     }
   })
 
@@ -160,7 +161,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   //           │  │     │            ╰── We will not split here
   //           ╰──┴─────┴─────────────── We will split here
   //
-  base = base ?? candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop()
+  base = base ?? splitAtTopLevelOnly(candidate, separator).pop()
 
   // Parse the selector into an AST
   let selector = selectorParser().astSync(current)
@@ -185,6 +186,13 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   // Remove extraneous selectors that do not include the base candidate
   selector.each((sel) => eliminateIrrelevantSelectors(sel, base))
 
+  // If ffter eliminating irrelevant selectors, we end up with nothing
+  // Then the whole "rule" this is associated with does not need to exist
+  // We use `null` as a marker value for that case
+  if (selector.length === 0) {
+    return null
+  }
+
   // If there are no formats that means there were no variants added to the candidate
   // so we can just return the selector as-is
   let formatAst = Array.isArray(formats)

package/src/util/isPlainObject.js

@@ -4,5 +4,5 @@ export default function isPlainObject(value) {
   }
 
   const prototype = Object.getPrototypeOf(value)
-  return prototype === null || prototype === Object.prototype
+  return prototype === null || Object.getPrototypeOf(prototype) === null
 }

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