tailwindcss - npm Package Compare versions

Comparing version 3.4.7 to 3.4.8

lib/cli/build/plugin.js

@@ -169,3 +169,5 @@ // @ts-check
         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({
@@ -281,3 +283,3 @@ content: _fs.default.readFileSync(_path.default.resolve(file), "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";
@@ -284,0 +286,0 @@ }

lib/lib/content.js

@@ -18,2 +18,5 @@ // @ts-check
         return resolvedChangedContent;
+    },
+    createBroadPatternCheck: function() {
+        return createBroadPatternCheck;
     }
@@ -28,2 +31,4 @@ });
 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) {
@@ -157,2 +162,51 @@ return obj && obj.__esModule ? obj : {
 }
+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"
+            ]);
+        }
+    };
+}
 /**
@@ -166,2 +220,3 @@ *
     let mTimesToCommit = new Map();
+    let checkBroadPattern = createBroadPatternCheck(paths);
     let changedFiles = new Set();
@@ -173,2 +228,3 @@ _sharedState.env.DEBUG && console.time("Finding changed files");
     for (let file of files){
+        checkBroadPattern(file);
         let prevModified = fileModifiedMap.get(file) || -Infinity;
@@ -175,0 +231,0 @@ let modified = _fs.default.statSync(file).mtimeMs;

package.json

 {
   "name": "tailwindcss",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
@@ -53,3 +53,3 @@ "license": "MIT",
     "concurrently": "^8.0.1",
-    "cssnano": "^6.0.0",
+    "cssnano": "^6.1.2",
     "esbuild": "^0.20.2",
@@ -56,0 +56,0 @@ "eslint": "^8.39.0",

README.md

@@ -16,6 +16,6 @@ <p align="center">
 <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>
@@ -41,2 +41,2 @@
 
-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**.

src/cli/build/plugin.js

@@ -15,3 +15,3 @@ // @ts-check
 import resolveConfig from '../../../resolveConfig.js'
-import { parseCandidateFiles } from '../../lib/content.js'
+import { createBroadPatternCheck, parseCandidateFiles } from '../../lib/content.js'
 import { createWatcher } from './watching.js'
@@ -188,3 +188,7 @@ import fastGlob from 'fast-glob'
 
+    let checkBroadPattern = createBroadPatternCheck(this.contentPatterns.all)
+
     for (let file of files) {
+      checkBroadPattern(file)
+
       content.push({
@@ -323,3 +327,3 @@ content: fs.readFileSync(path.resolve(file), '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'
@@ -326,0 +330,0 @@ }

src/lib/content.js

@@ -10,2 +10,4 @@ // @ts-check
 import { env } from './sharedState'
+import log from '../util/log'
+import micromatch from 'micromatch'
 
@@ -185,3 +187,71 @@ /** @typedef {import('../../types/config.js').RawFile} RawFile */
 
+const LARGE_DIRECTORIES = [
+  'node_modules', // Node
+  'vendor', // PHP
+]
+
+// 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('|')})`
+)
+
 /**
+ * @param {string[]} paths
+ */
+export 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.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.isMatch(file, path))
+    if (!matchingGlob) return // This should never happen
+
+    // Create relative paths to make the output a bit more readable.
+    let relativeMatchingGlob = path.relative(process.cwd(), matchingGlob)
+    if (relativeMatchingGlob[0] !== '.') relativeMatchingGlob = `./${relativeMatchingGlob}`
+
+    let largeDirectory = LARGE_DIRECTORIES.find((directory) => file.includes(directory))
+    if (largeDirectory) {
+      warned = true
+
+      log.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',
+      ])
+    }
+  }
+}
+
+/**
  *
@@ -196,2 +266,4 @@ * @param {ContentPath[]} candidateFiles
 
+  let checkBroadPattern = createBroadPatternCheck(paths)
+
   let changedFiles = new Set()
@@ -201,2 +273,4 @@ env.DEBUG && console.time('Finding changed files')
   for (let file of files) {
+    checkBroadPattern(file)
+
     let prevModified = fileModifiedMap.get(file) || -Infinity
@@ -203,0 +277,0 @@ let modified = fs.statSync(file).mtimeMs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5705193

increased by1.45%

Lines of code

32790

increased by0.37%

No dependency changes