prettier-tailwind icon indicating copy to clipboard operation
prettier-tailwind copied to clipboard

[Bug] - No space between rule and !important when used inside of @apply directive

Open AndrewBogdanovTSS opened this issue 4 years ago • 0 comments

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;
        }

AndrewBogdanovTSS avatar Feb 12 '21 12:02 AndrewBogdanovTSS