tailwindcss 0.0.0-insiders.bbf2b1b → 0.0.0-insiders.bcf14b1

package/CHANGELOG.md

@@ -9,13 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add support fo configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
+- Add support for configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
 - Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
+- Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
+- Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
 
 ### Fixed
 
 - Use absolute paths when resolving changed files for resilience against working directory changes ([#9032](https://github.com/tailwindlabs/tailwindcss/pull/9032))
 - Fix ring color utility generation when using `respectDefaultRingColorOpacity` ([#9070](https://github.com/tailwindlabs/tailwindcss/pull/9070))
+- Sort tags before classes when `@applying` a selector with joined classes ([#9107](https://github.com/tailwindlabs/tailwindcss/pull/9107))
+- Remove invalid `outline-hidden` utility ([#9147](https://github.com/tailwindlabs/tailwindcss/pull/9147))
+- Honor the `hidden` attribute on elements in preflight ([#9174](https://github.com/tailwindlabs/tailwindcss/pull/9174))
+- Don't stop watching atomically renamed files ([#9173](https://github.com/tailwindlabs/tailwindcss/pull/9173))
+- Re-use existing entries in the rule cache ([#9208](https://github.com/tailwindlabs/tailwindcss/pull/9208))
+- Don't output duplicate utilities ([#9208](https://github.com/tailwindlabs/tailwindcss/pull/9208))
 
 ## [3.1.8] - 2022-08-05
 

package/lib/cli.js

@@ -748,6 +748,10 @@ async function build() {
             ...contextDependencies,
             ...extractFileGlobs(config)
         ], {
+            // Force checking for atomic writes in all situations
+            // This causes chokidar to wait up to 100ms for a file to re-added after it's been unlinked
+            // This only works when watching directories though
+            atomic: true,
             usePolling: shouldPoll,
             interval: shouldPoll ? pollInterval : undefined,
             ignoreInitial: true,
@@ -757,6 +761,7 @@ async function build() {
             } : false
         });
         let chain = Promise.resolve();
+        let pendingRebuilds = new Set();
         watcher.on("change", async (file)=>{
             if (contextDependencies.has(file)) {
                 env.DEBUG && console.time("Resolve config");
@@ -782,6 +787,67 @@ async function build() {
                 });
             }
         });
+        /**
+     * When rapidly saving files atomically a couple of situations can happen:
+     * - The file is missing since the external program has deleted it by the time we've gotten around to reading it from the earlier save.
+     * - The file is being written to by the external program by the time we're going to read it and is thus treated as busy because a lock is held.
+     *
+     * To work around this we retry reading the file a handful of times with a delay between each attempt
+     *
+     * @param {string} path
+     * @param {number} tries
+     * @returns {string}
+     * @throws {Error} If the file is still missing or busy after the specified number of tries
+     */ async function readFileWithRetries(path, tries = 5) {
+            for(let n = 0; n <= tries; n++){
+                try {
+                    return await _fs.default.promises.readFile(path, "utf8");
+                } catch (err) {
+                    if (n !== tries) {
+                        if (err.code === "ENOENT" || err.code === "EBUSY") {
+                            await new Promise((resolve)=>setTimeout(resolve, 10));
+                            continue;
+                        }
+                    }
+                    throw err;
+                }
+            }
+        }
+        // Restore watching any files that are "removed"
+        // This can happen when a file is pseudo-atomically replaced (a copy is created, overwritten, the old one is unlinked, and the new one is renamed)
+        // TODO: An an optimization we should allow removal when the config changes
+        watcher.on("unlink", (file)=>watcher.add(file));
+        // Some applications such as Visual Studio (but not VS Code)
+        // will only fire a rename event for atomic writes and not a change event
+        // This is very likely a chokidar bug but it's one we need to work around
+        // We treat this as a change event and rebuild the CSS
+        watcher.on("raw", (evt, filePath, meta)=>{
+            if (evt !== "rename") {
+                return;
+            }
+            let watchedPath = _path.default.resolve(meta.watchedPath);
+            // Watched path might be the file itself
+            // Or the directory it is in
+            filePath = watchedPath.endsWith(filePath) ? watchedPath : _path.default.resolve(watchedPath, filePath);
+            // Skip since we've already queued a rebuild for this file that hasn't happened yet
+            if (pendingRebuilds.has(filePath)) {
+                return;
+            }
+            pendingRebuilds.add(filePath);
+            chain = chain.then(async ()=>{
+                let content;
+                try {
+                    content = await readFileWithRetries(_path.default.resolve(filePath));
+                } finally{
+                    pendingRebuilds.delete(filePath);
+                }
+                changedContent.push({
+                    content,
+                    extension: _path.default.extname(filePath).slice(1)
+                });
+                await rebuild(config);
+            });
+        });
         watcher.on("add", async (file)=>{
             chain = chain.then(async ()=>{
                 changedContent.push({

package/lib/corePlugins.js

@@ -3182,9 +3182,6 @@ let corePlugins = {
             },
             ".outline-double": {
                 "outline-style": "double"
-            },
-            ".outline-hidden": {
-                "outline-style": "hidden"
             }
         });
     },
@@ -3214,7 +3211,8 @@ let corePlugins = {
             "length",
             "number",
             "percentage"
-        ]
+        ],
+        supportsNegativeValues: true
     }),
     outlineColor: ({ matchUtilities , theme  })=>{
         matchUtilities({

package/lib/css/preflight.css

@@ -358,3 +358,8 @@ video {
   max-width: 100%;
   height: auto;
 }
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}

package/lib/featureFlags.js

@@ -26,7 +26,8 @@ let defaults = {
 let featureFlags = {
     future: [
         "hoverOnlyWhenSupported",
-        "respectDefaultRingColorOpacity"
+        "respectDefaultRingColorOpacity",
+        "disableColorOpacityUtilitiesByDefault", 
     ],
     experimental: [
         "optimizeUniversalDefaults",

package/lib/lib/expandApplyAtRules.js

@@ -41,11 +41,11 @@ function _interopRequireDefault(obj) {
         groups: normalizedGroups
     });
 }
-let selectorExtractor = (0, _postcssSelectorParser.default)((root)=>root.nodes.map((node)=>node.toString()));
+let selectorExtractor = (0, _postcssSelectorParser.default)();
 /**
  * @param {string} ruleSelectors
  */ function extractSelectors(ruleSelectors) {
-    return selectorExtractor.transformSync(ruleSelectors);
+    return selectorExtractor.astSync(ruleSelectors);
 }
 function extractBaseCandidates(candidates, separator) {
     let baseClasses = new Set();
@@ -268,30 +268,64 @@ function processApply(root, context, localCache) {
    * What happens in this function is that we prepend a `.` and escape the candidate.
    * This will result in `.hover\:font-bold`
    * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
-   */ // TODO: Should we use postcss-selector-parser for this instead?
-    function replaceSelector(selector, utilitySelectors, candidate) {
-        let needle = `.${(0, _escapeClassName.default)(candidate)}`;
-        let needles = [
-            ...new Set([
-                needle,
-                needle.replace(/\\2c /g, "\\,")
-            ])
-        ];
+   *
+   * @param {string} selector
+   * @param {string} utilitySelectors
+   * @param {string} candidate
+   */ function replaceSelector(selector, utilitySelectors, candidate) {
+        let selectorList = extractSelectors(selector);
         let utilitySelectorsList = extractSelectors(utilitySelectors);
-        return extractSelectors(selector).map((s)=>{
-            let replaced = [];
-            for (let utilitySelector of utilitySelectorsList){
-                let replacedSelector = utilitySelector;
-                for (const needle of needles){
-                    replacedSelector = replacedSelector.replace(needle, s);
-                }
-                if (replacedSelector === utilitySelector) {
-                    continue;
-                }
-                replaced.push(replacedSelector);
+        let candidateList = extractSelectors(`.${(0, _escapeClassName.default)(candidate)}`);
+        let candidateClass = candidateList.nodes[0].nodes[0];
+        selectorList.each((sel)=>{
+            /** @type {Set<import('postcss-selector-parser').Selector>} */ let replaced = new Set();
+            utilitySelectorsList.each((utilitySelector)=>{
+                let hasReplaced = false;
+                utilitySelector = utilitySelector.clone();
+                utilitySelector.walkClasses((node)=>{
+                    if (node.value !== candidateClass.value) {
+                        return;
+                    }
+                    // Don't replace multiple instances of the same class
+                    // This is theoretically correct but only partially
+                    // We'd need to generate every possible permutation of the replacement
+                    // For example with `.foo + .foo { … }` and `section { @apply foo; }`
+                    // We'd need to generate all of these:
+                    // - `.foo + .foo`
+                    // - `.foo + section`
+                    // - `section + .foo`
+                    // - `section + section`
+                    if (hasReplaced) {
+                        return;
+                    }
+                    // Since you can only `@apply` class names this is sufficient
+                    // We want to replace the matched class name with the selector the user is using
+                    // Ex: Replace `.text-blue-500` with `.foo.bar:is(.something-cool)`
+                    node.replaceWith(...sel.nodes.map((node)=>node.clone()));
+                    // Record that we did something and we want to use this new selector
+                    replaced.add(utilitySelector);
+                    hasReplaced = true;
+                });
+            });
+            // Sort tag names before class names
+            // 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;
+                    }
+                    return sel1.index(a) - sel1.index(b);
+                });
             }
-            return replaced.join(", ");
-        }).join(", ");
+            sel.replaceWith(...replaced);
+        });
+        return selectorList.toString();
     }
     let perParentApplies = new Map();
     // Collect all apply candidates and their rules

package/lib/lib/expandTailwindAtRules.js

@@ -188,14 +188,11 @@ function expandTailwindAtRules(context) {
         // Generate the actual CSS
         let classCacheCount = context.classCache.size;
         env.DEBUG && console.time("Generate rules");
-        let rules = (0, _generateRules.generateRules)(candidates, context);
+        (0, _generateRules.generateRules)(candidates, context);
         env.DEBUG && console.timeEnd("Generate rules");
         // We only ever add to the classCache, so if it didn't grow, there is nothing new.
         env.DEBUG && console.time("Build stylesheet");
         if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-            for (let rule of rules){
-                context.ruleCache.add(rule);
-            }
             context.stylesheetCache = buildStylesheet([
                 ...context.ruleCache
             ], context);

package/lib/lib/generateRules.js

@@ -665,14 +665,39 @@ function* resolveMatches(candidate, context, original = candidate) {
 function inKeyframes(rule) {
     return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
 }
+function getImportantStrategy(important) {
+    if (important === true) {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.walkDecls((d)=>{
+                if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
+                    d.important = true;
+                }
+            });
+        };
+    }
+    if (typeof important === "string") {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.selectors = rule.selectors.map((selector)=>{
+                return `${important} ${selector}`;
+            });
+        };
+    }
+}
 function generateRules(candidates, context) {
     let allRules = [];
+    let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
         if (context.notClassCache.has(candidate)) {
             continue;
         }
-        if (context.classCache.has(candidate)) {
-            allRules.push(context.classCache.get(candidate));
+        if (context.candidateRuleCache.has(candidate)) {
+            allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)));
             continue;
         }
         let matches = Array.from(resolveMatches(candidate, context));
@@ -681,49 +706,30 @@ function generateRules(candidates, context) {
             continue;
         }
         context.classCache.set(candidate, matches);
-        allRules.push(matches);
-    }
-    // Strategy based on `tailwindConfig.important`
-    let strategy = ((important)=>{
-        if (important === true) {
-            return (rule)=>{
-                rule.walkDecls((d)=>{
-                    if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
-                        d.important = true;
-                    }
-                });
-            };
-        }
-        if (typeof important === "string") {
-            return (rule)=>{
-                rule.selectors = rule.selectors.map((selector)=>{
-                    return `${important} ${selector}`;
-                });
-            };
-        }
-    })(context.tailwindConfig.important);
-    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
-        if (options.respectImportant) {
-            if (strategy) {
+        var ref;
+        let rules = (ref = context.candidateRuleCache.get(candidate)) !== null && ref !== void 0 ? ref : new Set();
+        context.candidateRuleCache.set(candidate, rules);
+        for (const match of matches){
+            let [{ sort , layer , options  }, rule] = match;
+            if (options.respectImportant && strategy) {
                 let container = _postcss.default.root({
                     nodes: [
                         rule.clone()
                     ]
                 });
-                container.walkRules((r)=>{
-                    if (inKeyframes(r)) {
-                        return;
-                    }
-                    strategy(r);
-                });
+                container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            let newEntry = [
+                sort | context.layerOrder[layer],
+                rule
+            ];
+            rules.add(newEntry);
+            context.ruleCache.add(newEntry);
+            allRules.push(newEntry);
         }
-        return [
-            sort | context.layerOrder[layer],
-            rule
-        ];
-    });
+    }
+    return allRules;
 }
 function isArbitraryValue(input) {
     return input.startsWith("[") && input.endsWith("]");

package/lib/lib/setupContextUtils.js

@@ -858,6 +858,7 @@ function createContext(tailwindConfig, changedContent = [], root = _postcss.defa
     let context = {
         disposables: [],
         ruleCache: new Set(),
+        candidateRuleCache: new Map(),
         classCache: new Map(),
         applyClassCache: new Map(),
         notClassCache: new Set(),

package/lib/util/getAllConfigs.js

@@ -27,6 +27,16 @@ function getAllConfigs(config) {
                         ...theme("colors")
                     })
             }
+        },
+        disableColorOpacityUtilitiesByDefault: {
+            corePlugins: {
+                backgroundOpacity: false,
+                borderOpacity: false,
+                divideOpacity: false,
+                placeholderOpacity: false,
+                ringOpacity: false,
+                textOpacity: false
+            }
         }
     };
     const experimentals = Object.keys(features).filter((feature)=>(0, _featureFlags.flagEnabled)(config, feature)).map((feature)=>features[feature]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.bbf2b1b",
+  "version": "0.0.0-insiders.bcf14b1",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,13 +43,13 @@
   ],
   "devDependencies": {
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.218",
+    "@swc/core": "^1.2.244",
     "@swc/jest": "^0.2.22",
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.8",
-    "cssnano": "^5.1.12",
+    "cssnano": "^5.1.13",
     "esbuild": "^0.14.54",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",

package/src/cli.js

@@ -843,6 +843,11 @@ async function build() {
     }
 
     watcher = chokidar.watch([...contextDependencies, ...extractFileGlobs(config)], {
+      // Force checking for atomic writes in all situations
+      // This causes chokidar to wait up to 100ms for a file to re-added after it's been unlinked
+      // This only works when watching directories though
+      atomic: true,
+
       usePolling: shouldPoll,
       interval: shouldPoll ? pollInterval : undefined,
       ignoreInitial: true,
@@ -855,6 +860,7 @@ async function build() {
     })
 
     let chain = Promise.resolve()
+    let pendingRebuilds = new Set()
 
     watcher.on('change', async (file) => {
       if (contextDependencies.has(file)) {
@@ -885,6 +891,81 @@ async function build() {
       }
     })
 
+    /**
+     * When rapidly saving files atomically a couple of situations can happen:
+     * - The file is missing since the external program has deleted it by the time we've gotten around to reading it from the earlier save.
+     * - The file is being written to by the external program by the time we're going to read it and is thus treated as busy because a lock is held.
+     *
+     * To work around this we retry reading the file a handful of times with a delay between each attempt
+     *
+     * @param {string} path
+     * @param {number} tries
+     * @returns {string}
+     * @throws {Error} If the file is still missing or busy after the specified number of tries
+     */
+    async function readFileWithRetries(path, tries = 5) {
+      for (let n = 0; n <= tries; n++) {
+        try {
+          return await fs.promises.readFile(path, 'utf8')
+        } catch (err) {
+          if (n !== tries) {
+            if (err.code === 'ENOENT' || err.code === 'EBUSY') {
+              await new Promise((resolve) => setTimeout(resolve, 10))
+
+              continue
+            }
+          }
+
+          throw err
+        }
+      }
+    }
+
+    // Restore watching any files that are "removed"
+    // This can happen when a file is pseudo-atomically replaced (a copy is created, overwritten, the old one is unlinked, and the new one is renamed)
+    // TODO: An an optimization we should allow removal when the config changes
+    watcher.on('unlink', (file) => watcher.add(file))
+
+    // Some applications such as Visual Studio (but not VS Code)
+    // will only fire a rename event for atomic writes and not a change event
+    // This is very likely a chokidar bug but it's one we need to work around
+    // We treat this as a change event and rebuild the CSS
+    watcher.on('raw', (evt, filePath, meta) => {
+      if (evt !== 'rename') {
+        return
+      }
+
+      let watchedPath = path.resolve(meta.watchedPath)
+
+      // Watched path might be the file itself
+      // Or the directory it is in
+      filePath = watchedPath.endsWith(filePath) ? watchedPath : path.resolve(watchedPath, filePath)
+
+      // Skip since we've already queued a rebuild for this file that hasn't happened yet
+      if (pendingRebuilds.has(filePath)) {
+        return
+      }
+
+      pendingRebuilds.add(filePath)
+
+      chain = chain.then(async () => {
+        let content
+
+        try {
+          content = await readFileWithRetries(path.resolve(filePath))
+        } finally {
+          pendingRebuilds.delete(filePath)
+        }
+
+        changedContent.push({
+          content,
+          extension: path.extname(filePath).slice(1),
+        })
+
+        await rebuild(config)
+      })
+    })
+
     watcher.on('add', async (file) => {
       chain = chain.then(async () => {
         changedContent.push({

package/src/corePlugins.js

@@ -1980,7 +1980,6 @@ export let corePlugins = {
       '.outline-dashed': { 'outline-style': 'dashed' },
       '.outline-dotted': { 'outline-style': 'dotted' },
       '.outline-double': { 'outline-style': 'double' },
-      '.outline-hidden': { 'outline-style': 'hidden' },
     })
   },
 
@@ -1990,6 +1989,7 @@ export let corePlugins = {
 
   outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
     type: ['length', 'number', 'percentage'],
+    supportsNegativeValues: true,
   }),
 
   outlineColor: ({ matchUtilities, theme }) => {

package/src/css/preflight.css

@@ -358,3 +358,8 @@ video {
   max-width: 100%;
   height: auto;
 }
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}

package/src/featureFlags.js

@@ -6,7 +6,11 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
+  future: [
+    'hoverOnlyWhenSupported',
+    'respectDefaultRingColorOpacity',
+    'disableColorOpacityUtilitiesByDefault',
+  ],
   experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
 }
 

package/src/lib/expandApplyAtRules.js

@@ -34,13 +34,13 @@ function extractClasses(node) {
   return Object.assign(classes, { groups: normalizedGroups })
 }
 
-let selectorExtractor = parser((root) => root.nodes.map((node) => node.toString()))
+let selectorExtractor = parser()
 
 /**
  * @param {string} ruleSelectors
  */
 function extractSelectors(ruleSelectors) {
-  return selectorExtractor.transformSync(ruleSelectors)
+  return selectorExtractor.astSync(ruleSelectors)
 }
 
 function extractBaseCandidates(candidates, separator) {
@@ -299,30 +299,77 @@ function processApply(root, context, localCache) {
    * What happens in this function is that we prepend a `.` and escape the candidate.
    * This will result in `.hover\:font-bold`
    * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
+   *
+   * @param {string} selector
+   * @param {string} utilitySelectors
+   * @param {string} candidate
    */
-  // TODO: Should we use postcss-selector-parser for this instead?
   function replaceSelector(selector, utilitySelectors, candidate) {
-    let needle = `.${escapeClassName(candidate)}`
-    let needles = [...new Set([needle, needle.replace(/\\2c /g, '\\,')])]
+    let selectorList = extractSelectors(selector)
     let utilitySelectorsList = extractSelectors(utilitySelectors)
+    let candidateList = extractSelectors(`.${escapeClassName(candidate)}`)
+    let candidateClass = candidateList.nodes[0].nodes[0]
+
+    selectorList.each((sel) => {
+      /** @type {Set<import('postcss-selector-parser').Selector>} */
+      let replaced = new Set()
 
-    return extractSelectors(selector)
-      .map((s) => {
-        let replaced = []
+      utilitySelectorsList.each((utilitySelector) => {
+        let hasReplaced = false
+        utilitySelector = utilitySelector.clone()
 
-        for (let utilitySelector of utilitySelectorsList) {
-          let replacedSelector = utilitySelector
-          for (const needle of needles) {
-            replacedSelector = replacedSelector.replace(needle, s)
+        utilitySelector.walkClasses((node) => {
+          if (node.value !== candidateClass.value) {
+            return
           }
-          if (replacedSelector === utilitySelector) {
-            continue
+
+          // Don't replace multiple instances of the same class
+          // This is theoretically correct but only partially
+          // We'd need to generate every possible permutation of the replacement
+          // For example with `.foo + .foo { … }` and `section { @apply foo; }`
+          // We'd need to generate all of these:
+          // - `.foo + .foo`
+          // - `.foo + section`
+          // - `section + .foo`
+          // - `section + section`
+          if (hasReplaced) {
+            return
           }
-          replaced.push(replacedSelector)
-        }
-        return replaced.join(', ')
+
+          // Since you can only `@apply` class names this is sufficient
+          // We want to replace the matched class name with the selector the user is using
+          // Ex: Replace `.text-blue-500` with `.foo.bar:is(.something-cool)`
+          node.replaceWith(...sel.nodes.map((node) => node.clone()))
+
+          // Record that we did something and we want to use this new selector
+          replaced.add(utilitySelector)
+
+          hasReplaced = true
+        })
       })
-      .join(', ')
+
+      // Sort tag names before class names
+      // This happens when replacing `.bar` in `.foo.bar` with a tag like `section`
+      for (const sel of replaced) {
+        sel.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 sel.index(a) - sel.index(b)
+        })
+      }
+
+      sel.replaceWith(...replaced)
+    })
+
+    return selectorList.toString()
   }
 
   let perParentApplies = new Map()

package/src/lib/expandTailwindAtRules.js

@@ -177,16 +177,12 @@ export default function expandTailwindAtRules(context) {
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    let rules = generateRules(candidates, context)
+    generateRules(candidates, context)
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.
     env.DEBUG && console.time('Build stylesheet')
     if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-      for (let rule of rules) {
-        context.ruleCache.add(rule)
-      }
-
       context.stylesheetCache = buildStylesheet([...context.ruleCache], context)
     }
     env.DEBUG && console.timeEnd('Build stylesheet')

package/src/lib/generateRules.js

@@ -649,16 +649,45 @@ function inKeyframes(rule) {
   return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
 }
 
+function getImportantStrategy(important) {
+  if (important === true) {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.walkDecls((d) => {
+        if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
+          d.important = true
+        }
+      })
+    }
+  }
+
+  if (typeof important === 'string') {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.selectors = rule.selectors.map((selector) => {
+        return `${important} ${selector}`
+      })
+    }
+  }
+}
+
 function generateRules(candidates, context) {
   let allRules = []
+  let strategy = getImportantStrategy(context.tailwindConfig.important)
 
   for (let candidate of candidates) {
     if (context.notClassCache.has(candidate)) {
       continue
     }
 
-    if (context.classCache.has(candidate)) {
-      allRules.push(context.classCache.get(candidate))
+    if (context.candidateRuleCache.has(candidate)) {
+      allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)))
       continue
     }
 
@@ -670,47 +699,27 @@ function generateRules(candidates, context) {
     }
 
     context.classCache.set(candidate, matches)
-    allRules.push(matches)
-  }
 
-  // Strategy based on `tailwindConfig.important`
-  let strategy = ((important) => {
-    if (important === true) {
-      return (rule) => {
-        rule.walkDecls((d) => {
-          if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
-            d.important = true
-          }
-        })
-      }
-    }
+    let rules = context.candidateRuleCache.get(candidate) ?? new Set()
+    context.candidateRuleCache.set(candidate, rules)
 
-    if (typeof important === 'string') {
-      return (rule) => {
-        rule.selectors = rule.selectors.map((selector) => {
-          return `${important} ${selector}`
-        })
-      }
-    }
-  })(context.tailwindConfig.important)
+    for (const match of matches) {
+      let [{ sort, layer, options }, rule] = match
 
-  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
-    if (options.respectImportant) {
-      if (strategy) {
+      if (options.respectImportant && strategy) {
         let container = postcss.root({ nodes: [rule.clone()] })
-        container.walkRules((r) => {
-          if (inKeyframes(r)) {
-            return
-          }
-
-          strategy(r)
-        })
+        container.walkRules(strategy)
         rule = container.nodes[0]
       }
+
+      let newEntry = [sort | context.layerOrder[layer], rule]
+      rules.add(newEntry)
+      context.ruleCache.add(newEntry)
+      allRules.push(newEntry)
     }
+  }
 
-    return [sort | context.layerOrder[layer], rule]
-  })
+  return allRules
 }
 
 function isArbitraryValue(input) {

package/src/lib/setupContextUtils.js

@@ -873,6 +873,7 @@ export function createContext(tailwindConfig, changedContent = [], root = postcs
   let context = {
     disposables: [],
     ruleCache: new Set(),
+    candidateRuleCache: new Map(),
     classCache: new Map(),
     applyClassCache: new Map(),
     notClassCache: new Set(),

package/src/util/getAllConfigs.js

@@ -17,6 +17,17 @@ export default function getAllConfigs(config) {
         }),
       },
     },
+
+    disableColorOpacityUtilitiesByDefault: {
+      corePlugins: {
+        backgroundOpacity: false,
+        borderOpacity: false,
+        divideOpacity: false,
+        placeholderOpacity: false,
+        ringOpacity: false,
+        textOpacity: false,
+      },
+    },
   }
 
   const experimentals = Object.keys(features)

package/types/config.d.ts

@@ -49,7 +49,7 @@ type SafelistConfig =
   | string[]
   | {
       pattern: RegExp
-      variants: string[]
+      variants?: string[]
     }[]
 
 // Presets related config
@@ -153,7 +153,14 @@ interface ThemeConfig {
   objectPosition: ResolvableTo<KeyValuePair>
   padding: ThemeConfig['spacing']
   textIndent: ThemeConfig['spacing']
-  fontFamily: ResolvableTo<KeyValuePair<string, string[]>>
+  fontFamily: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | string[]
+      | [fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string }>]
+    >
+  >
   fontSize: ResolvableTo<
     KeyValuePair<
       string,