prettier-tailwind
prettier-tailwind copied to clipboard
[Bug] - No space between rule and !important when used inside of @apply directive
After I've upgraded to v. 1.5.0 sorting of properties begin to work in my .vue files style section which is good, but when I use !important inside of @apply rule prettier strip out a space between rule and !important which leads to compile errors. E.g.:
&:hover,
&--highlighted {
@apply border-orange border !important;
}
is formatted into:
&:hover,
&--highlighted {
@apply border-orange border!important;
}
logically tailwind tries to treat it as a utility and throws this error:
`@apply` cannot be used with `.border\!important` because `.border\!impor
tant` either cannot be found, or its actual definition includes a pseudo-selector
like :hover, :active, etc.
Temp workaround for anyone suffering from this issue, you can use prettier ignore comment to disable prettyfication:
&:hover,
&--highlighted {
/* prettier-ignore */
@apply border-orange border !important;
}
or if you use 'postcss-comment' parser (like I do):
&:hover,
&--highlighted {
// prettier-ignore
@apply border-orange border !important;
}