Skip to content

Commit

Permalink
Allow all classes for @apply
Browse files Browse the repository at this point in the history
  • Loading branch information
garymathews committed Dec 18, 2021
1 parent 00f60e6 commit 21413ea
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 0 deletions.
21 changes: 21 additions & 0 deletions src/lib/expandApplyAtRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,27 @@ function processApply(root, context) {
// Fill up some caches!
let applyClassCache = buildApplyCache(applyCandidates, context)

// Collect all classes for @apply rules.
root.walk((node) => {
if (node.selector && node.selector[0] === '.') {
const name = node.selector.substring(1)

// Ignore unused candidates.
if (applyCandidates.has(name) && !applyClassCache.has(name)) {
applyClassCache.set(name, [
[
{
sort: BigInt(context.layerOrder.user),
layer: 'user',
options: {},
},
node,
],
])
}
}
})

/**
* When we have an apply like this:
*
Expand Down
37 changes: 37 additions & 0 deletions tests/apply.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -616,3 +616,40 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules
`)
})
})

it('should pickup all classes', () => {
let config = {
content: [{ raw: html`<div class="foo"></div>` }],
plugins: [],
}

let input = css`
.bop {
color: red;
}
.bar {
background-color: blue;
}
.foo {
@apply absolute bar bop;
}
`

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.bop {
color: red;
}
.bar {
background-color: blue;
}
.foo {
position: absolute;
background-color: blue;
color: red;
}
`)
})
})

0 comments on commit 21413ea

Please sign in to comment.