tailwindcss 3.2.1 → 3.2.2

package/CHANGELOG.md

@@ -9,6 +9,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.2.2] - 2022-11-04
+
+### Fixed
+
+- Escape special characters in resolved content base paths ([#9650](https://github.com/tailwindlabs/tailwindcss/pull/9650))
+- Don't reuse container for array returning variant functions ([#9644](https://github.com/tailwindlabs/tailwindcss/pull/9644))
+- Exclude non-relevant selectors when generating rules with the important modifier ([#9677](https://github.com/tailwindlabs/tailwindcss/issues/9677))
+- Fix merging of arrays during config resolution ([#9706](https://github.com/tailwindlabs/tailwindcss/issues/9706))
+- Ensure configured `font-feature-settings` are included in Preflight ([#9707](https://github.com/tailwindlabs/tailwindcss/pull/9707))
+- Fix fractional values not being parsed properly inside arbitrary properties ([#9705](https://github.com/tailwindlabs/tailwindcss/pull/9705))
+- Fix incorrect selectors when using `@apply` in selectors with combinators and pseudos ([#9722](https://github.com/tailwindlabs/tailwindcss/pull/9722))
+- Fix cannot read properties of undefined (reading 'modifier') ([#9656](https://github.com/tailwindlabs/tailwindcss/pull/9656), [aa979d6](https://github.com/tailwindlabs/tailwindcss/commit/aa979d645f8bf4108c5fc938d7c0ba085b654c31))
+
 ## [3.2.1] - 2022-10-21
 
 ### Fixed
@@ -2088,7 +2101,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.2...HEAD
+[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
 [3.1.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.7...v3.1.8

package/lib/cli/build/watching.js

@@ -37,22 +37,69 @@ function createWatcher(args, { state , rebuild  }) {
             pollInterval: pollInterval
         } : false
     });
+    // A queue of rebuilds, file reads, etc… to run
     let chain = Promise.resolve();
-    let pendingRebuilds = new Set();
-    let changedContent = [];
+    /**
+   * A list of files that have been changed since the last rebuild
+   *
+   * @type {{file: string, content: () => Promise<string>, extension: string}[]}
+   */ let changedContent = [];
+    /**
+   * A list of files for which a rebuild has already been queued.
+   * This is used to prevent duplicate rebuilds when multiple events are fired for the same file.
+   * The rebuilt file is cleared from this list when it's associated rebuild has _started_
+   * This is because if the file is changed during a rebuild it won't trigger a new rebuild which it should
+   **/ let pendingRebuilds = new Set();
+    let _timer;
+    let _reject;
+    /**
+   * Rebuilds the changed files and resolves when the rebuild is
+   * complete regardless of whether it was successful or not
+   */ async function rebuildAndContinue() {
+        let changes = changedContent.splice(0);
+        // There are no changes to rebuild so we can just do nothing
+        if (changes.length === 0) {
+            return Promise.resolve();
+        }
+        // Clear all pending rebuilds for the about-to-be-built files
+        changes.forEach((change)=>pendingRebuilds.delete(change.file));
+        // Resolve the promise even when the rebuild fails
+        return rebuild(changes).then(()=>{}, ()=>{});
+    }
     /**
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
+   * @returns {Promise<void>}
    */ function recordChangedFile(file, content = null) {
         file = _path.default.resolve(file);
-        content = content !== null && content !== void 0 ? content : async ()=>await _fs.default.promises.readFile(file, "utf8");
+        // 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)) {
+            return Promise.resolve();
+        }
+        // Mark that a rebuild of this file is going to happen
+        // It MUST happen synchronously before the rebuild is queued for this to be effective
+        pendingRebuilds.add(file);
         changedContent.push({
             file,
-            content,
+            content: content !== null && content !== void 0 ? content : ()=>_fs.default.promises.readFile(file, "utf8"),
             extension: _path.default.extname(file).slice(1)
         });
-        chain = chain.then(()=>rebuild(changedContent.splice(0)));
+        if (_timer) {
+            clearTimeout(_timer);
+            _reject();
+        }
+        // If a rebuild is already in progress we don't want to start another one until the 10ms timer has expired
+        chain = chain.then(()=>new Promise((resolve, reject)=>{
+                _timer = setTimeout(resolve, 10);
+                _reject = reject;
+            }));
+        // Resolves once this file has been rebuilt (or the rebuild for this file has failed)
+        // This queues as many rebuilds as there are changed files
+        // But those rebuilds happen after some delay
+        // And will immediately resolve if there are no changes
+        chain = chain.then(rebuildAndContinue, rebuildAndContinue);
         return chain;
     }
     watcher.on("change", (file)=>recordChangedFile(file));
@@ -91,15 +138,30 @@ function createWatcher(args, { state , rebuild  }) {
         if (pendingRebuilds.has(filePath)) {
             return;
         }
+        // We'll go ahead and add the file to the pending rebuilds list here
+        // It'll be removed when the rebuild starts unless the read fails
+        // which will be taken care of as well
         pendingRebuilds.add(filePath);
-        chain = chain.then(async ()=>{
-            let content;
+        async function enqueue() {
             try {
-                content = await (0, _utilsJs.readFileWithRetries)(_path.default.resolve(filePath));
-            } finally{
-                pendingRebuilds.delete(filePath);
+                // We need to read the file as early as possible outside of the chain
+                // because it may be gone by the time we get to it. doing the read
+                // immediately increases the chance that the file is still there
+                let content = await (0, _utilsJs.readFileWithRetries)(_path.default.resolve(filePath));
+                if (content === undefined) {
+                    return;
+                }
+                // This will push the rebuild onto the chain
+                // @ts-ignore: TypeScript isn't picking up that content is a string here
+                await recordChangedFile(filePath, ()=>content);
+            } catch  {
+            // If reading the file fails, it's was probably a deleted temporary file
+            // So we can ignore it and no rebuild is needed
             }
-            return recordChangedFile(filePath, ()=>content);
+        }
+        enqueue().then(()=>{
+            // If the file read fails we still need to make sure the file isn't stuck in the pending rebuilds list
+            pendingRebuilds.delete(filePath);
         });
     });
     return {

package/lib/css/preflight.css

@@ -22,6 +22,7 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
 */
 
 html {
@@ -30,6 +31,7 @@ html {
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
 }
 
 /*

package/lib/lib/content.js

@@ -73,13 +73,16 @@ function parseCandidateFiles(context, tailwindConfig) {
  * @param {ContentPath} contentPath
  * @returns {ContentPath}
  */ function resolveGlobPattern(contentPath) {
-    contentPath.pattern = contentPath.glob ? `${contentPath.base}/${contentPath.glob}` : contentPath.base;
-    contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern;
     // This is required for Windows support to properly pick up Glob paths.
     // Afaik, this technically shouldn't be needed but there's probably
     // some internal, direct path matching with a normalized path in
     // a package which can't handle mixed directory separators
-    contentPath.pattern = (0, _normalizePath.default)(contentPath.pattern);
+    let base = (0, _normalizePath.default)(contentPath.base);
+    // If the user's file path contains any special characters (like parens) for instance fast-glob
+    // is like "OOOH SHINY" and treats them as such. So we have to escape the base path to fix this
+    base = _fastGlob.default.escapePath(base);
+    contentPath.pattern = contentPath.glob ? `${base}/${contentPath.glob}` : base;
+    contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern;
     return contentPath;
 }
 /**

package/lib/lib/defaultExtractor.js

@@ -72,7 +72,7 @@ function* buildRegExps(context) {
     ])) : "";
     let utility = _regex.any([
         // Arbitrary properties
-        /\[[^\s:'"`]+:[^\s\]]+\]/,
+        /\[[^\s:'"`]+:[^\s]+\]/,
         // Utilities
         _regex.pattern([
             // Utility Name / Group Name

package/lib/lib/expandApplyAtRules.js

@@ -306,21 +306,40 @@ function processApply(root, context, localCache) {
                     hasReplaced = true;
                 });
             });
-            // Sort tag names before class names
+            // Sort tag names before class names (but only sort each group (separated by a combinator)
+            // separately and not in total)
             // This happens when replacing `.bar` in `.foo.bar` with a tag like `section`
-            for (const sel1 of replaced){
-                sel1.sort((a, b)=>{
-                    if (a.type === "tag" && b.type === "class") {
-                        return -1;
-                    } else if (a.type === "class" && b.type === "tag") {
-                        return 1;
-                    } else if (a.type === "class" && b.type === "pseudo") {
-                        return -1;
-                    } else if (a.type === "pseudo" && b.type === "class") {
-                        return 1;
+            for (let sel1 of replaced){
+                let groups = [
+                    []
+                ];
+                for (let node of sel1.nodes){
+                    if (node.type === "combinator") {
+                        groups.push(node);
+                        groups.push([]);
+                    } else {
+                        let last = groups[groups.length - 1];
+                        last.push(node);
                     }
-                    return sel1.index(a) - sel1.index(b);
-                });
+                }
+                sel1.nodes = [];
+                for (let group of groups){
+                    if (Array.isArray(group)) {
+                        group.sort((a, b)=>{
+                            if (a.type === "tag" && b.type === "class") {
+                                return -1;
+                            } else if (a.type === "class" && b.type === "tag") {
+                                return 1;
+                            } else if (a.type === "class" && b.type === "pseudo") {
+                                return -1;
+                            } else if (a.type === "pseudo" && b.type === "class") {
+                                return 1;
+                            }
+                            return 0;
+                        });
+                    }
+                    sel1.nodes = sel1.nodes.concat(group);
+                }
             }
             sel.replaceWith(...replaced);
         });
@@ -340,7 +359,7 @@ function processApply(root, context, localCache) {
         let [applyCandidates1, important] = extractApplyCandidates(apply.params);
         if (apply.parent.type === "atrule") {
             if (apply.parent.name === "screen") {
-                const screenType = apply.parent.params;
+                let screenType = apply.parent.params;
                 throw apply.error(`@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates1.map((c)=>`${screenType}:${c}`).join(" ")} instead.`);
             }
             throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
@@ -364,7 +383,7 @@ function processApply(root, context, localCache) {
             ]);
         }
     }
-    for (const [parent, [candidates1, atApplySource]] of perParentApplies){
+    for (let [parent, [candidates1, atApplySource]] of perParentApplies){
         let siblings = [];
         for (let [applyCandidate1, important1, rules1] of candidates1){
             let potentialApplyCandidates = [

package/lib/lib/expandTailwindAtRules.js

@@ -169,7 +169,7 @@ function expandTailwindAtRules(context) {
             ], context);
         }
         env.DEBUG && console.timeEnd("Build stylesheet");
-        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
+        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes  } = context.stylesheetCache;
         // ---
         // Replace any Tailwind directives with generated CSS
         if (layerNodes.base) {

package/lib/lib/generateRules.js

@@ -162,7 +162,7 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
-            r.selector = (0, _pluginUtils.updateAllClasses)(r.selector, (className)=>{
+            r.selector = (0, _pluginUtils.updateAllClasses)((0, _pluginUtils.filterSelectorsForClass)(r.selector, classCandidate), (className)=>{
                 if (className === classCandidate) {
                     return `!${className}`;
                 }
@@ -256,7 +256,7 @@ function applyVariant(variant, matches, context) {
                 ]
             });
             for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples){
-                let clone = containerFromArray !== null && containerFromArray !== void 0 ? containerFromArray : container.clone();
+                let clone = (containerFromArray !== null && containerFromArray !== void 0 ? containerFromArray : container).clone();
                 let collectedFormats = [];
                 function prepareBackup() {
                     // Already prepared, chicken out

package/lib/lib/setupContextUtils.js

@@ -533,7 +533,7 @@ function parseVariant(variant) {
             variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
                 if (typeof variantFunction !== "string") {
                     // Safelist public API functions
-                    return (api)=>{
+                    return (api = {})=>{
                         let { args , modifySelectors , container , separator , wrap , format  } = api;
                         let result = variantFunction(Object.assign({
                             modifySelectors,
@@ -574,12 +574,14 @@ function parseVariant(variant) {
             var ref1;
             for (let [key, value] of Object.entries((ref1 = options === null || options === void 0 ? void 0 : options.values) !== null && ref1 !== void 0 ? ref1 : {})){
                 if (key === "DEFAULT") continue;
-                api.addVariant(isSpecial ? `${variant}${key}` : `${variant}-${key}`, ({ args , container  })=>variantFn(value, modifiersEnabled ? {
-                        modifier: args.modifier,
+                api.addVariant(isSpecial ? `${variant}${key}` : `${variant}-${key}`, ({ args , container  })=>{
+                    return variantFn(value, modifiersEnabled ? {
+                        modifier: args === null || args === void 0 ? void 0 : args.modifier,
                         container
                     } : {
                         container
-                    }), {
+                    });
+                }, {
                     ...options,
                     value,
                     id,
@@ -590,11 +592,13 @@ function parseVariant(variant) {
             var ref2;
             let hasDefault = "DEFAULT" in ((ref2 = options === null || options === void 0 ? void 0 : options.values) !== null && ref2 !== void 0 ? ref2 : {});
             api.addVariant(variant, ({ args , container  })=>{
-                if (args.value === _sharedState.NONE && !hasDefault) {
+                if ((args === null || args === void 0 ? void 0 : args.value) === _sharedState.NONE && !hasDefault) {
                     return null;
                 }
-                return variantFn(args.value === _sharedState.NONE ? options.values.DEFAULT : args.value, modifiersEnabled ? {
-                    modifier: args.modifier,
+                var // (JetBrains) plugins.
+                ref;
+                return variantFn((args === null || args === void 0 ? void 0 : args.value) === _sharedState.NONE ? options.values.DEFAULT : (ref = args === null || args === void 0 ? void 0 : args.value) !== null && ref !== void 0 ? ref : typeof args === "string" ? args : "", modifiersEnabled ? {
+                    modifier: args === null || args === void 0 ? void 0 : args.modifier,
                     container
                 } : {
                     container

package/lib/util/formatVariantSelector.js

@@ -114,7 +114,7 @@ function finalizeSelector(format, { selector , candidate , context , isArbitrary
 //           │  │     │            ╰── We will not split here
 //           ╰──┴─────┴─────────────── We will split here
 //
-base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref1 !== void 0 ? ref1 : ":"}(?![^[]*\\])`)).pop() ,  }) {
+base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref1 !== void 0 ? ref1 : ":"}(?![^[]*\\])`)).pop()  }) {
     var ref2;
     let ast = (0, _postcssSelectorParser.default)().astSync(selector);
     // We explicitly DO NOT prefix classes in arbitrary variants

package/lib/util/pluginUtils.js

@@ -10,6 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     updateAllClasses: ()=>updateAllClasses,
+    filterSelectorsForClass: ()=>filterSelectorsForClass,
     asValue: ()=>asValue,
     parseColorFormat: ()=>parseColorFormat,
     asColor: ()=>asColor,
@@ -43,6 +44,18 @@ function updateAllClasses(selectors, updateClass) {
     let result = parser.processSync(selectors);
     return result;
 }
+function filterSelectorsForClass(selectors, classCandidate) {
+    let parser = (0, _postcssSelectorParser.default)((selectors)=>{
+        selectors.each((sel)=>{
+            const containsClass = sel.nodes.some((node)=>node.type === "class" && node.value === classCandidate);
+            if (!containsClass) {
+                sel.remove();
+            }
+        });
+    });
+    let result = parser.processSync(selectors);
+    return result;
+}
 function resolveArbitraryValue(modifier, validate) {
     if (!isArbitraryValue(modifier)) {
         return undefined;

package/lib/util/resolveConfig.js

@@ -27,16 +27,13 @@ function _interopRequireDefault(obj) {
 function isFunction(input) {
     return typeof input === "function";
 }
-function isObject(input) {
-    return typeof input === "object" && input !== null;
-}
 function mergeWith(target, ...sources) {
     let customizer = sources.pop();
     for (let source of sources){
         for(let k in source){
             let merged = customizer(target[k], source[k]);
             if (merged === undefined) {
-                if (isObject(target[k]) && isObject(source[k])) {
+                if ((0, _isPlainObject.default)(target[k]) && (0, _isPlainObject.default)(source[k])) {
                     target[k] = mergeWith({}, target[k], source[k], customizer);
                 } else {
                     target[k] = source[k];
@@ -101,11 +98,11 @@ function mergeThemes(themes) {
 }
 function mergeExtensionCustomizer(merged, value) {
     // When we have an array of objects, we do want to merge it
-    if (Array.isArray(merged) && isObject(merged[0])) {
+    if (Array.isArray(merged) && (0, _isPlainObject.default)(merged[0])) {
         return merged.concat(value);
     }
     // When the incoming value is an array, and the existing config is an object, prepend the existing object
-    if (Array.isArray(value) && isObject(value[0]) && isObject(merged)) {
+    if (Array.isArray(value) && (0, _isPlainObject.default)(value[0]) && (0, _isPlainObject.default)(merged)) {
         return [
             merged,
             ...value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,12 +44,12 @@
   ],
   "devDependencies": {
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.3.4",
+    "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@swc/register": "^0.1.10",
-    "autoprefixer": "^10.4.12",
-    "cssnano": "^5.1.13",
-    "esbuild": "^0.15.10",
+    "autoprefixer": "^10.4.13",
+    "cssnano": "^5.1.14",
+    "esbuild": "^0.15.12",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -77,7 +77,7 @@
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.17",
+    "postcss": "^8.4.18",
     "postcss-import": "^14.1.0",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.4",