Weird coloring and @apply issues in SCSS files (or in Vue SFCs)

[eggsy]

Here's my repo, you can see that I have src/stylesheets/scrollbar.scss that is imported within a root.scss file in the same directory, and I import that root in my nuxt.config.js > css. When I tried using Windi classes (with @apply), it didn't work in those files (you can check blame to see how I switched to variables instead). This only happens for external SCSS files. I tried some methods, putting that directory in includes of windi.config.js but no luck there either.

There's also another issue with @apply in both external files and in SFC style tags. They're not colored, which makes it look like it's not a part of the code. I don't think it's because of my VSC theme (I use Dracula) because, before the switch from Tailwind's official extension, they were all colored with no problems.

You see that the coloring of @apply is missing and all classes look weird. You can see here how it was when using Tailwind's extension).

🌟 One idea!

One thing I always cried about Tailwind's extension is that it wasn't able to sort classes in @apply. It's not important but it'd be amazing to see this in Windi's extension! If this is possible, I can create a different issue for this!

[alexanderniebuhr]

can you try to add following in your VS Code Editor Settings

  "windicss.includeLanguages": {
    "scss": "css",
  },

[eggsy]

can you try to add following in your VS Code Editor Settings

  "windicss.includeLanguages": {
    "scss": "css",
  },

Nope, didn't work.

[voorjaar]

675ce75 should fix this. try v0.16.3

[eggsy]

Yep, it looks fine in SFCs <style> tags and it's now working in my .scss files too. I can use classes but seems like colours are still missing from there. Is it supposed to be like this?

Edit: Using @apply worked in dev mode in my project, but I just ran a build and classes weren't applied. I use Vite bundler in development mode, I had Webpack in development mode too when I first opened this ticket and seems like it's still not working with Webpack.

[alexanderniebuhr]

@eggsy if you talk about issue in functionality of actual usage it might be wrong repo to have this issue. If you are talking about bug in VS Code Extension it is correct. Not sure what you mean?

[eggsy]

@eggsy if you talk about issue in functionality of actual usage it might be wrong repo to have this issue. If you are talking about bug in VS Code Extension it is correct. Not sure what you mean?

Yeah, but the first part: "@apply isn't colored in .scss files" is probably related to the extension.

[alexanderniebuhr]

ok, so maybe please open for the second part an additional issue. It confused me sorry

[alexanderniebuhr]

/cc @voorjaar not sure if that is indented, but it seems .scss files are not quite working yet

[alexanderniebuhr]

@eggsy you checked the includeLanguages setting?
example:

"windicss.includeLanguages": {
  "ruest": "html", // css, js
  "svelte": {
    "type": "css"
  },
  "javascriptreact": {
    "type": "js",
    "patterns": ["@apply\s+\S+$", "..." ],
  },
}

[eggsy]

@alexanderniebuhr didn't fix it. I don't know if that's the right config though, it says javascriptreact all I'm trying to achieve is get @applys coloured in .scss files.

[alexanderniebuhr]

It's just an example config, cause that setting supports more stuff now

[voorjaar]

v0.16.6 should fix all problems, try it please.

[eggsy]

Welp, they work as expected now! Even in commented lines, they are highlighted (might be a bug of my theme or I don't know but sure!). It'd be great if that's fixed in the next patch though 😅.

[alexanderniebuhr]

just going to close since there was no much activity lately, if some issue still exists please reopen a new issue