tailwindcss - npm Package Compare versions

Comparing version 0.0.0-insiders.605d8cd to 0.0.0-insiders.6069a81

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,61 @@ return obj && obj.__esModule ? obj : {
 }
+const LARGE_DIRECTORIES = [
+    "node_modules"
+];
+// 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 glob matchers
+    let matchers = [];
+    // All glob matchers that explicitly contain any of the known large
+    // directories (e.g.: node_modules).
+    let explicitMatchers = [];
+    // Create matchers for all paths
+    for (let path of paths){
+        let matcher = _micromatch.default.matcher(path);
+        if (LARGE_DIRECTORIES_REGEX.test(path)) {
+            explicitMatchers.push(matcher);
+        }
+        matchers.push(matcher);
+    }
+    // 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 (explicitMatchers.some((matcher)=>matcher(file))) 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 matchingGlobIndex = matchers.findIndex((matcher)=>matcher(file));
+        if (matchingGlobIndex === -1) return; // This should never happen
+        let matchingGlob = paths[matchingGlobIndex];
+        // 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 +230,3 @@ *
     let mTimesToCommit = new Map();
+    let checkBroadPattern = createBroadPatternCheck(paths);
     let changedFiles = new Set();
@@ -173,2 +238,3 @@ _sharedState.env.DEBUG && console.time("Finding changed files");
     for (let file of files){
+        checkBroadPattern(file);
         let prevModified = fileModifiedMap.get(file) || -Infinity;
@@ -175,0 +241,0 @@ let modified = _fs.default.statSync(file).mtimeMs;

lib/lib/expandTailwindAtRules.js

@@ -206,4 +206,4 @@ "use strict";
             layerNodes.base.before((0, _cloneNodes.default)([
-                ...baseNodes,
-                ...defaultNodes
+                ...defaultNodes,
+                ...baseNodes
             ], layerNodes.base.source, {
@@ -210,0 +210,0 @@ layer: "base"

lib/lib/resolveDefaultsAtRules.js

@@ -123,18 +123,16 @@ "use strict";
                 }
-                if ((0, _featureFlags.flagEnabled)(tailwindConfig, "optimizeUniversalDefaults")) {
-                    if (selectorGroups.size === 0) {
-                        universal.remove();
-                        continue;
-                    }
-                    for (let [, selectors] of selectorGroups){
-                        let universalRule = _postcss.default.rule({
-                            source: universal.source
-                        });
-                        universalRule.selectors = [
-                            ...selectors
-                        ];
-                        universalRule.append(universal.nodes.map((node)=>node.clone()));
-                        universal.before(universalRule);
-                    }
+                if (selectorGroups.size === 0) {
+                    universal.remove();
+                    continue;
                 }
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule({
+                        source: universal.source
+                    });
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()));
+                    universal.before(universalRule);
+                }
                 universal.remove();
@@ -141,0 +139,0 @@ }

lib/util/dataTypes.js

@@ -177,3 +177,4 @@ "use strict";
         "repeating-linear-gradient",
-        "repeating-conic-gradient"
+        "repeating-conic-gradient",
+        "anchor-size"
     ];
@@ -180,0 +181,0 @@ return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{

lib/util/removeAlphaVariables.js

@@ -28,2 +28,4 @@ /**
                 decl.value = decl.value.replace(`/ var(${varName})`, "");
+            } else if (decl.value.includes(`/ var(${varName}, 1)`)) {
+                decl.value = decl.value.replace(`/ var(${varName}, 1)`, "");
             }
@@ -30,0 +32,0 @@ }

lib/util/withAlphaVariable.js

@@ -47,3 +47,3 @@ "use strict";
                         opacityVariable: variable,
-                        opacityValue: `var(${variable})`
+                        opacityValue: `var(${variable}, 1)`
                     })
@@ -75,3 +75,3 @@ ];
                     ...parsed,
-                    alpha: `var(${variable})`
+                    alpha: `var(${variable}, 1)`
                 })
@@ -78,0 +78,0 @@ ];

package.json

 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.605d8cd",
+  "version": "0.0.0-insiders.6069a81",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
@@ -46,21 +46,21 @@ "license": "MIT",
   "devDependencies": {
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.55",
-    "@swc/jest": "^0.2.26",
-    "@swc/register": "^0.1.10",
-    "autoprefixer": "^10.4.14",
-    "browserslist": "^4.21.5",
-    "concurrently": "^8.0.1",
-    "cssnano": "^6.0.0",
-    "esbuild": "^0.20.2",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@swc/cli": "0.1.62",
+    "@swc/core": "1.3.55",
+    "@swc/jest": "0.2.26",
+    "@swc/register": "0.1.10",
+    "autoprefixer": "^10.4.20",
+    "browserslist": "^4.24.0",
+    "concurrently": "^8.2.2",
+    "cssnano": "^6.1.2",
+    "esbuild": "^0.24.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "jest": "^29.6.0",
-    "jest-diff": "^29.6.0",
-    "lightningcss": "1.24.1",
+    "jest": "^29.7.0",
+    "jest-diff": "^29.7.0",
+    "lightningcss": "1.27.0",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.0",
-    "source-map-js": "^1.0.2",
-    "turbo": "^1.9.3"
+    "rimraf": "^5.0.10",
+    "source-map-js": "^1.2.1",
+    "turbo": "^1.13.4"
   },
@@ -70,22 +70,22 @@ "dependencies": {
     "arg": "^5.0.2",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
-    "fast-glob": "^3.3.0",
+    "fast-glob": "^3.3.2",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
-    "jiti": "^1.21.0",
+    "jiti": "^1.21.6",
     "lilconfig": "^2.1.0",
-    "micromatch": "^4.0.5",
+    "micromatch": "^4.0.8",
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
-    "picocolors": "^1.0.0",
-    "postcss": "^8.4.23",
+    "picocolors": "^1.1.1",
+    "postcss": "^8.4.47",
     "postcss-import": "^15.1.0",
     "postcss-js": "^4.0.1",
-    "postcss-load-config": "^4.0.1",
-    "postcss-nested": "^6.0.1",
-    "postcss-selector-parser": "^6.0.11",
-    "resolve": "^1.22.2",
-    "sucrase": "^3.32.0"
+    "postcss-load-config": "^4.0.2",
+    "postcss-nested": "^6.2.0",
+    "postcss-selector-parser": "^6.1.2",
+    "resolve": "^1.22.8",
+    "sucrase": "^3.35.0"
   },
@@ -92,0 +92,0 @@ "browserslist": [

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,84 @@ /** @typedef {import('../../types/config.js').RawFile} RawFile */
 
+const LARGE_DIRECTORIES = [
+  'node_modules', // Node
+]
+
+// 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 glob matchers
+  let matchers = []
+
+  // All glob matchers that explicitly contain any of the known large
+  // directories (e.g.: node_modules).
+  let explicitMatchers = []
+
+  // Create matchers for all paths
+  for (let path of paths) {
+    let matcher = micromatch.matcher(path)
+    if (LARGE_DIRECTORIES_REGEX.test(path)) {
+      explicitMatchers.push(matcher)
+    }
+
+    matchers.push(matcher)
+  }
+
+  // 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 (explicitMatchers.some((matcher) => matcher(file))) 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 matchingGlobIndex = matchers.findIndex((matcher) => matcher(file))
+    if (matchingGlobIndex === -1) return // This should never happen
+    let matchingGlob = paths[matchingGlobIndex]
+
+    // 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 +279,4 @@ * @param {ContentPath[]} candidateFiles
 
+  let checkBroadPattern = createBroadPatternCheck(paths)
+
   let changedFiles = new Set()
@@ -201,2 +286,4 @@ env.DEBUG && console.time('Finding changed files')
   for (let file of files) {
+    checkBroadPattern(file)
+
     let prevModified = fileModifiedMap.get(file) || -Infinity
@@ -203,0 +290,0 @@ let modified = fs.statSync(file).mtimeMs

src/lib/expandTailwindAtRules.js

@@ -195,3 +195,3 @@ import fs from 'fs'
       layerNodes.base.before(
-        cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source, {
+        cloneNodes([...defaultNodes, ...baseNodes], layerNodes.base.source, {
           layer: 'base',
@@ -198,0 +198,0 @@ })

src/lib/resolveDefaultsAtRules.js

@@ -121,18 +121,16 @@ import postcss from 'postcss'
 
-        if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-          if (selectorGroups.size === 0) {
-            universal.remove()
-            continue
-          }
+        if (selectorGroups.size === 0) {
+          universal.remove()
+          continue
+        }
 
-          for (let [, selectors] of selectorGroups) {
-            let universalRule = postcss.rule({
-              source: universal.source,
-            })
+        for (let [, selectors] of selectorGroups) {
+          let universalRule = postcss.rule({
+            source: universal.source,
+          })
 
-            universalRule.selectors = [...selectors]
+          universalRule.selectors = [...selectors]
 
-            universalRule.append(universal.nodes.map((node) => node.clone()))
-            universal.before(universalRule)
-          }
+          universalRule.append(universal.nodes.map((node) => node.clone()))
+          universal.before(universalRule)
         }
@@ -139,0 +137,0 @@

src/util/dataTypes.js

@@ -150,2 +150,4 @@ import { parseColor } from './color'
     'repeating-conic-gradient',
+
+    'anchor-size',
   ]
@@ -152,0 +154,0 @@

src/util/removeAlphaVariables.js

@@ -21,2 +21,4 @@ /**
         decl.value = decl.value.replace(`/ var(${varName})`, '')
+      } else if (decl.value.includes(`/ var(${varName}, 1)`)) {
+        decl.value = decl.value.replace(`/ var(${varName}, 1)`, '')
       }
@@ -23,0 +25,0 @@ }

src/util/withAlphaVariable.js

@@ -24,3 +24,3 @@ import { parseColor, formatColor } from './color'
         properties.map((p) => {
-          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })]
+          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable}, 1)` })]
         })
@@ -46,3 +46,3 @@ ),
       properties.map((p) => {
-        return [p, formatColor({ ...parsed, alpha: `var(${variable})` })]
+        return [p, formatColor({ ...parsed, alpha: `var(${variable}, 1)` })]
       })
@@ -49,0 +49,0 @@ ),

types/config.d.ts

@@ -210,3 +210,3 @@ import type { CorePluginList } from './generated/corePluginList'
   opacity: ResolvableTo<KeyValuePair>
-  boxShadow: ResolvableTo<KeyValuePair>
+  boxShadow: ResolvableTo<KeyValuePair<string, string | string[]>>
   boxShadowColor: ThemeConfig['colors']
@@ -213,0 +213,0 @@ outlineWidth: ResolvableTo<KeyValuePair>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5585032

increased by1.96%

Lines of code

32812

increased by0.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedchokidar@^3.6.0

• Updatedfast-glob@^3.3.2

• Updatedjiti@^1.21.6

• Updatedmicromatch@^4.0.8

• Updatedpicocolors@^1.1.1

• Updatedpostcss@^8.4.47

• Updatedpostcss-load-config@^4.0.2

• Updatedpostcss-nested@^6.2.0

• Updatedpostcss-selector-parser@^6.1.2

• Updatedresolve@^1.22.8

• Updatedsucrase@^3.35.0