tailwindcss 3.3.2 → 3.3.4

package/lib/oxide/cli/build/plugin.js

@@ -244,9 +244,9 @@ async function createProcessor(args, cliConfigPath) {
     let tailwindPlugin = ()=>{
         return {
             postcssPlugin: "tailwindcss",
-            Once (root, { result  }) {
+            async Once (root, { result  }) {
                 _sharedState.env.DEBUG && console.time("Compiling CSS");
-                (0, _processTailwindFeatures.default)(({ createContext  })=>{
+                await (0, _processTailwindFeatures.default)(({ createContext  })=>{
                     console.error();
                     console.error("Rebuilding...");
                     return ()=>{

package/lib/plugin.js

@@ -20,7 +20,7 @@ module.exports = function tailwindcss(configOrPath) {
                 console.time("JIT TOTAL");
                 return root;
             },
-            function(root, result) {
+            async function(root, result) {
                 var _findAtConfigPath1;
                 // Use the path for the `@config` directive if it exists, otherwise use the
                 // path for the file being processed
@@ -30,12 +30,12 @@ module.exports = function tailwindcss(configOrPath) {
                     let roots = root.nodes.filter((node)=>node.type === "root");
                     for (const root of roots){
                         if (root.type === "root") {
-                            (0, _processTailwindFeatures.default)(context)(root, result);
+                            await (0, _processTailwindFeatures.default)(context)(root, result);
                         }
                     }
                     return;
                 }
-                (0, _processTailwindFeatures.default)(context)(root, result);
+                await (0, _processTailwindFeatures.default)(context)(root, result);
             },
             false && function lightningCssPlugin(_root, result) {
                 let postcss = require("postcss");

package/lib/processTailwindFeatures.js

@@ -26,7 +26,7 @@ function _interop_require_default(obj) {
     };
 }
 function processTailwindFeatures(setupContext) {
-    return function(root, result) {
+    return async function(root, result) {
         let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives.default)(root);
         (0, _detectNesting.default)()(root, result);
         // Partition apply rules that are found in the css
@@ -50,7 +50,7 @@ function processTailwindFeatures(setupContext) {
             throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
         }
         (0, _featureFlags.issueFlagNotices)(context.tailwindConfig);
-        (0, _expandTailwindAtRules.default)(context)(root, result);
+        await (0, _expandTailwindAtRules.default)(context)(root, result);
         // Partition apply rules that are generated by
         // addComponents, addUtilities and so on.
         (0, _partitionApplyAtRules.default)()(root, result);

package/lib/util/color.js

@@ -27,7 +27,7 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
 let VALUE = /(?:\d+|\d*\.\d+)%?/;
 let SEP = /(?:\s*,\s*|\s+)/;
 let ALPHA_SEP = /\s*[,/]\s*/;
-let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/;
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)(?:,(?:[^ )]*?|var\(--[^ )]*?\)))?\)/;
 let RGB = new RegExp(`^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
 let HSL = new RegExp(`^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
 function parseColor(value, { loose =false  } = {}) {

package/lib/util/dataTypes.js

@@ -68,10 +68,30 @@ let cssFunctions = [
 function isCSSFunction(value) {
     return cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.*\\)`).test(value));
 }
-const placeholder = "--tw-placeholder";
-const placeholderRe = new RegExp(placeholder, "g");
-function normalize(value, isRoot = true) {
-    if (value.startsWith("--")) {
+// 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"
+]);
+function normalize(value, context = null, isRoot = true) {
+    let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property);
+    if (value.startsWith("--") && !isVarException) {
         return `var(${value})`;
     }
     // Keep raw strings if it starts with `url(`
@@ -80,7 +100,7 @@ function normalize(value, isRoot = true) {
             if (/^url\(.*?\)$/.test(part)) {
                 return part;
             }
-            return normalize(part, false);
+            return normalize(part, context, false);
         }).join("");
     }
     // Convert `_` to ` `, except for escaped underscores `\_`
@@ -89,17 +109,80 @@ function normalize(value, isRoot = true) {
     if (isRoot) {
         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([
+                    ")",
+                    ","
+                ]);
+            } else if (preventFormattingInFunctions.some((fn)=>peek(fn))) {
+                result += consumeUntil([
+                    ")"
+                ]);
+            } else if ([
+                "+",
+                "-",
+                "*",
+                "/"
+            ].includes(char) && ![
+                "(",
+                "+",
+                "-",
+                "*",
+                "/"
+            ].includes(lastChar())) {
+                result += ` ${char} `;
+            } else {
+                result += char;
+            }
+        }
+        // Simplify multiple spaces
+        return result.replace(/\s+/g, " ");
+    });
+}
 function url(value) {
     return value.startsWith("url(");
 }
@@ -199,11 +282,12 @@ function image(value) {
     return images > 0;
 }
 let gradientTypes = new Set([
+    "conic-gradient",
     "linear-gradient",
     "radial-gradient",
+    "repeating-conic-gradient",
     "repeating-linear-gradient",
-    "repeating-radial-gradient",
-    "conic-gradient"
+    "repeating-radial-gradient"
 ]);
 function gradient(value) {
     value = normalize(value);

package/lib/util/formatVariantSelector.js

@@ -27,12 +27,13 @@ const _unesc = /*#__PURE__*/ _interop_require_default(require("postcss-selector-
 const _escapeClassName = /*#__PURE__*/ _interop_require_default(require("../util/escapeClassName"));
 const _prefixSelector = /*#__PURE__*/ _interop_require_default(require("../util/prefixSelector"));
 const _pseudoElements = require("./pseudoElements");
+const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-/** @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 {import('postcss-selector-parser').Root} ParsedFormats */ /** @typedef {RawFormats | ParsedFormats} AcceptedFormats */ let MERGE = ":merge";
+/** @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, respectPrefix: boolean}[]} RawFormats */ /** @typedef {import('postcss-selector-parser').Root} ParsedFormats */ /** @typedef {RawFormats | ParsedFormats} AcceptedFormats */ let MERGE = ":merge";
 function formatVariantSelector(formats, { context , candidate  }) {
     var _context_tailwindConfig_prefix;
     let prefix = (_context_tailwindConfig_prefix = context === null || context === void 0 ? void 0 : context.tailwindConfig.prefix) !== null && _context_tailwindConfig_prefix !== void 0 ? _context_tailwindConfig_prefix : "";
@@ -41,7 +42,7 @@ function formatVariantSelector(formats, { context , candidate  }) {
         let ast = (0, _postcssselectorparser.default)().astSync(format.format);
         return {
             ...format,
-            ast: format.isArbitraryVariant ? ast : (0, _prefixSelector.default)(prefix, ast)
+            ast: format.respectPrefix ? (0, _prefixSelector.default)(prefix, ast) : ast
         };
     });
     // We start with the candidate selector
@@ -138,7 +139,7 @@ function finalizeSelector(current, formats, { context , candidate , base  }) {
     //           │  │     │            ╰── We will not split here
     //           ╰──┴─────┴─────────────── We will split here
     //
-    base = base !== null && base !== void 0 ? base : candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop();
+    base = base !== null && base !== void 0 ? base : (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(candidate, separator).pop();
     // Parse the selector into an AST
     let selector = (0, _postcssselectorparser.default)().astSync(current);
     // Normalize escaped classes, e.g.:
@@ -159,6 +160,12 @@ 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) ? formatVariantSelector(formats, {

package/lib/util/isPlainObject.js

@@ -13,5 +13,5 @@ function isPlainObject(value) {
         return false;
     }
     const prototype = Object.getPrototypeOf(value);
-    return prototype === null || prototype === Object.prototype;
+    return prototype === null || Object.getPrototypeOf(prototype) === null;
 }

package/lib/util/prefixSelector.js

@@ -29,7 +29,7 @@ function _default(prefix, selector, prependNegative = false) {
     if (prefix === "") {
         return selector;
     }
-    let ast = typeof selector === "string" ? (0, _postcssselectorparser.default)().astSync(selector) : selector;
+    /** @type {import('postcss-selector-parser').Root} */ let ast = typeof selector === "string" ? (0, _postcssselectorparser.default)().astSync(selector) : selector;
     ast.walkClasses((classSelector)=>{
         let baseClass = classSelector.value;
         let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith("-");

package/lib/util/pseudoElements.js

@@ -11,7 +11,7 @@
 // **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[]>} */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -23,12 +23,14 @@ Object.defineProperty(exports, "movePseudos", {
     }
 });
 let elementProperties = {
+    // Pseudo elements from the spec
     "::after": [
         "terminal",
         "jumpable"
     ],
     "::backdrop": [
-        "terminal"
+        "terminal",
+        "jumpable"
     ],
     "::before": [
         "terminal",
@@ -52,17 +54,20 @@ let elementProperties = {
         "terminal"
     ],
     "::marker": [
-        "terminal"
+        "terminal",
+        "jumpable"
     ],
     "::part": [
         "terminal",
         "actionable"
     ],
     "::placeholder": [
-        "terminal"
+        "terminal",
+        "jumpable"
     ],
     "::selection": [
-        "terminal"
+        "terminal",
+        "jumpable"
     ],
     "::slotted": [
         "terminal"
@@ -73,42 +78,20 @@ let elementProperties = {
     "::target-text": [
         "terminal"
     ],
-    // other
+    // Pseudo elements from the spec with special rules
     "::file-selector-button": [
         "terminal",
         "actionable"
     ],
-    "::-webkit-progress-bar": [
-        "terminal",
+    // Library-specific pseudo elements used by component libraries
+    // These are Shadow DOM-like
+    "::deep": [
         "actionable"
     ],
-    // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-    "::-webkit-scrollbar": [
-        "terminal",
+    "::v-deep": [
         "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",
+    "::ng-deep": [
         "actionable"
     ],
     // Note: As a rule, double colons (::) should be used instead of a single colon
@@ -133,8 +116,9 @@ 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
+    // So we assume it can be moved AND can have user-action pseudo classes attached to it
     __default__: [
+        "terminal",
         "actionable"
     ]
 };

package/lib/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/lib/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/lib/value-parser/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = postcssValueParser;

package/lib/value-parser/index.js

@@ -0,0 +1,22 @@
+"use strict";
+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;