archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix issue where couldn't apply variant classes to rule with multiple selectors

Browse Source
This commit is contained in:
Adam Wathan 2020-08-20 16:29:07 -04:00
parent 2903811767
commit 86288cd90b
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
__tests__/applyComplexClasses.test.js
View File

@ -848,3 +848,35 @@ test('you can apply utility classes when a selector is used for the important op
expect(result.warnings().length).toBe(0)
})
})
test('you can apply classes to a rule with multiple selectors', () => {
const input = `
@supports (display: grid) {
.foo, h1 > .bar * {
@apply float-left opacity-50 hover:opacity-100 md:float-right;
}
}
`
const expected = `
@supports (display: grid) {
.foo, h1 > .bar * {
float: left;
opacity: 0.5;
}
.foo:hover, h1 > .bar *:hover {
opacity: 1;
}
@media (min-width: 768px) {
.foo, h1 > .bar * {
float: right;
}
}
}
`
return run(input).then(result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
})

12
src/flagged/applyComplexClasses.js
View File

@ -1,4 +1,4 @@
import _ from 'lodash'
import _, { replace } from 'lodash'
import selectorParser from 'postcss-selector-parser'
import postcss from 'postcss'
import substituteTailwindAtRules from '../lib/substituteTailwindAtRules'
@ -39,7 +39,7 @@ const tailwindApplyPlaceholder = selectorParser.attribute({
attribute: '__TAILWIND-APPLY-PLACEHOLDER__',
})
function generateRulesFromApply({ rule, utilityName: className, classPosition }, replaceWith) {
function generateRulesFromApply({ rule, utilityName: className, classPosition }, replaceWiths) {
const parser = selectorParser(selectors => {
let i = 0
selectors.walkClasses(c => {
@ -49,11 +49,13 @@ function generateRulesFromApply({ rule, utilityName: className, classPosition },
})
})
const processedSelectors = rule.selectors.map(selector => {
const processedSelectors = _.flatMap(rule.selectors, selector => {
// You could argue we should make this replacement at the AST level, but if we believe
// the placeholder string is safe from collisions then it is safe to do this is a simple
// string replacement, and much, much faster.
return parser.processSync(selector).replace('[__TAILWIND-APPLY-PLACEHOLDER__]', replaceWith)
return replaceWiths.map(replaceWith =>
parser.processSync(selector).replace('[__TAILWIND-APPLY-PLACEHOLDER__]', replaceWith)
)
})
const cloned = rule.clone()
@ -242,7 +244,7 @@ function processApplyAtRules(css, lookupTree, config) {
// Get new rules with the utility portion of the selector replaced with the new selector
const rulesToInsert = [
...applys.map(applyUtility => {
return generateRulesFromApply(applyUtility, rule.selector)
return generateRulesFromApply(applyUtility, rule.selectors)
}),
afterRule,
]