tailwindcss 0.0.0-oxide-insiders.66c640b → 0.0.0-oxide-insiders.89fe09b

package/lib/lib/generateRules.js

@@ -162,12 +162,12 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
-            r.selector = (0, _pluginUtils.updateAllClasses)((0, _pluginUtils.filterSelectorsForClass)(r.selector, classCandidate), (className)=>{
-                if (className === classCandidate) {
-                    return `!${className}`;
-                }
-                return className;
-            });
+            let ast = (0, _postcssSelectorParser.default)().astSync(r.selector);
+            // Remove extraneous selectors that do not include the base candidate
+            ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));
+            // Update all instances of the base candidate to include the important marker
+            (0, _pluginUtils.updateAllClasses)(ast, (className)=>className === classCandidate ? `!${className}` : className);
+            r.selector = ast.toString();
             r.walkDecls((d)=>d.important = true);
         });
         result.push([

package/lib/util/formatVariantSelector.js

@@ -10,6 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     formatVariantSelector: ()=>formatVariantSelector,
+    eliminateIrrelevantSelectors: ()=>eliminateIrrelevantSelectors,
     finalizeSelector: ()=>finalizeSelector,
     handleMergePseudo: ()=>handleMergePseudo
 });
@@ -98,18 +99,7 @@ function formatVariantSelector(formats, { context , candidate  }) {
     });
     return sel;
 }
-/**
- * Remove extraneous selectors that do not include the base class/candidate
- *
- * Example:
- * Given the utility `.a, .b { color: red}`
- * Given the candidate `sm:b`
- *
- * The final selector should be `.sm\:b` and not `.a, .sm\:b`
- *
- * @param {Selector} ast
- * @param {string} base
- */ function eliminateIrrelevantSelectors(sel, base) {
+function eliminateIrrelevantSelectors(sel, base) {
     let hasClassesMatchingCandidate = false;
     sel.walk((child)=>{
         if (child.type === "class" && child.value === base) {

package/lib/util/pluginUtils.js

@@ -10,7 +10,6 @@ function _export(target, all) {
 }
 _export(exports, {
     updateAllClasses: ()=>updateAllClasses,
-    filterSelectorsForClass: ()=>filterSelectorsForClass,
     asValue: ()=>asValue,
     parseColorFormat: ()=>parseColorFormat,
     asColor: ()=>asColor,
@@ -19,7 +18,6 @@ _export(exports, {
     coerceValue: ()=>coerceValue,
     getMatchingTypes: ()=>getMatchingTypes
 });
-const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
 const _escapeCommas = /*#__PURE__*/ _interopRequireDefault(require("./escapeCommas"));
 const _withAlphaVariable = require("./withAlphaVariable");
 const _dataTypes = require("./dataTypes");
@@ -32,29 +30,12 @@ function _interopRequireDefault(obj) {
     };
 }
 function updateAllClasses(selectors, updateClass) {
-    let parser = (0, _postcssSelectorParser.default)((selectors)=>{
-        selectors.walkClasses((sel)=>{
-            let updatedClass = updateClass(sel.value);
-            sel.value = updatedClass;
-            if (sel.raws && sel.raws.value) {
-                sel.raws.value = (0, _escapeCommas.default)(sel.raws.value);
-            }
-        });
-    });
-    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();
-            }
-        });
+    selectors.walkClasses((sel)=>{
+        sel.value = updateClass(sel.value);
+        if (sel.raws && sel.raws.value) {
+            sel.raws.value = (0, _escapeCommas.default)(sel.raws.value);
+        }
     });
-    let result = parser.processSync(selectors);
-    return result;
 }
 function resolveArbitraryValue(modifier, validate) {
     if (!isArbitraryValue(modifier)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.66c640b",
+  "version": "0.0.0-oxide-insiders.89fe09b",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -70,7 +70,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.66c640b",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.89fe09b",
     "arg": "^5.0.2",
     "browserslist": "^4.21.5",
     "chokidar": "^3.5.3",

package/src/lib/generateRules.js

@@ -3,10 +3,14 @@ import selectorParser from 'postcss-selector-parser'
 import parseObjectStyles from '../util/parseObjectStyles'
 import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
-import { updateAllClasses, filterSelectorsForClass, getMatchingTypes } from '../util/pluginUtils'
+import { updateAllClasses, getMatchingTypes } from '../util/pluginUtils'
 import log from '../util/log'
 import * as sharedState from './sharedState'
-import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
+import {
+  formatVariantSelector,
+  finalizeSelector,
+  eliminateIrrelevantSelectors,
+} from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
 import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
@@ -111,22 +115,28 @@ function applyImportant(matches, classCandidate) {
   if (matches.length === 0) {
     return matches
   }
+
   let result = []
 
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
+
     container.walkRules((r) => {
-      r.selector = updateAllClasses(
-        filterSelectorsForClass(r.selector, classCandidate),
-        (className) => {
-          if (className === classCandidate) {
-            return `!${className}`
-          }
-          return className
-        }
+      let ast = selectorParser().astSync(r.selector)
+
+      // Remove extraneous selectors that do not include the base candidate
+      ast.each((sel) => eliminateIrrelevantSelectors(sel, classCandidate))
+
+      // Update all instances of the base candidate to include the important marker
+      updateAllClasses(ast, (className) =>
+        className === classCandidate ? `!${className}` : className
       )
+
+      r.selector = ast.toString()
+
       r.walkDecls((d) => (d.important = true))
     })
+
     result.push([{ ...meta, important: true }, container.nodes[0]])
   }
 

package/src/util/formatVariantSelector.js

@@ -120,7 +120,7 @@ function resortSelector(sel) {
  * @param {Selector} ast
  * @param {string} base
  */
-function eliminateIrrelevantSelectors(sel, base) {
+export function eliminateIrrelevantSelectors(sel, base) {
   let hasClassesMatchingCandidate = false
 
   sel.walk((child) => {

package/src/util/pluginUtils.js

@@ -1,4 +1,3 @@
-import selectorParser from 'postcss-selector-parser'
 import escapeCommas from './escapeCommas'
 import { withAlphaValue } from './withAlphaVariable'
 import {
@@ -21,37 +20,19 @@ import negateValue from './negateValue'
 import { backgroundSize } from './validateFormalSyntax'
 import { flagEnabled } from '../featureFlags.js'
 
+/**
+ * @param {import('postcss-selector-parser').Container} selectors
+ * @param {(className: string) => string} updateClass
+ * @returns {string}
+ */
 export function updateAllClasses(selectors, updateClass) {
-  let parser = selectorParser((selectors) => {
-    selectors.walkClasses((sel) => {
-      let updatedClass = updateClass(sel.value)
-      sel.value = updatedClass
-      if (sel.raws && sel.raws.value) {
-        sel.raws.value = escapeCommas(sel.raws.value)
-      }
-    })
-  })
-
-  let result = parser.processSync(selectors)
+  selectors.walkClasses((sel) => {
+    sel.value = updateClass(sel.value)
 
-  return result
-}
-
-export function filterSelectorsForClass(selectors, classCandidate) {
-  let parser = selectorParser((selectors) => {
-    selectors.each((sel) => {
-      const containsClass = sel.nodes.some(
-        (node) => node.type === 'class' && node.value === classCandidate
-      )
-      if (!containsClass) {
-        sel.remove()
-      }
-    })
+    if (sel.raws && sel.raws.value) {
+      sel.raws.value = escapeCommas(sel.raws.value)
+    }
   })
-
-  let result = parser.processSync(selectors)
-
-  return result
 }
 
 function resolveArbitraryValue(modifier, validate) {