tailwindcss 3.4.5 → 3.4.7

package/CHANGELOG.md

@@ -9,6 +9,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.4.7] - 2024-07-25
+
+### Fixed
+
+- Fix class detection in Slim templates with attached attributes and ID ([#14019](https://github.com/tailwindlabs/tailwindcss/pull/14019))
+- Ensure attribute values in `data-*` and `aria-*` modifiers are always quoted in the generated CSS ([#14037](https://github.com/tailwindlabs/tailwindcss/pull/14037))
+
+## [3.4.6] - 2024-07-16
+
+### Fixed
+
+- Fix detection of some utilities in Slim/Pug templates ([#14006](https://github.com/tailwindlabs/tailwindcss/pull/14006))
+
+### Changed
+
+- Loosen `:is()` wrapping rules when using an important selector ([#13900](https://github.com/tailwindlabs/tailwindcss/pull/13900))
+
 ## [3.4.5] - 2024-07-15
 
 ### Fixed
@@ -2395,7 +2412,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.5...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.7...HEAD
+[3.4.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.6...v3.4.7
+[3.4.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.5...v3.4.6
 [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

package/lib/corePlugins.js

@@ -482,29 +482,29 @@ let variantPlugins = {
     },
     ariaVariants: ({ matchVariant , theme  })=>{
         var _theme;
-        matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalize)(value)}]`, {
+        matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}]`, {
             values: (_theme = theme("aria")) !== null && _theme !== void 0 ? _theme : {}
         });
         var _theme1;
-        matchVariant("group-aria", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[aria-${(0, _dataTypes.normalize)(value)}] &` : `:merge(.group)[aria-${(0, _dataTypes.normalize)(value)}] &`, {
+        matchVariant("group-aria", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[aria-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] &` : `:merge(.group)[aria-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] &`, {
             values: (_theme1 = theme("aria")) !== null && _theme1 !== void 0 ? _theme1 : {}
         });
         var _theme2;
-        matchVariant("peer-aria", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[aria-${(0, _dataTypes.normalize)(value)}] ~ &` : `:merge(.peer)[aria-${(0, _dataTypes.normalize)(value)}] ~ &`, {
+        matchVariant("peer-aria", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[aria-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] ~ &` : `:merge(.peer)[aria-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] ~ &`, {
             values: (_theme2 = theme("aria")) !== null && _theme2 !== void 0 ? _theme2 : {}
         });
     },
     dataVariants: ({ matchVariant , theme  })=>{
         var _theme;
-        matchVariant("data", (value)=>`&[data-${(0, _dataTypes.normalize)(value)}]`, {
+        matchVariant("data", (value)=>`&[data-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}]`, {
             values: (_theme = theme("data")) !== null && _theme !== void 0 ? _theme : {}
         });
         var _theme1;
-        matchVariant("group-data", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[data-${(0, _dataTypes.normalize)(value)}] &` : `:merge(.group)[data-${(0, _dataTypes.normalize)(value)}] &`, {
+        matchVariant("group-data", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[data-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] &` : `:merge(.group)[data-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] &`, {
             values: (_theme1 = theme("data")) !== null && _theme1 !== void 0 ? _theme1 : {}
         });
         var _theme2;
-        matchVariant("peer-data", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[data-${(0, _dataTypes.normalize)(value)}] ~ &` : `:merge(.peer)[data-${(0, _dataTypes.normalize)(value)}] ~ &`, {
+        matchVariant("peer-data", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[data-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] ~ &` : `:merge(.peer)[data-${(0, _dataTypes.normalizeAttributeSelectors)((0, _dataTypes.normalize)(value))}] ~ &`, {
             values: (_theme2 = theme("data")) !== null && _theme2 !== void 0 ? _theme2 : {}
         });
     },

package/lib/lib/defaultExtractor.js

@@ -74,7 +74,7 @@ function defaultExtractor(context) {
                 // 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]);
+                let next = Number(segments[idx + 1]);
                 if (isNaN(next)) {
                     results.push(segment);
                 } else {
@@ -191,6 +191,8 @@ function* buildRegExps(context) {
             utility
         ]);
     }
+    // 5. Inner matches
+    yield /[^<>"'`\s.(){}[\]#=%$][^<>"'`\s(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
 }
 // We want to capture any "special" characters
 // AND the characters immediately following them (if there is one)

package/lib/util/applyImportantSelector.js

@@ -18,9 +18,11 @@ function _interop_require_default(obj) {
 function applyImportantSelector(selector, important) {
     let sel = (0, _postcssselectorparser.default)().astSync(selector);
     sel.each((sel)=>{
-        // Wrap with :is if it's not already wrapped
-        let isWrapped = sel.nodes[0].type === "pseudo" && sel.nodes[0].value === ":is" && sel.nodes.every((node)=>node.type !== "combinator");
-        if (!isWrapped) {
+        // For nesting, we only need to wrap a selector with :is() if it has a top-level combinator,
+        // e.g. `.dark .text-white`, to be independent of DOM order. Any other selector, including
+        // combinators inside of pseudos like `:where()`, are ok to nest.
+        let shouldWrap = sel.nodes.some((node)=>node.type === "combinator");
+        if (shouldWrap) {
             sel.nodes = [
                 _postcssselectorparser.default.pseudo({
                     value: ":is",

package/lib/util/dataTypes.js

@@ -12,6 +12,9 @@ _export(exports, {
     normalize: function() {
         return normalize;
     },
+    normalizeAttributeSelectors: function() {
+        return normalizeAttributeSelectors;
+    },
     url: function() {
         return url;
     },
@@ -118,6 +121,25 @@ function normalize(value, context = null, isRoot = true) {
     value = normalizeMathOperatorSpacing(value);
     return value;
 }
+function normalizeAttributeSelectors(value) {
+    // Wrap values in attribute selectors with quotes
+    if (value.includes("=")) {
+        value = value.replace(/(=.*)/g, (_fullMatch, match)=>{
+            if (match[1] === "'" || match[1] === '"') {
+                return match;
+            }
+            // Handle regex flags on unescaped values
+            if (match.length > 2) {
+                let trailingCharacter = match[match.length - 1];
+                if (match[match.length - 2] === " " && (trailingCharacter === "i" || trailingCharacter === "I" || trailingCharacter === "s" || trailingCharacter === "S")) {
+                    return `="${match.slice(1, -2)}" ${match[match.length - 1]}`;
+                }
+            }
+            return `="${match.slice(1)}"`;
+        });
+    }
+    return value;
+}
 /**
  * Add spaces around operators inside math functions
  * like calc() that do not follow an operator, '(', or `,`.

package/package.json

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

package/src/corePlugins.js

@@ -21,7 +21,7 @@ import {
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
 import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
-import { normalize } from './util/dataTypes'
+import { normalize, normalizeAttributeSelectors } from './util/dataTypes'
 import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
@@ -472,41 +472,45 @@ export let variantPlugins = {
   },
 
   ariaVariants: ({ matchVariant, theme }) => {
-    matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
+    matchVariant('aria', (value) => `&[aria-${normalizeAttributeSelectors(normalize(value))}]`, {
+      values: theme('aria') ?? {},
+    })
     matchVariant(
       'group-aria',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
-          : `:merge(.group)[aria-${normalize(value)}] &`,
+          ? `:merge(.group\\/${modifier})[aria-${normalizeAttributeSelectors(normalize(value))}] &`
+          : `:merge(.group)[aria-${normalizeAttributeSelectors(normalize(value))}] &`,
       { values: theme('aria') ?? {} }
     )
     matchVariant(
       'peer-aria',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
-          : `:merge(.peer)[aria-${normalize(value)}] ~ &`,
+          ? `:merge(.peer\\/${modifier})[aria-${normalizeAttributeSelectors(normalize(value))}] ~ &`
+          : `:merge(.peer)[aria-${normalizeAttributeSelectors(normalize(value))}] ~ &`,
       { values: theme('aria') ?? {} }
     )
   },
 
   dataVariants: ({ matchVariant, theme }) => {
-    matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
+    matchVariant('data', (value) => `&[data-${normalizeAttributeSelectors(normalize(value))}]`, {
+      values: theme('data') ?? {},
+    })
     matchVariant(
       'group-data',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
-          : `:merge(.group)[data-${normalize(value)}] &`,
+          ? `:merge(.group\\/${modifier})[data-${normalizeAttributeSelectors(normalize(value))}] &`
+          : `:merge(.group)[data-${normalizeAttributeSelectors(normalize(value))}] &`,
       { values: theme('data') ?? {} }
     )
     matchVariant(
       'peer-data',
       (value, { modifier }) =>
         modifier
-          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
-          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
+          ? `:merge(.peer\\/${modifier})[data-${normalizeAttributeSelectors(normalize(value))}] ~ &`
+          : `:merge(.peer)[data-${normalizeAttributeSelectors(normalize(value))}] ~ &`,
       { values: theme('data') ?? {} }
     )
   },

package/src/lib/defaultExtractor.js

@@ -32,7 +32,7 @@ export function defaultExtractor(context) {
         // 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])
+        let next = Number(segments[idx + 1])
         if (isNaN(next)) {
           results.push(segment)
         } else {
@@ -152,6 +152,9 @@ function* buildRegExps(context) {
       utility,
     ])
   }
+
+  // 5. Inner matches
+  yield /[^<>"'`\s.(){}[\]#=%$][^<>"'`\s(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 }
 
 // We want to capture any "special" characters

package/src/util/applyImportantSelector.js

@@ -5,13 +5,12 @@ export function applyImportantSelector(selector, important) {
   let sel = parser().astSync(selector)
 
   sel.each((sel) => {
-    // Wrap with :is if it's not already wrapped
-    let isWrapped =
-      sel.nodes[0].type === 'pseudo' &&
-      sel.nodes[0].value === ':is' &&
-      sel.nodes.every((node) => node.type !== 'combinator')
+    // For nesting, we only need to wrap a selector with :is() if it has a top-level combinator,
+    // e.g. `.dark .text-white`, to be independent of DOM order. Any other selector, including
+    // combinators inside of pseudos like `:where()`, are ok to nest.
+    let shouldWrap = sel.nodes.some((node) => node.type === 'combinator')
 
-    if (!isWrapped) {
+    if (shouldWrap) {
       sel.nodes = [
         parser.pseudo({
           value: ':is',

package/src/util/dataTypes.js

@@ -81,6 +81,34 @@ export function normalize(value, context = null, isRoot = true) {
   return value
 }
 
+export function normalizeAttributeSelectors(value) {
+  // Wrap values in attribute selectors with quotes
+  if (value.includes('=')) {
+    value = value.replace(/(=.*)/g, (_fullMatch, match) => {
+      if (match[1] === "'" || match[1] === '"') {
+        return match
+      }
+
+      // Handle regex flags on unescaped values
+      if (match.length > 2) {
+        let trailingCharacter = match[match.length - 1]
+        if (
+          match[match.length - 2] === ' ' &&
+          (trailingCharacter === 'i' ||
+            trailingCharacter === 'I' ||
+            trailingCharacter === 's' ||
+            trailingCharacter === 'S')
+        ) {
+          return `="${match.slice(1, -2)}" ${match[match.length - 1]}`
+        }
+      }
+
+      return `="${match.slice(1)}"`
+    })
+  }
+  return value
+}
+
 /**
  * Add spaces around operators inside math functions
  * like calc() that do not follow an operator, '(', or `,`.