Skip to content

Commit

Permalink
Fix @apply order regression (in addComponents, addUtilities, ..…
Browse files Browse the repository at this point in the history
….) (#7232)

* ensure to partition `@apply` rules generated by addComponents, addUtilities, ...

* update changelog
  • Loading branch information
RobinMalfait authored Jan 27, 2022
1 parent 74997f1 commit 1868eb6
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 1 deletion.
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Fixed

- Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))

## [3.0.17] - 2022-01-26

Expand Down
6 changes: 6 additions & 0 deletions src/processTailwindFeatures.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ export default function processTailwindFeatures(setupContext) {
let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)

detectNesting()(root, result)

// Partition apply rules that are found in the css
// itself.
partitionApplyAtRules()(root, result)

let context = setupContext({
Expand All @@ -42,6 +45,9 @@ export default function processTailwindFeatures(setupContext) {
issueFlagNotices(context.tailwindConfig)

expandTailwindAtRules(context)(root, result)
// Partition apply rules that are generated by
// addComponents, addUtilities and so on.
partitionApplyAtRules()(root, result)
expandApplyAtRules(context)(root, result)
evaluateTailwindFunctions(context)(root, result)
substituteScreenAtRules(context)(root, result)
Expand Down
33 changes: 33 additions & 0 deletions tests/apply.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1253,3 +1253,36 @@ it('apply partitioning works with media queries', async () => {
${defaults}
`)
})

it('should be possible to use apply in plugins', async () => {
let config = {
content: [{ raw: html`<div class="a b"></div>` }],
corePlugins: { preflight: false },
plugins: [
function ({ addComponents }) {
addComponents({
'.a': {
color: 'red',
},
'.b': {
'@apply a': {},
color: 'blue',
},
})
},
],
}

return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.a {
color: red;
}
.b {
color: red;
color: blue;
}
`)
})
})

0 comments on commit 1868eb6

Please sign in to comment.