tailwindcss 3.4.3 → 3.4.5

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
 
@@ -434,23 +434,40 @@ export let variantPlugins = {
     )
   },
 
-  hasVariants: ({ matchVariant }) => {
-    matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} })
+  hasVariants: ({ matchVariant, prefix }) => {
+    matchVariant('has', (value) => `&:has(${normalize(value)})`, {
+      values: {},
+      [INTERNAL_FEATURES]: {
+        respectPrefix: false,
+      },
+    })
+
     matchVariant(
       'group-has',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &`
-          : `:merge(.group):has(${normalize(value)}) &`,
-      { values: {} }
+          ? `:merge(${prefix('.group')}\\/${modifier}):has(${normalize(value)}) &`
+          : `:merge(${prefix('.group')}):has(${normalize(value)}) &`,
+      {
+        values: {},
+        [INTERNAL_FEATURES]: {
+          respectPrefix: false,
+        },
+      }
     )
+
     matchVariant(
       'peer-has',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &`
-          : `:merge(.peer):has(${normalize(value)}) ~ &`,
-      { values: {} }
+          ? `:merge(${prefix('.peer')}\\/${modifier}):has(${normalize(value)}) ~ &`
+          : `:merge(${prefix('.peer')}):has(${normalize(value)}) ~ &`,
+      {
+        values: {},
+        [INTERNAL_FEATURES]: {
+          respectPrefix: false,
+        },
+      }
     )
   },
 
@@ -724,11 +741,19 @@ export let corePlugins = {
   zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
   order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
   gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
-  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
-  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
+  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]], {
+    supportsNegativeValues: true,
+  }),
   gridRow: createUtilityPlugin('gridRow', [['row', ['gridRow']]]),
-  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]]),
-  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]]),
+  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]], {
+    supportsNegativeValues: true,
+  }),
 
   float: ({ addUtilities }) => {
     addUtilities({
@@ -2571,7 +2596,7 @@ export let corePlugins = {
       {
         blur: (value) => {
           return {
-            '--tw-blur': `blur(${value})`,
+            '--tw-blur': value.trim() === '' ? ' ' : `blur(${value})`,
             '@defaults filter': {},
             filter: cssFilterValue,
           }
@@ -2726,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,
           }
         },
@@ -2743,6 +2769,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2758,6 +2785,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-contrast': `contrast(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2773,6 +2801,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2788,6 +2817,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2803,6 +2833,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-invert': `invert(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2818,6 +2849,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-opacity': `opacity(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2833,6 +2865,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-saturate': `saturate(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2848,6 +2881,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-sepia': `sepia(${value})`,
             '@defaults backdrop-filter': {},
+            '-webkit-backdrop-filter': cssBackdropFilterValue,
             'backdrop-filter': cssBackdropFilterValue,
           }
         },
@@ -2871,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/pluginUtils.js

@@ -124,7 +124,7 @@ export 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/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',