tailwindcss 3.4.4 → 3.4.5

package/CHANGELOG.md

@@ -9,6 +9,16 @@ 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
@@ -2385,7 +2395,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.4...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

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) {
@@ -3929,7 +3929,7 @@ let corePlugins = {
         matchUtilities({
             blur: (value)=>{
                 return {
-                    "--tw-blur": `blur(${value})`,
+                    "--tw-blur": value.trim() === "" ? " " : `blur(${value})`,
                     "@defaults filter": {},
                     filter: cssFilterValue
                 };
@@ -4069,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
                 };
             }
@@ -4084,6 +4085,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-brightness": `brightness(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4097,6 +4099,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-contrast": `contrast(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4110,6 +4113,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-grayscale": `grayscale(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4123,6 +4127,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-hue-rotate": `hue-rotate(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4137,6 +4142,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-invert": `invert(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4150,6 +4156,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-opacity": `opacity(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4163,6 +4170,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-saturate": `saturate(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4176,6 +4184,7 @@ let corePlugins = {
                 return {
                     "--tw-backdrop-sepia": `sepia(${value})`,
                     "@defaults backdrop-filter": {},
+                    "-webkit-backdrop-filter": cssBackdropFilterValue,
                     "backdrop-filter": cssBackdropFilterValue
                 };
             }
@@ -4198,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/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.4",
+  "version": "3.4.5",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/corePlugins.js

@@ -412,7 +412,7 @@ export let variantPlugins = {
         let check = 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
 
@@ -2596,7 +2596,7 @@ export let corePlugins = {
       {
         blur: (value) => {
           return {
-            '--tw-blur': `blur(${value})`,
+            '--tw-blur': value.trim() === '' ? ' ' : `blur(${value})`,
             '@defaults filter': {},
             filter: cssFilterValue,
           }
@@ -2751,8 +2751,9 @@ export let corePlugins = {
       {
         '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,
           }
         },
@@ -2768,6 +2769,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2783,6 +2785,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-contrast': `contrast(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2798,6 +2801,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2813,6 +2817,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2828,6 +2833,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-invert': `invert(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2843,6 +2849,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-opacity': `opacity(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2858,6 +2865,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-saturate': `saturate(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2873,6 +2881,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-sepia': `sepia(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2896,9 +2905,13 @@ export let corePlugins = {
     addUtilities({
       '.backdrop-filter': {
         '@defaults backdrop-filter': {},
+        '-webkit-backdrop-filter': cssBackdropFilterValue,
         'backdrop-filter': cssBackdropFilterValue,
       },
-      '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+      '.backdrop-filter-none': {
+        '-webkit-backdrop-filter': 'none',
+        'backdrop-filter': 'none',
+      },
     })
   },
 

package/src/lib/defaultExtractor.js

@@ -1,4 +1,5 @@
 import * as regex from './regex'
+import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly'
 
 export function defaultExtractor(context) {
   let patterns = Array.from(buildRegExps(context))
@@ -16,6 +17,30 @@ export function defaultExtractor(context) {
       }
     }
 
+    // Extract any subclasses from languages like Slim and Pug, eg:
+    // div.flex.px-5.underline
+    for (let result of results.slice()) {
+      let segments = 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
   }
 }
@@ -127,9 +152,6 @@ function* buildRegExps(context) {
       utility,
     ])
   }
-
-  // 5. Inner matches
-  yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 }
 
 // We want to capture any "special" characters

package/src/lib/load-config.ts

@@ -33,6 +33,17 @@ function lazyJiti() {
 
 export function loadConfig(path: string): Config {
   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/src/util/dataTypes.js

@@ -19,6 +19,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
@@ -26,11 +27,16 @@ 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',
+  'position-try',
 ])
 
 // This is not a data type, but rather a function that can normalize the

package/src/util/normalizeConfig.js

@@ -274,9 +274,7 @@ export function normalizeConfig(config) {
 
       if (typeof transform === 'function') {
         transformers.DEFAULT = transform
-      }
-
-      if (typeof transform === 'object' && transform !== null) {
+      } else if (typeof transform === 'object' && transform !== null) {
         Object.assign(transformers, transform)
       }
 

package/src/util/parseAnimationValue.js

@@ -13,7 +13,7 @@ const TIMINGS = new Set([
 ])
 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.
 const TIME = /^(-?[\d.]+m?s)$/
 const DIGIT = /^(\d+)$/

package/src/util/parseGlob.js

@@ -15,8 +15,7 @@ export 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)
   }
 

package/src/util/resolveConfigPath.js

@@ -6,6 +6,8 @@ const defaultConfigFiles = [
   './tailwind.config.cjs',
   './tailwind.config.mjs',
   './tailwind.config.ts',
+  './tailwind.config.cts',
+  './tailwind.config.mts',
 ]
 
 function isObject(value) {

package/src/util/splitAtTopLevelOnly.js

@@ -29,11 +29,7 @@ export function splitAtTopLevelOnly(input, separator) {
       }
     }
 
-    if (isEscaped) {
-      isEscaped = false
-    } else if (char === '\\') {
-      isEscaped = true
-    }
+    isEscaped = isEscaped ? false : char === '\\'
 
     if (char === '(' || char === '[' || char === '{') {
       stack.push(char)

package/stubs/config.full.js

@@ -70,7 +70,7 @@ module.exports = {
     },
     blur: {
       0: '0',
-      none: '0',
+      none: '',
       sm: '4px',
       DEFAULT: '8px',
       md: '12px',