tailwindcss 3.2.2 → 3.2.4

package/CHANGELOG.md

@@ -9,6 +9,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.2.4] - 2022-11-11
+
+### Added
+
+- Add `blocklist` option to prevent generating unwanted CSS ([#9812](https://github.com/tailwindlabs/tailwindcss/pull/9812))
+
+### Fixed
+
+- Fix watching of files on Linux when renames are involved ([#9796](https://github.com/tailwindlabs/tailwindcss/pull/9796))
+- Make sure errors are always displayed when watching for changes ([#9810](https://github.com/tailwindlabs/tailwindcss/pull/9810))
+
+## [3.2.3] - 2022-11-09
+
+### Fixed
+
+- Fixed use of `raw` content in the CLI ([#9773](https://github.com/tailwindlabs/tailwindcss/pull/9773))
+- Pick up changes from files that are both context and content deps ([#9787](https://github.com/tailwindlabs/tailwindcss/pull/9787))
+- Sort pseudo-elements ONLY after classes when using variants and `@apply` ([#9765](https://github.com/tailwindlabs/tailwindcss/pull/9765))
+- Support important utilities in the safelist (pattern must include a `!`) ([#9791](https://github.com/tailwindlabs/tailwindcss/pull/9791))
+
 ## [3.2.2] - 2022-11-04
 
 ### Fixed
@@ -2101,7 +2121,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.4...HEAD
+[3.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.3...v3.2.4
+[3.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.2...v3.2.3
 [3.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.1...v3.2.2
 [3.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.0...v3.2.1
 [3.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.8...v3.2.0

package/lib/cli/build/plugin.js

@@ -170,9 +170,9 @@ let state = {
         let rawContent = this.config.content.files.filter((file)=>{
             return file !== null && typeof file === "object";
         });
-        for (let { raw: content1 , extension ="html"  } of rawContent){
-            content1.push({
-                content: content1,
+        for (let { raw: htmlContent , extension ="html"  } of rawContent){
+            content.push({
+                content: htmlContent,
                 extension
             });
         }
@@ -311,6 +311,17 @@ async function createProcessor(args, cliConfigPath) {
             let end = process.hrtime.bigint();
             console.error();
             console.error("Done in", (end - start) / BigInt(1e6) + "ms.");
+        }).then(()=>{}, (err)=>{
+            // TODO: If an initial build fails we can't easily pick up any PostCSS dependencies
+            // that were collected before the error occurred
+            // The result is not stored on the error so we have to store it externally
+            // and pull the messages off of it here somehow
+            // This results in a less than ideal DX because the watcher will not pick up
+            // changes to imported CSS if one of them caused an error during the initial build
+            // If you fix it and then save the main CSS file so there's no error
+            // The watcher will start watching the imported CSS files and will be
+            // resilient to future errors.
+            console.error(err);
         });
     }
     /**

package/lib/cli/build/watching.js

@@ -70,12 +70,13 @@ function createWatcher(args, { state , rebuild  }) {
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
+   * @param {boolean} skipPendingCheck
    * @returns {Promise<void>}
-   */ function recordChangedFile(file, content = null) {
+   */ function recordChangedFile(file, content = null, skipPendingCheck = false) {
         file = _path.default.resolve(file);
         // Applications like Vim/Neovim fire both rename and change events in succession for atomic writes
         // In that case rebuild has already been queued by rename, so can be skipped in change
-        if (pendingRebuilds.has(file)) {
+        if (pendingRebuilds.has(file) && !skipPendingCheck) {
             return Promise.resolve();
         }
         // Mark that a rebuild of this file is going to happen
@@ -152,8 +153,10 @@ function createWatcher(args, { state , rebuild  }) {
                     return;
                 }
                 // This will push the rebuild onto the chain
+                // We MUST skip the rebuild check here otherwise the rebuild will never happen on Linux
+                // This is because the order of events and timing is different on Linux
                 // @ts-ignore: TypeScript isn't picking up that content is a string here
-                await recordChangedFile(filePath, ()=>content);
+                await recordChangedFile(filePath, ()=>content, true);
             } catch  {
             // If reading the file fails, it's was probably a deleted temporary file
             // So we can ignore it and no rebuild is needed

package/lib/lib/content.js

@@ -160,7 +160,14 @@ function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
     for (let file of files){
         let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity;
         let modified = _fs.default.statSync(file).mtimeMs;
-        if (modified > prevModified) {
+        // This check is intentionally >= because we track the last modified time of context dependencies
+        // earier in the process and we want to make sure we don't miss any changes that happen
+        // when a context dependency is also a content dependency
+        // Ideally, we'd do all this tracking at one time but that is a larger refactor
+        // than we want to commit to right now, so this is a decent compromise.
+        // This should be sufficient because file modification times will be off by at least
+        // 1ms (the precision of fstat in Node) in most cases if they exist and were changed.
+        if (modified >= prevModified) {
             changedFiles.add(file);
             fileModifiedMap.set(file, modified);
         }

package/lib/lib/expandApplyAtRules.js

@@ -330,9 +330,9 @@ function processApply(root, context, localCache) {
                                 return -1;
                             } else if (a.type === "class" && b.type === "tag") {
                                 return 1;
-                            } else if (a.type === "class" && b.type === "pseudo") {
+                            } else if (a.type === "class" && b.type === "pseudo" && b.value.startsWith("::")) {
                                 return -1;
-                            } else if (a.type === "pseudo" && b.type === "class") {
+                            } else if (a.type === "pseudo" && a.value.startsWith("::") && b.type === "class") {
                                 return 1;
                             }
                             return 0;

package/lib/lib/setupContextUtils.js

@@ -799,6 +799,7 @@ function registerPlugins(plugins, context) {
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
             let prefixLength = context.tailwindConfig.prefix.length;
+            let checkImportantUtils = checks.some((check)=>check.pattern.source.includes("!"));
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
@@ -827,6 +828,12 @@ function registerPlugins(plugins, context) {
                             ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`))
                         ];
                     }
+                    if (checkImportantUtils && (options === null || options === void 0 ? void 0 : options.respectImportant)) {
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>"!" + cls)
+                        ];
+                    }
                     return classes;
                 })() : [
                     util
@@ -1091,13 +1098,15 @@ function registerPlugins(plugins, context) {
     markInvalidUtilityCandidate(context, candidate);
 }
 function createContext(tailwindConfig, changedContent = [], root = _postcss.default.root()) {
+    var _blocklist;
     let context = {
         disposables: [],
         ruleCache: new Set(),
         candidateRuleCache: new Map(),
         classCache: new Map(),
         applyClassCache: new Map(),
-        notClassCache: new Set(),
+        // Seed the not class cache with the blocklist (which is only strings)
+        notClassCache: new Set((_blocklist = tailwindConfig.blocklist) !== null && _blocklist !== void 0 ? _blocklist : []),
         postCssNodeCache: new Map(),
         candidateRuleMap: new Map(),
         tailwindConfig,

package/lib/util/formatVariantSelector.js

@@ -78,9 +78,9 @@ function formatVariantSelector(current, ...others) {
             return -1;
         } else if (a.type === "class" && b.type === "tag") {
             return 1;
-        } else if (a.type === "class" && b.type === "pseudo" && b.value !== ":merge") {
+        } else if (a.type === "class" && b.type === "pseudo" && b.value.startsWith("::")) {
             return -1;
-        } else if (a.type === "pseudo" && a.value !== ":merge" && b.type === "class") {
+        } else if (a.type === "pseudo" && a.value.startsWith("::") && b.type === "class") {
             return 1;
         }
         return sel.index(a) - sel.index(b);

package/lib/util/normalizeConfig.js

@@ -162,6 +162,20 @@ function normalizeConfig(config) {
         if (Array.isArray(purge === null || purge === void 0 ? void 0 : (ref = purge.options) === null || ref === void 0 ? void 0 : ref.safelist)) return purge.options.safelist;
         return [];
     })();
+    // Normalize the `blocklist`
+    config.blocklist = (()=>{
+        let { blocklist  } = config;
+        if (Array.isArray(blocklist)) {
+            if (blocklist.every((item)=>typeof item === "string")) {
+                return blocklist;
+            }
+            _log.default.warn("blocklist-invalid", [
+                "The `blocklist` option must be an array of strings.",
+                "https://tailwindcss.com/docs/content-configuration#discarding-classes"
+            ]);
+        }
+        return [];
+    })();
     // Normalize prefix option
     if (typeof config.prefix === "function") {
         _log.default.warn("prefix-function", [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "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.13",
     "cssnano": "^5.1.14",
     "esbuild": "^0.15.12",
-    "eslint": "^8.25.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",

package/src/cli/build/plugin.js

@@ -195,8 +195,8 @@ let state = {
       return file !== null && typeof file === 'object'
     })
 
-    for (let { raw: content, extension = 'html' } of rawContent) {
-      content.push({ content, extension })
+    for (let { raw: htmlContent, extension = 'html' } of rawContent) {
+      content.push({ content: htmlContent, extension })
     }
 
     return content
@@ -364,6 +364,23 @@ export async function createProcessor(args, cliConfigPath) {
         console.error()
         console.error('Done in', (end - start) / BigInt(1e6) + 'ms.')
       })
+      .then(
+        () => {},
+        (err) => {
+          // TODO: If an initial build fails we can't easily pick up any PostCSS dependencies
+          // that were collected before the error occurred
+          // The result is not stored on the error so we have to store it externally
+          // and pull the messages off of it here somehow
+
+          // This results in a less than ideal DX because the watcher will not pick up
+          // changes to imported CSS if one of them caused an error during the initial build
+          // If you fix it and then save the main CSS file so there's no error
+          // The watcher will start watching the imported CSS files and will be
+          // resilient to future errors.
+
+          console.error(err)
+        }
+      )
   }
 
   /**

package/src/cli/build/watching.js

@@ -97,14 +97,15 @@ export function createWatcher(args, { state, rebuild }) {
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
+   * @param {boolean} skipPendingCheck
    * @returns {Promise<void>}
    */
-  function recordChangedFile(file, content = null) {
+  function recordChangedFile(file, content = null, skipPendingCheck = false) {
     file = path.resolve(file)
 
     // Applications like Vim/Neovim fire both rename and change events in succession for atomic writes
     // In that case rebuild has already been queued by rename, so can be skipped in change
-    if (pendingRebuilds.has(file)) {
+    if (pendingRebuilds.has(file) && !skipPendingCheck) {
       return Promise.resolve()
     }
 
@@ -198,8 +199,10 @@ export function createWatcher(args, { state, rebuild }) {
         }
 
         // This will push the rebuild onto the chain
+        // We MUST skip the rebuild check here otherwise the rebuild will never happen on Linux
+        // This is because the order of events and timing is different on Linux
         // @ts-ignore: TypeScript isn't picking up that content is a string here
-        await recordChangedFile(filePath, () => content)
+        await recordChangedFile(filePath, () => content, true)
       } catch {
         // If reading the file fails, it's was probably a deleted temporary file
         // So we can ignore it and no rebuild is needed

package/src/lib/content.js

@@ -196,7 +196,14 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity
     let modified = fs.statSync(file).mtimeMs
 
-    if (modified > prevModified) {
+    // This check is intentionally >= because we track the last modified time of context dependencies
+    // earier in the process and we want to make sure we don't miss any changes that happen
+    // when a context dependency is also a content dependency
+    // Ideally, we'd do all this tracking at one time but that is a larger refactor
+    // than we want to commit to right now, so this is a decent compromise.
+    // This should be sufficient because file modification times will be off by at least
+    // 1ms (the precision of fstat in Node) in most cases if they exist and were changed.
+    if (modified >= prevModified) {
       changedFiles.add(file)
       fileModifiedMap.set(file, modified)
     }

package/src/lib/expandApplyAtRules.js

@@ -370,9 +370,9 @@ function processApply(root, context, localCache) {
                 return -1
               } else if (a.type === 'class' && b.type === 'tag') {
                 return 1
-              } else if (a.type === 'class' && b.type === 'pseudo') {
+              } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
                 return -1
-              } else if (a.type === 'pseudo' && b.type === 'class') {
+              } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
                 return 1
               }
 

package/src/lib/setupContextUtils.js

@@ -825,6 +825,7 @@ function registerPlugins(plugins, context) {
     if (checks.length > 0) {
       let patternMatchingCount = new Map()
       let prefixLength = context.tailwindConfig.prefix.length
+      let checkImportantUtils = checks.some((check) => check.pattern.source.includes('!'))
 
       for (let util of classList) {
         let utils = Array.isArray(util)
@@ -861,6 +862,10 @@ function registerPlugins(plugins, context) {
                 ]
               }
 
+              if (checkImportantUtils && options?.respectImportant) {
+                classes = [...classes, ...classes.map((cls) => '!' + cls)]
+              }
+
               return classes
             })()
           : [util]
@@ -1160,7 +1165,8 @@ export function createContext(tailwindConfig, changedContent = [], root = postcs
     candidateRuleCache: new Map(),
     classCache: new Map(),
     applyClassCache: new Map(),
-    notClassCache: new Set(),
+    // Seed the not class cache with the blocklist (which is only strings)
+    notClassCache: new Set(tailwindConfig.blocklist ?? []),
     postCssNodeCache: new Map(),
     candidateRuleMap: new Map(),
     tailwindConfig,

package/src/util/formatVariantSelector.js

@@ -69,9 +69,9 @@ function resortSelector(sel) {
       return -1
     } else if (a.type === 'class' && b.type === 'tag') {
       return 1
-    } else if (a.type === 'class' && b.type === 'pseudo' && b.value !== ':merge') {
+    } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
       return -1
-    } else if (a.type === 'pseudo' && a.value !== ':merge' && b.type === 'class') {
+    } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
       return 1
     }
 

package/src/util/normalizeConfig.js

@@ -150,6 +150,24 @@ export function normalizeConfig(config) {
     return []
   })()
 
+  // Normalize the `blocklist`
+  config.blocklist = (() => {
+    let { blocklist } = config
+
+    if (Array.isArray(blocklist)) {
+      if (blocklist.every((item) => typeof item === 'string')) {
+        return blocklist
+      }
+
+      log.warn('blocklist-invalid', [
+        'The `blocklist` option must be an array of strings.',
+        'https://tailwindcss.com/docs/content-configuration#discarding-classes',
+      ])
+    }
+
+    return []
+  })()
+
   // Normalize prefix option
   if (typeof config.prefix === 'function') {
     log.warn('prefix-function', [