Ensure full node stays, if only a partial is used (#5617)

Author: RobinMalfait

src/lib/setupContextUtils.js

@@ -59,11 +59,22 @@ function getClasses(selector) {
 }
 
 function extractCandidates(node) {
-  let classes = node.type === 'rule' ? getClasses(node.selector) : []
+  let classes = []
+
+  if (node.type === 'rule') {
+    for (let selector of node.selectors) {
+      let classCandidates = getClasses(selector)
+      // At least one of the selectors contains non-"on-demandable" candidates.
+      if (classCandidates.length === 0) return []
+
+      classes = [...classes, ...classCandidates]
+    }
+    return classes
+  }
 
   if (node.type === 'atrule') {
     node.walkRules((rule) => {
-      classes = [...classes, ...getClasses(rule.selector)]
+      classes = [...classes, ...rule.selectors.flatMap((selector) => getClasses(selector))]
     })
   }
 

tests/combined-selectors.test.js

@@ -0,0 +1,79 @@
+import { run, html, css } from './util/run'
+
+it('should generate the partial selector, if only a partial is used (base layer)', () => {
+  let config = {
+    content: [{ raw: html`<div></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+
+    @layer base {
+      :root {
+        font-weight: bold;
+      }
+
+      /* --- */
+
+      :root,
+      .a {
+        color: black;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      :root {
+        font-weight: bold;
+      }
+
+      /* --- */
+
+      :root,
+      .a {
+        color: black;
+      }
+    `)
+  })
+})
+
+it('should generate the partial selector, if only a partial is used (utilities layer)', () => {
+  let config = {
+    content: [{ raw: html`<div class="a"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+
+    @layer utilities {
+      :root {
+        font-weight: bold;
+      }
+
+      /* --- */
+
+      :root,
+      .a {
+        color: black;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      :root {
+        font-weight: bold;
+      }
+
+      /* --- */
+
+      :root,
+      .a {
+        color: black;
+      }
+    `)
+  })
+})