tailwindcss 3.4.3 → 3.4.5

package/CHANGELOG.md

@@ -9,6 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.4.5] - 2024-07-15
+
+### Fixed
+
+- Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826))
+- Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830))
+- Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940))
+- Don't generate utilities like `px-1` unnecessarily when using utilities like `px-1.5` ([#13959](https://github.com/tailwindlabs/tailwindcss/pull/13959))
+- Always generate `-webkit-backdrop-filter` for `backdrop-*` utilities ([#13997](https://github.com/tailwindlabs/tailwindcss/pull/13997))
+
+## [3.4.4] - 2024-06-05
+
+### Fixed
+
+- Make it possible to use multiple `<alpha-value>` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740))
+- Don't prefix classes in arbitrary values of `has-*`, `group-has-*`, and `peer-has-*` variants ([#13770](https://github.com/tailwindlabs/tailwindcss/pull/13770))
+- Support negative values for `{col,row}-{start,end}` utilities ([#13781](https://github.com/tailwindlabs/tailwindcss/pull/13781))
+- Update embedded browserslist database ([#13792](https://github.com/tailwindlabs/tailwindcss/pull/13792))
+
 ## [3.4.3] - 2024-03-27
 
 ### Fixed
@@ -2376,7 +2395,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.5...HEAD
+[3.4.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.4...v3.4.5
+[3.4.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.3...v3.4.4
 [3.4.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.2...v3.4.3
 [3.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.1...v3.4.2
 [3.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...v3.4.1

package/lib/corePlugins.js

@@ -443,7 +443,7 @@ let variantPlugins = {
         matchVariant("supports", (value = "")=>{
             let check = (0, _dataTypes.normalize)(value);
             let isRaw = /^\w*\s*\(/.test(check);
-            // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+            // Chrome has a bug where `(condition1)or(condition2)` is not valid
             // But `(condition1) or (condition2)` is supported.
             check = isRaw ? check.replace(/\b(and|or|not)\b/g, " $1 ") : check;
             if (isRaw) {
@@ -460,15 +460,24 @@ let variantPlugins = {
             values: (_theme = theme("supports")) !== null && _theme !== void 0 ? _theme : {}
         });
     },
-    hasVariants: ({ matchVariant  })=>{
+    hasVariants: ({ matchVariant , prefix  })=>{
         matchVariant("has", (value)=>`&:has(${(0, _dataTypes.normalize)(value)})`, {
-            values: {}
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
         });
-        matchVariant("group-has", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) &` : `:merge(.group):has(${(0, _dataTypes.normalize)(value)}) &`, {
-            values: {}
+        matchVariant("group-has", (value, { modifier  })=>modifier ? `:merge(${prefix(".group")}\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) &` : `:merge(${prefix(".group")}):has(${(0, _dataTypes.normalize)(value)}) &`, {
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
         });
-        matchVariant("peer-has", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) ~ &` : `:merge(.peer):has(${(0, _dataTypes.normalize)(value)}) ~ &`, {
-            values: {}
+        matchVariant("peer-has", (value, { modifier  })=>modifier ? `:merge(${prefix(".peer")}\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) ~ &` : `:merge(${prefix(".peer")}):has(${(0, _dataTypes.normalize)(value)}) ~ &`, {
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
         });
     },
     ariaVariants: ({ matchVariant , theme  })=>{
@@ -794,7 +803,9 @@ let corePlugins = {
                 "gridColumnStart"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridColumnEnd: (0, _createUtilityPlugin.default)("gridColumnEnd", [
         [
             "col-end",
@@ -802,7 +813,9 @@ let corePlugins = {
                 "gridColumnEnd"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridRow: (0, _createUtilityPlugin.default)("gridRow", [
         [
             "row",
@@ -818,7 +831,9 @@ let corePlugins = {
                 "gridRowStart"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridRowEnd: (0, _createUtilityPlugin.default)("gridRowEnd", [
         [
             "row-end",
@@ -826,7 +841,9 @@ let corePlugins = {
                 "gridRowEnd"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     float: ({ addUtilities  })=>{
         addUtilities({
             ".float-start": {
@@ -3912,7 +3929,7 @@ let corePlugins = {
         matchUtilities({
             blur: (value)=>{
                 return {
-                    "--tw-blur": `blur(${value})`,
+                    "--tw-blur": value.trim() === "" ? " " : `blur(${value})`,
                     "@defaults filter": {},
                     filter: cssFilterValue
                 };
@@ -4052,8 +4069,9 @@ let corePlugins = {
         matchUtilities({
             "backdrop-blur": (value)=>{
                 return {
-                    "--tw-backdrop-blur": `blur(${value})`,
+                    "--tw-backdrop-blur": value.trim() === "" ? " " : `blur(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4067,6 +4085,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-brightness": `brightness(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4080,6 +4099,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-contrast": `contrast(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4093,6 +4113,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-grayscale": `grayscale(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4106,6 +4127,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-hue-rotate": `hue-rotate(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4120,6 +4142,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-invert": `invert(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4133,6 +4156,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-opacity": `opacity(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4146,6 +4170,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-saturate": `saturate(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4159,6 +4184,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-sepia": `sepia(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4181,9 +4207,11 @@ let corePlugins = {
         addUtilities({
             ".backdrop-filter": {
                 "@defaults backdrop-filter": {},
+                "-webkit-backdrop-filter": cssBackdropFilterValue,
                 "backdrop-filter": cssBackdropFilterValue
             },
             ".backdrop-filter-none": {
+                "-webkit-backdrop-filter": "none",
                 "backdrop-filter": "none"
             }
         });

package/lib/lib/defaultExtractor.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "defaultExtractor", {
     }
 });
 const _regex = /*#__PURE__*/ _interop_require_wildcard(require("./regex"));
+const _splitAtTopLevelOnly = require("../util/splitAtTopLevelOnly");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -60,6 +61,27 @@ function defaultExtractor(context) {
                 results.push(clipAtBalancedParens(result));
             }
         }
+        // Extract any subclasses from languages like Slim and Pug, eg:
+        // div.flex.px-5.underline
+        for (let result of results.slice()){
+            let segments = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(result, ".");
+            for(let idx = 0; idx < segments.length; idx++){
+                let segment = segments[idx];
+                if (idx >= segments.length - 1) {
+                    results.push(segment);
+                    continue;
+                }
+                // If the next segment is a number, discard both, for example seeing
+                // `px-1` and `5` means the real candidate was `px-1.5` which is already
+                // captured.
+                let next = parseInt(segments[idx + 1]);
+                if (isNaN(next)) {
+                    results.push(segment);
+                } else {
+                    idx++;
+                }
+            }
+        }
         return results;
     };
 }
@@ -169,8 +191,6 @@ function* buildRegExps(context) {
             utility
         ]);
     }
-    // 5. Inner matches
-    yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
 }
 // We want to capture any "special" characters
 // AND the characters immediately following them (if there is one)

package/lib/lib/load-config.js

@@ -46,6 +46,10 @@ function lazyJiti() {
 }
 function loadConfig(path) {
     let config = function() {
+        // Always use jiti for ESM or TS files
+        if (path && (path.endsWith(".mjs") || path.endsWith(".ts") || path.endsWith(".cts") || path.endsWith(".mts"))) {
+            return lazyJiti()(path);
+        }
         try {
             return path ? require(path) : {};
         } catch  {

package/lib/util/dataTypes.js

@@ -77,6 +77,7 @@ function isCSSFunction(value) {
 // More info:
 // - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
 // - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+// - https://www.w3.org/TR/css-anchor-position-1
 //
 const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
     // Concrete properties
@@ -84,10 +85,15 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
     "timeline-scope",
     "view-timeline-name",
     "font-palette",
+    "anchor-name",
+    "anchor-scope",
+    "position-anchor",
+    "position-try-options",
     // Shorthand properties
     "scroll-timeline",
     "animation-timeline",
-    "view-timeline"
+    "view-timeline",
+    "position-try"
 ]);
 function normalize(value, context = null, isRoot = true) {
     let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property);

package/lib/util/normalizeConfig.js

@@ -260,8 +260,7 @@ function normalizeConfig(config) {
             let transformers = {};
             if (typeof transform === "function") {
                 transformers.DEFAULT = transform;
-            }
-            if (typeof transform === "object" && transform !== null) {
+            } else if (typeof transform === "object" && transform !== null) {
                 Object.assign(transformers, transform);
             }
             return transformers;

package/lib/util/parseAnimationValue.js

@@ -40,7 +40,7 @@ const TIMING_FNS = [
     "cubic-bezier",
     "steps"
 ];
-const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
+const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubic-bezier(a, b, c)` these don't count.
 ;
 const SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 ;

package/lib/util/parseGlob.js

@@ -25,8 +25,7 @@ function parseGlob(pattern) {
     }
     if (glob.substr(0, 2) === "./") {
         glob = glob.substr(2);
-    }
-    if (glob.charAt(0) === "/") {
+    } else if (glob.charAt(0) === "/") {
         glob = glob.substr(1);
     }
     return {

package/lib/util/pluginUtils.js

@@ -129,7 +129,7 @@ function splitUtilityModifier(modifier) {
 function parseColorFormat(value) {
     if (typeof value === "string" && value.includes("<alpha-value>")) {
         let oldValue = value;
-        return ({ opacityValue =1  })=>oldValue.replace("<alpha-value>", opacityValue);
+        return ({ opacityValue =1  })=>oldValue.replace(/<alpha-value>/g, opacityValue);
     }
     return value;
 }

package/lib/util/resolveConfigPath.js

@@ -27,7 +27,9 @@ const defaultConfigFiles = [
     "./tailwind.config.js",
     "./tailwind.config.cjs",
     "./tailwind.config.mjs",
-    "./tailwind.config.ts"
+    "./tailwind.config.ts",
+    "./tailwind.config.cts",
+    "./tailwind.config.mts"
 ];
 function isObject(value) {
     return typeof value === "object" && value !== null;

package/lib/util/splitAtTopLevelOnly.js

@@ -35,11 +35,7 @@ function splitAtTopLevelOnly(input, separator) {
                 lastPos = idx + separator.length;
             }
         }
-        if (isEscaped) {
-            isEscaped = false;
-        } else if (char === "\\") {
-            isEscaped = true;
-        }
+        isEscaped = isEscaped ? false : char === "\\";
         if (char === "(" || char === "[" || char === "{") {
             stack.push(char);
         } else if (char === ")" && stack[stack.length - 1] === "(" || char === "]" && stack[stack.length - 1] === "[" || char === "}" && stack[stack.length - 1] === "{") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",