wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Only add ! to selector class matching template candidate (#7664)

Browse source 
* Only add `!` to selector class matching template candidate

Fixes #7226.

Before this PR, if you had a class like:

```css
.one .two {
  background: black
}
```

...and then used `!one` in your template, the generated CSS would be this:

```css
.\!one .\!two {
  background: black !important
}
```

This would cause the styles to not be applied unless you also added `!` to the beginning of other classes in the template that are part of this selector.

This PR makes sure that other classes in the selector aren't mistakenly prefixed with `!`, so that you can add `!` to only one of the classes in your template and get the expected result.

* Update CHANGELOG
This commit is contained in:
Adam Wathan 2022-02-25 13:17:44 -05:00 • committed by GitHub
parent bd167635d5
commit f7a9d370c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/lib/generateRules.js
View file

@ -88,7 +88,7 @@ function applyPrefix(matches, context) {
return matches
}
function applyImportant(matches) {
function applyImportant(matches, classCandidate) {
if (matches.length === 0) {
return matches
}
@ -98,7 +98,10 @@ function applyImportant(matches) {
let container = postcss.root({ nodes: [rule.clone()] })
container.walkRules((r) => {
r.selector = updateAllClasses(r.selector, (className) => {
return `!${className}`
if (className === classCandidate) {
return `!${className}`
}
return className
})
r.walkDecls((d) => (d.important = true))
})
@ -514,7 +517,7 @@ function* resolveMatches(candidate, context) {
matches = applyPrefix(matches, context)
if (important) {
matches = applyImportant(matches, context)
matches = applyImportant(matches, classCandidate)
}
for (let variant of variants) {