-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Only detect nesting when using @apply
#13325
Conversation
cfc73de
to
ce0ec5a
Compare
src/lib/expandApplyAtRules.js
Outdated
'Please enable a CSS nesting plugin *before* Tailwind in your configuration.', | ||
'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This part is coming from the original detectNesting
code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can drop this part with the change above I think.
src/lib/expandApplyAtRules.js
Outdated
rule.walkRules(() => { | ||
throw apply.error( | ||
[ | ||
`The \`${applyCandidate}\` class cannot be applied because it uses nested CSS.`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a new message, so we can definitely change some wording here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe something like:
`The \`${applyCandidate}\` class cannot be used with \`@apply\` because \`@apply\` does not currently support nested CSS.`,
'Rewrite the selector without nesting or configure the `tailwindcss/nesting` plugin:',
'https://tailwindcss.com/docs/using-with-preprocessors#nesting',
} | ||
|
||
rule.walkRules(() => { | ||
throw apply.error( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I used an error
instead of a warning
like we used to do for 2 reasons:
- All apply issues in this file use
error
. - If we just warn, we would still generate incorrect code.
Up until now we've detected nesting and warned our users to ensure that they're using a nesting plugin. All major browsers have proper support for native nesting so there is no need for us to keep warning the user about nested CSS at all.
However, there are still cases where nesting is not allowed and that's when you are using
@apply
.If you are using
@apply foo
wherefoo
contains nested CSS, then it will not work as expected, and in this scenario you do need to use a nesting plugin.If you are using
@apply
and you are not applying any classes with nesting in them, then you are good to go.Fixes: #13317