Rewrite replaceSelector using postcss-selector-parser

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,43 @@ 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]
 
-    return extractSelectors(selector)
-      .map((s) => {
-        let replaced = []
+    selectorList.each((sel) => {
+      /** @type {Set<import('postcss-selector-parser').Selector>} */
+      let replaced = new Set()
 
-        for (let utilitySelector of utilitySelectorsList) {
-          let replacedSelector = utilitySelector
-          for (const needle of needles) {
-            replacedSelector = replacedSelector.replace(needle, s)
-          }
-          if (replacedSelector === utilitySelector) {
-            continue
+      utilitySelectorsList.each((utilitySelector) => {
+        utilitySelector = utilitySelector.clone()
+
+        utilitySelector.walkClasses((node) => {
+          if (node.value !== candidateClass.value) {
+            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)
+        })
       })
-      .join(', ')
+
+      sel.replaceWith(...replaced)
+    })
+
+    return selectorList.toString()
   }
 
   let perParentApplies = new Map()

tests/apply.test.js

@@ -1584,3 +1584,49 @@ it('can apply user utilities that start with a dash', async () => {
     }
   `)
 })
+
+it('can produce selectors that replace multiple instances of the same class', async () => {
+  let config = {
+    content: [{ raw: html`<div class="foo-1 -foo-1 new-class"></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    .foo + .foo {
+      color: blue;
+    }
+    .bar + .bar {
+      color: fuchsia;
+    }
+    header {
+      @apply foo;
+    }
+    main {
+      @apply foo bar;
+    }
+    footer {
+      @apply bar;
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .foo + .foo {
+      color: blue;
+    }
+    .bar + .bar {
+      color: fuchsia;
+    }
+    header + header {
+      color: blue;
+    }
+    main + main {
+      color: blue;
+      color: fuchsia;
+    }
+    footer + footer {
+      color: fuchsia;
+    }
+  `)
+})