tailwindcss 3.3.2 → 3.3.3

package/lib/value-parser/parse.js

@@ -0,0 +1,259 @@
+"use strict";
+var openParentheses = "(".charCodeAt(0);
+var closeParentheses = ")".charCodeAt(0);
+var singleQuote = "'".charCodeAt(0);
+var doubleQuote = '"'.charCodeAt(0);
+var backslash = "\\".charCodeAt(0);
+var slash = "/".charCodeAt(0);
+var comma = ",".charCodeAt(0);
+var colon = ":".charCodeAt(0);
+var star = "*".charCodeAt(0);
+var uLower = "u".charCodeAt(0);
+var uUpper = "U".charCodeAt(0);
+var plus = "+".charCodeAt(0);
+var isUnicodeRange = /^[a-f0-9?-]+$/i;
+module.exports = function(input) {
+    var tokens = [];
+    var value = input;
+    var next, quote, prev, token, escape, escapePos, whitespacePos, parenthesesOpenPos;
+    var pos = 0;
+    var code = value.charCodeAt(pos);
+    var max = value.length;
+    var stack = [
+        {
+            nodes: tokens
+        }
+    ];
+    var balanced = 0;
+    var parent;
+    var name = "";
+    var before = "";
+    var after = "";
+    while(pos < max){
+        // Whitespaces
+        if (code <= 32) {
+            next = pos;
+            do {
+                next += 1;
+                code = value.charCodeAt(next);
+            }while (code <= 32);
+            token = value.slice(pos, next);
+            prev = tokens[tokens.length - 1];
+            if (code === closeParentheses && balanced) {
+                after = token;
+            } else if (prev && prev.type === "div") {
+                prev.after = token;
+                prev.sourceEndIndex += token.length;
+            } else if (code === comma || code === colon || code === slash && value.charCodeAt(next + 1) !== star && (!parent || parent && parent.type === "function" && false)) {
+                before = token;
+            } else {
+                tokens.push({
+                    type: "space",
+                    sourceIndex: pos,
+                    sourceEndIndex: next,
+                    value: token
+                });
+            }
+            pos = next;
+        // Quotes
+        } else if (code === singleQuote || code === doubleQuote) {
+            next = pos;
+            quote = code === singleQuote ? "'" : '"';
+            token = {
+                type: "string",
+                sourceIndex: pos,
+                quote: quote
+            };
+            do {
+                escape = false;
+                next = value.indexOf(quote, next + 1);
+                if (~next) {
+                    escapePos = next;
+                    while(value.charCodeAt(escapePos - 1) === backslash){
+                        escapePos -= 1;
+                        escape = !escape;
+                    }
+                } else {
+                    value += quote;
+                    next = value.length - 1;
+                    token.unclosed = true;
+                }
+            }while (escape);
+            token.value = value.slice(pos + 1, next);
+            token.sourceEndIndex = token.unclosed ? next : next + 1;
+            tokens.push(token);
+            pos = next + 1;
+            code = value.charCodeAt(pos);
+        // Comments
+        } else if (code === slash && value.charCodeAt(pos + 1) === star) {
+            next = value.indexOf("*/", pos);
+            token = {
+                type: "comment",
+                sourceIndex: pos,
+                sourceEndIndex: next + 2
+            };
+            if (next === -1) {
+                token.unclosed = true;
+                next = value.length;
+                token.sourceEndIndex = next;
+            }
+            token.value = value.slice(pos + 2, next);
+            tokens.push(token);
+            pos = next + 2;
+            code = value.charCodeAt(pos);
+        // Operation within calc
+        } else if ((code === slash || code === star) && parent && parent.type === "function" && true) {
+            token = value[pos];
+            tokens.push({
+                type: "word",
+                sourceIndex: pos - before.length,
+                sourceEndIndex: pos + token.length,
+                value: token
+            });
+            pos += 1;
+            code = value.charCodeAt(pos);
+        // Dividers
+        } else if (code === slash || code === comma || code === colon) {
+            token = value[pos];
+            tokens.push({
+                type: "div",
+                sourceIndex: pos - before.length,
+                sourceEndIndex: pos + token.length,
+                value: token,
+                before: before,
+                after: ""
+            });
+            before = "";
+            pos += 1;
+            code = value.charCodeAt(pos);
+        // Open parentheses
+        } else if (openParentheses === code) {
+            // Whitespaces after open parentheses
+            next = pos;
+            do {
+                next += 1;
+                code = value.charCodeAt(next);
+            }while (code <= 32);
+            parenthesesOpenPos = pos;
+            token = {
+                type: "function",
+                sourceIndex: pos - name.length,
+                value: name,
+                before: value.slice(parenthesesOpenPos + 1, next)
+            };
+            pos = next;
+            if (name === "url" && code !== singleQuote && code !== doubleQuote) {
+                next -= 1;
+                do {
+                    escape = false;
+                    next = value.indexOf(")", next + 1);
+                    if (~next) {
+                        escapePos = next;
+                        while(value.charCodeAt(escapePos - 1) === backslash){
+                            escapePos -= 1;
+                            escape = !escape;
+                        }
+                    } else {
+                        value += ")";
+                        next = value.length - 1;
+                        token.unclosed = true;
+                    }
+                }while (escape);
+                // Whitespaces before closed
+                whitespacePos = next;
+                do {
+                    whitespacePos -= 1;
+                    code = value.charCodeAt(whitespacePos);
+                }while (code <= 32);
+                if (parenthesesOpenPos < whitespacePos) {
+                    if (pos !== whitespacePos + 1) {
+                        token.nodes = [
+                            {
+                                type: "word",
+                                sourceIndex: pos,
+                                sourceEndIndex: whitespacePos + 1,
+                                value: value.slice(pos, whitespacePos + 1)
+                            }
+                        ];
+                    } else {
+                        token.nodes = [];
+                    }
+                    if (token.unclosed && whitespacePos + 1 !== next) {
+                        token.after = "";
+                        token.nodes.push({
+                            type: "space",
+                            sourceIndex: whitespacePos + 1,
+                            sourceEndIndex: next,
+                            value: value.slice(whitespacePos + 1, next)
+                        });
+                    } else {
+                        token.after = value.slice(whitespacePos + 1, next);
+                        token.sourceEndIndex = next;
+                    }
+                } else {
+                    token.after = "";
+                    token.nodes = [];
+                }
+                pos = next + 1;
+                token.sourceEndIndex = token.unclosed ? next : pos;
+                code = value.charCodeAt(pos);
+                tokens.push(token);
+            } else {
+                balanced += 1;
+                token.after = "";
+                token.sourceEndIndex = pos + 1;
+                tokens.push(token);
+                stack.push(token);
+                tokens = token.nodes = [];
+                parent = token;
+            }
+            name = "";
+        // Close parentheses
+        } else if (closeParentheses === code && balanced) {
+            pos += 1;
+            code = value.charCodeAt(pos);
+            parent.after = after;
+            parent.sourceEndIndex += after.length;
+            after = "";
+            balanced -= 1;
+            stack[stack.length - 1].sourceEndIndex = pos;
+            stack.pop();
+            parent = stack[balanced];
+            tokens = parent.nodes;
+        // Words
+        } else {
+            next = pos;
+            do {
+                if (code === backslash) {
+                    next += 1;
+                }
+                next += 1;
+                code = value.charCodeAt(next);
+            }while (next < max && !(code <= 32 || code === singleQuote || code === doubleQuote || code === comma || code === colon || code === slash || code === openParentheses || code === star && parent && parent.type === "function" && true || code === slash && parent.type === "function" && true || code === closeParentheses && balanced));
+            token = value.slice(pos, next);
+            if (openParentheses === code) {
+                name = token;
+            } else if ((uLower === token.charCodeAt(0) || uUpper === token.charCodeAt(0)) && plus === token.charCodeAt(1) && isUnicodeRange.test(token.slice(2))) {
+                tokens.push({
+                    type: "unicode-range",
+                    sourceIndex: pos,
+                    sourceEndIndex: next,
+                    value: token
+                });
+            } else {
+                tokens.push({
+                    type: "word",
+                    sourceIndex: pos,
+                    sourceEndIndex: next,
+                    value: token
+                });
+            }
+            pos = next;
+        }
+    }
+    for(pos = stack.length - 1; pos; pos -= 1){
+        stack[pos].unclosed = true;
+        stack[pos].sourceEndIndex = value.length;
+    }
+    return stack[0].nodes;
+};

package/lib/value-parser/stringify.js

@@ -0,0 +1,38 @@
+"use strict";
+function stringifyNode(node, custom) {
+    var type = node.type;
+    var value = node.value;
+    var buf;
+    var customResult;
+    if (custom && (customResult = custom(node)) !== undefined) {
+        return customResult;
+    } else if (type === "word" || type === "space") {
+        return value;
+    } else if (type === "string") {
+        buf = node.quote || "";
+        return buf + value + (node.unclosed ? "" : buf);
+    } else if (type === "comment") {
+        return "/*" + value + (node.unclosed ? "" : "*/");
+    } else if (type === "div") {
+        return (node.before || "") + value + (node.after || "");
+    } else if (Array.isArray(node.nodes)) {
+        buf = stringify(node.nodes, custom);
+        if (type !== "function") {
+            return buf;
+        }
+        return value + "(" + (node.before || "") + buf + (node.after || "") + (node.unclosed ? "" : ")");
+    }
+    return value;
+}
+function stringify(nodes, custom) {
+    var result, i;
+    if (Array.isArray(nodes)) {
+        result = "";
+        for(i = nodes.length - 1; ~i; i -= 1){
+            result = stringifyNode(nodes[i], custom) + result;
+        }
+        return result;
+    }
+    return stringifyNode(nodes, custom);
+}
+module.exports = stringify;

package/lib/value-parser/unit.js

@@ -0,0 +1,86 @@
+"use strict";
+var minus = "-".charCodeAt(0);
+var plus = "+".charCodeAt(0);
+var dot = ".".charCodeAt(0);
+var exp = "e".charCodeAt(0);
+var EXP = "E".charCodeAt(0);
+// Check if three code points would start a number
+// https://www.w3.org/TR/css-syntax-3/#starts-with-a-number
+function likeNumber(value) {
+    var code = value.charCodeAt(0);
+    var nextCode;
+    if (code === plus || code === minus) {
+        nextCode = value.charCodeAt(1);
+        if (nextCode >= 48 && nextCode <= 57) {
+            return true;
+        }
+        var nextNextCode = value.charCodeAt(2);
+        if (nextCode === dot && nextNextCode >= 48 && nextNextCode <= 57) {
+            return true;
+        }
+        return false;
+    }
+    if (code === dot) {
+        nextCode = value.charCodeAt(1);
+        if (nextCode >= 48 && nextCode <= 57) {
+            return true;
+        }
+        return false;
+    }
+    if (code >= 48 && code <= 57) {
+        return true;
+    }
+    return false;
+}
+// Consume a number
+// https://www.w3.org/TR/css-syntax-3/#consume-number
+module.exports = function(value) {
+    var pos = 0;
+    var length = value.length;
+    var code;
+    var nextCode;
+    var nextNextCode;
+    if (length === 0 || !likeNumber(value)) {
+        return false;
+    }
+    code = value.charCodeAt(pos);
+    if (code === plus || code === minus) {
+        pos++;
+    }
+    while(pos < length){
+        code = value.charCodeAt(pos);
+        if (code < 48 || code > 57) {
+            break;
+        }
+        pos += 1;
+    }
+    code = value.charCodeAt(pos);
+    nextCode = value.charCodeAt(pos + 1);
+    if (code === dot && nextCode >= 48 && nextCode <= 57) {
+        pos += 2;
+        while(pos < length){
+            code = value.charCodeAt(pos);
+            if (code < 48 || code > 57) {
+                break;
+            }
+            pos += 1;
+        }
+    }
+    code = value.charCodeAt(pos);
+    nextCode = value.charCodeAt(pos + 1);
+    nextNextCode = value.charCodeAt(pos + 2);
+    if ((code === exp || code === EXP) && (nextCode >= 48 && nextCode <= 57 || (nextCode === plus || nextCode === minus) && nextNextCode >= 48 && nextNextCode <= 57)) {
+        pos += nextCode === plus || nextCode === minus ? 3 : 2;
+        while(pos < length){
+            code = value.charCodeAt(pos);
+            if (code < 48 || code > 57) {
+                break;
+            }
+            pos += 1;
+        }
+    }
+    return {
+        number: value.slice(0, pos),
+        unit: value.slice(pos)
+    };
+};

package/lib/value-parser/walk.js

@@ -0,0 +1,16 @@
+"use strict";
+module.exports = function walk(nodes, cb, bubble) {
+    var i, max, node, result;
+    for(i = 0, max = nodes.length; i < max; i += 1){
+        node = nodes[i];
+        if (!bubble) {
+            result = cb(node, i, nodes);
+        }
+        if (result !== false && node.type === "function" && Array.isArray(node.nodes)) {
+            walk(node.nodes, cb, bubble);
+        }
+        if (bubble) {
+            cb(node, i, nodes);
+        }
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -87,7 +87,6 @@
     "postcss-load-config": "^4.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-selector-parser": "^6.0.11",
-    "postcss-value-parser": "^4.2.0",
     "resolve": "^1.22.2",
     "sucrase": "^3.32.0"
   },

package/src/cli/build/plugin.js

@@ -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/corePlugins.js

@@ -22,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 }) => {
@@ -80,7 +81,7 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant, matchVariant, config }) => {
+  pseudoClassVariants: ({ addVariant, matchVariant, config, prefix }) => {
     let pseudoVariants = [
       // Positional
       ['first', '&:first-child'],
@@ -151,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)) {
@@ -192,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,
+          },
+        }
       )
     }
   },
@@ -913,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 }]

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

@@ -98,7 +98,7 @@ function buildStylesheet(rules, context) {
 }
 
 export default function expandTailwindAtRules(context) {
-  return (root) => {
+  return async (root) => {
     let layerNodes = {
       base: null,
       components: null,
@@ -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')

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