mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Ensure all selectors in a rule receive important scope
This commit is contained in:
parent
19c74b106a
commit
763ee71033
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user