diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index cba36026f..bbf60f0e1 100644 --- a/src/lib/setupContextUtils.js +++ b/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))] }) } diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js new file mode 100644 index 000000000..8a231ed3a --- /dev/null +++ b/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`
` }], + 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`
` }], + 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; + } + `) + }) +})