tailwindcss 3.4.6 → 3.4.8

package/CHANGELOG.md

@@ -9,6 +9,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.4.8] - 2024-08-07
+
+### Fixed
+
+- Fix minification when using nested CSS ([#14105](https://github.com/tailwindlabs/tailwindcss/pull/14105))
+- Warn when broad glob patterns are used in the content configuration ([#14140](https://github.com/tailwindlabs/tailwindcss/pull/14140))
+
+## [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
@@ -2405,7 +2419,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.6...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.8...HEAD
+[3.4.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.7...v3.4.8
+[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

package/README.md

@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=master" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -37,4 +37,4 @@ For casual chit-chat with others using the framework:
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.

package/lib/cli/build/plugin.js

@@ -166,7 +166,9 @@ let state = {
         // Resolve globs from the content config
         // TODO: When we make the postcss plugin async-capable this can become async
         let files = _fastglob.default.sync(this.contentPatterns.all);
+        let checkBroadPattern = (0, _content.createBroadPatternCheck)(this.contentPatterns.all);
         for (let file of files){
+            checkBroadPattern(file);
             content.push({
                 content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
                 extension: _path.default.extname(file).slice(1)
@@ -277,7 +279,7 @@ async function createProcessor(args, cliConfigPath) {
         if (input) {
             return _fs.default.promises.readFile(_path.default.resolve(input), "utf8");
         }
-        // No input file provided, fallback to default atrules
+        // No input file provided, fallback to default at-rules
         return "@tailwind base; @tailwind components; @tailwind utilities";
     }
     async function build() {

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/content.js

@@ -15,6 +15,9 @@ _export(exports, {
     },
     resolvedChangedContent: function() {
         return resolvedChangedContent;
+    },
+    createBroadPatternCheck: function() {
+        return createBroadPatternCheck;
     }
 });
 const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
@@ -24,6 +27,8 @@ const _fastglob = /*#__PURE__*/ _interop_require_default(require("fast-glob"));
 const _normalizepath = /*#__PURE__*/ _interop_require_default(require("normalize-path"));
 const _parseGlob = require("../util/parseGlob");
 const _sharedState = require("./sharedState");
+const _log = /*#__PURE__*/ _interop_require_default(require("../util/log"));
+const _micromatch = /*#__PURE__*/ _interop_require_default(require("micromatch"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -152,6 +157,55 @@ function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
         mTimesToCommit
     ];
 }
+const LARGE_DIRECTORIES = [
+    "node_modules",
+    "vendor"
+];
+// Ensures that `node_modules` has to match as-is, otherwise `mynode_modules`
+// would match as well, but that is not a known large directory.
+const LARGE_DIRECTORIES_REGEX = new RegExp(`(${LARGE_DIRECTORIES.map((dir)=>String.raw`\b${dir}\b`).join("|")})`);
+function createBroadPatternCheck(paths) {
+    // Detect whether a glob pattern might be too broad. This means that it:
+    // - Includes `**`
+    // - Does not include any of the known large directories (e.g.: node_modules)
+    let maybeBroadPattern = paths.some((path)=>path.includes("**") && !LARGE_DIRECTORIES_REGEX.test(path));
+    // Didn't detect any potentially broad patterns, so we can skip further
+    // checks.
+    if (!maybeBroadPattern) {
+        return ()=>{};
+    }
+    // All globs that explicitly contain any of the known large directories (e.g.:
+    // node_modules).
+    let explicitGlobs = paths.filter((path)=>LARGE_DIRECTORIES_REGEX.test(path));
+    // Keep track of whether we already warned about the broad pattern issue or
+    // not. The `log.warn` function already does something similar where we only
+    // output the log once. However, with this we can also skip the other checks
+    // when we already warned about the broad pattern.
+    let warned = false;
+    /**
+   * @param {string} file
+   */ return (file)=>{
+        if (warned) return; // Already warned about the broad pattern
+        if (_micromatch.default.isMatch(file, explicitGlobs)) return; // Explicitly included, so we can skip further checks
+        // When a broad pattern is used, we have to double check that the file was
+        // not explicitly included in the globs.
+        let matchingGlob = paths.find((path)=>_micromatch.default.isMatch(file, path));
+        if (!matchingGlob) return; // This should never happen
+        // Create relative paths to make the output a bit more readable.
+        let relativeMatchingGlob = _path.default.relative(process.cwd(), matchingGlob);
+        if (relativeMatchingGlob[0] !== ".") relativeMatchingGlob = `./${relativeMatchingGlob}`;
+        let largeDirectory = LARGE_DIRECTORIES.find((directory)=>file.includes(directory));
+        if (largeDirectory) {
+            warned = true;
+            _log.default.warn("broad-content-glob-pattern", [
+                `Your \`content\` configuration includes a pattern which looks like it's accidentally matching all of \`${largeDirectory}\` and can cause serious performance issues.`,
+                `Pattern: \`${relativeMatchingGlob}\``,
+                `See our documentation for recommendations:`,
+                "https://tailwindcss.com/docs/content-configuration#pattern-recommendations"
+            ]);
+        }
+    };
+}
 /**
  *
  * @param {ContentPath[]} candidateFiles
@@ -160,12 +214,14 @@ function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
  */ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     let paths = candidateFiles.map((contentPath)=>contentPath.pattern);
     let mTimesToCommit = new Map();
+    let checkBroadPattern = createBroadPatternCheck(paths);
     let changedFiles = new Set();
     _sharedState.env.DEBUG && console.time("Finding changed files");
     let files = _fastglob.default.sync(paths, {
         absolute: true
     });
     for (let file of files){
+        checkBroadPattern(file);
         let prevModified = fileModifiedMap.get(file) || -Infinity;
         let modified = _fs.default.statSync(file).mtimeMs;
         if (modified > prevModified) {

package/lib/lib/defaultExtractor.js

@@ -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/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.6",
+  "version": "3.4.8",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -50,7 +50,7 @@
     "autoprefixer": "^10.4.14",
     "browserslist": "^4.21.5",
     "concurrently": "^8.0.1",
-    "cssnano": "^6.0.0",
+    "cssnano": "^6.1.2",
     "esbuild": "^0.20.2",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",