Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

! important not working as expected with the matchUtilities #7226

Closed
mohamedcherifmo opened this issue Jan 26, 2022 · 2 comments · Fixed by #7664
Closed

! important not working as expected with the matchUtilities #7226

mohamedcherifmo opened this issue Jan 26, 2022 · 2 comments · Fixed by #7664

Comments

@mohamedcherifmo
Copy link

What version of Tailwind CSS are you using?
Tailwind v3.0.14

What build tool (or framework if it abstracts the build tool) are you using?
postcss-cli 8.3.1

What browser are you using?
Chrome,

What operating system are you using?
Windows

Reproduction URL.
https://play.tailwindcss.com/zEL8hw6BSy

Describe your issue

Creating a match utilities that has subclasses isn't working correctly with !important.
I created the following matchUtilities to enable editing the title font-size from the parent (for headless CMS scenario)
'card-title-text': (value) => ({'.card-title': {'font-size': value,}}),

Doing so worked as expected for normal classes and generated the following class:
.card-title-text-4xl .card-title { font-size: 2.25rem/* 36px */; font-size: [object Object]; }
but for !card-title-text-4xl it applied the ! to all subclasses as well generating the following css

.\!card-title-text-4xl .\!card-title {
  font-size: 2.25rem/* 36px */ !important;
  font-size: [object Object] !important;
}

The ! prefix before the card-title i believe shouldn't exist
adamwathan added a commit that referenced this issue Feb 25, 2022
@adamwathan
Only add ! to selector class matching template candidate
2422b1d 
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.
@adamwathan adamwathan mentioned this issue Feb 25, 2022
Merged
adamwathan added a commit that referenced this issue Feb 25, 2022
@adamwathan
Only add ! to selector class matching template candidate
4803b9a 
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.
adamwathan added a commit that referenced this issue Feb 25, 2022
@adamwathan
Only add ! to selector class matching template candidate (#7664)
f7a9d37 
* 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
@adamwathan
Copy link
Member

Hey thanks! Fixed this in #7664, can use it now by installing tailwindcss@insiders if needed.

@mohamedcherifmo
Copy link
Author

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Only add ! to selector class matching template candidate tailwindlabs/tailwindcss
2 participants
@adamwathan @mohamedcherifmo