Ensure all selectors in a rule receive important scope

This commit is contained in:
Adam Wathan 2019-08-06 08:14:16 -04:00
parent 19c74b106a
commit 763ee71033
2 changed files with 30 additions and 4 deletions

View File

@ -877,7 +877,7 @@ test('plugins respect prefix and important options by default when adding utilit
`)
})
test('plugins respect prefix and important (selector) options by default when adding utilities', () => {
test('when important is a selector it is used to scope utilities instead of adding !important', () => {
const { utilities } = processPlugins(
[
function({ addUtilities }) {
@ -889,14 +889,38 @@ test('plugins respect prefix and important (selector) options by default when ad
},
],
makeConfig({
prefix: 'tw-',
important: '#app',
})
)
expect(css(utilities)).toMatchCss(`
@variants {
#app .tw-rotate-90 {
#app .rotate-90 {
transform: rotate(90deg)
}
}
`)
})
test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
const { utilities } = processPlugins(
[
function({ addUtilities }) {
addUtilities({
'.rotate-90, .rotate-1\\/4': {
transform: 'rotate(90deg)',
},
})
},
],
makeConfig({
important: '#app',
})
)
expect(css(utilities)).toMatchCss(`
@variants {
#app .rotate-90, #app .rotate-1\\/4 {
transform: rotate(90deg)
}
}

View File

@ -59,7 +59,9 @@ export default function(plugins, config) {
if (config.important === true) {
rule.walkDecls(decl => (decl.important = true))
} else if (typeof config.important === 'string') {
rule.selector = increaseSpecificity(config.important, rule.selector)
rule.selectors = rule.selectors.map(selector => {
return increaseSpecificity(config.important, selector)
})
}
}
})