Use :is to make important selector option insensitive to DOM order

src/lib/expandApplyAtRules.js

@@ -548,14 +548,14 @@ function processApply(root, context, localCache) {
 
             let parentSelector =
               isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0
-                ? parent.selector.slice(importantSelector.length)
+                ? parent.selector.slice(importantSelector.length + 5 /* ' is:('.length */, -1)
                 : parent.selector
 
             rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
 
             // And then re-add it if it was removed
             if (importantSelector && parentSelector !== parent.selector) {
-              rule.selector = `${importantSelector} ${rule.selector}`
+              rule.selector = `${importantSelector} :is(${rule.selector})`
             }
 
             rule.walkDecls((d) => {

src/lib/generateRules.js

@@ -868,7 +868,7 @@ function getImportantStrategy(important) {
       }
 
       rule.selectors = rule.selectors.map((selector) => {
-        return `${important} ${selector}`
+        return `${important} :is(${selector})`
       })
     }
   }

tests/apply.test.js

@@ -2120,10 +2120,10 @@ crosscheck(({ stable, oxide }) => {
     let result = await run(input, config)
 
     expect(result.css).toMatchFormattedCss(css`
-      #myselector .custom-utility {
+      #myselector :is(.custom-utility) {
         font-weight: 400;
       }
-      #myselector .group:hover .custom-utility {
+      #myselector :is(.group:hover .custom-utility) {
         text-decoration-line: underline;
       }
     `)

tests/experimental.test.js

@@ -176,15 +176,15 @@ crosscheck(() => {
           --tw-shadow: 0 0 #0000;
           --tw-shadow-colored: 0 0 #0000;
         }
-        #app .resize {
+        #app :is(.resize) {
           resize: both;
         }
-        #app .divide-y > :not([hidden]) ~ :not([hidden]) {
+        #app :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
           --tw-divide-y-reverse: 0;
           border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
           border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
         }
-        #app .shadow {
+        #app :is(.shadow) {
           --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
           --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
             0 1px 2px -1px var(--tw-shadow-color);

tests/important-selector.test.js

@@ -122,31 +122,31 @@ crosscheck(() => {
             transform: rotate(360deg);
           }
         }
-        #app .animate-spin {
+        #app :is(.animate-spin) {
           animation: 1s linear infinite spin;
         }
-        #app .font-bold {
+        #app :is(.font-bold) {
           font-weight: 700;
         }
         .custom-util {
           button: no;
         }
-        #app .group:hover .group-hover\:focus-within\:text-left:focus-within {
+        #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) {
           text-align: left;
         }
-        #app :is([dir='rtl'] .rtl\:active\:text-center:active) {
+        #app :is(:is([dir='rtl'] .rtl\:active\:text-center:active)) {
           text-align: center;
         }
         @media (prefers-reduced-motion: no-preference) {
-          #app .motion-safe\:hover\:text-center:hover {
+          #app :is(.motion-safe\:hover\:text-center:hover) {
             text-align: center;
           }
         }
-        #app :is(.dark .dark\:focus\:text-left:focus) {
+        #app :is(:is(.dark .dark\:focus\:text-left:focus)) {
           text-align: left;
         }
         @media (min-width: 768px) {
-          #app .md\:hover\:text-right:hover {
+          #app :is(.md\:hover\:text-right:hover) {
             text-align: right;
           }
         }