"@apply !important" crashes angular ssr

[Dozorengel]

Describe the problem:

Whenever I run angular universal with!important appended to @apply in scss files, it crashes my app with SassError: expected ";" error and a log below, although I do have a semicolon in the eol. It's likely a sass-loader fault, I guess with plain css files it's all right.

this.debug is not a function appears only if the process faced into a semicolon error.

As a workaround now I have to not use @apply with !important.

[srcn]

Did you try this https://tailwindcss.com/docs/using-with-preprocessors#sass ?

[Dozorengel]

@srcn I've just tried, didn't really help, another error

Error: Unexpected '!'. Escaping special characters with \ may help.

Escaping an exclamation mark is also not profitable

[adamwathan]

Happy to help if you can create a GitHub repo that reproduces the issue so we can easily troubleshoot.

[Cephyric-gh]

I had a similar problem with applying important, ended up having to also wrap it in quotes in order for sass to properly parse it, e.g. @apply foo, bar #{'!important'}; (as opposed to the preprocessor docs tailwind provide, which suggest that #{!important} is enough)

[Dozorengel]

@tomhughes-invento something like that? I have no idea why it also doesn't work for me. I guess I'll make a reproduction in a couple days.

[Cephyric-gh]

Have you customized the way Angular is processing sass? It seems like there's a missing sass preprocessor step there that would convert the templating syntax down to regular text before postcss attempts to format

[adamwathan]

Going to move this to discussions as it seems this is a configuration issue with Sass + Tailwind rather than a bug in the library.