Strange behavior with `@use` and the "scss css-lcurlyexpected" rule

[eliduke]

Hey y'all! I'm new here, trying to figure some stuff out with Zed and LSPs and all that jazz.

Currently I have just the "scss-lsp" running with this bit of settings config...

The server is indeed up and running all is well there.

Next up, I am importing all of bootstrap scss into my custom app.scss, so that I can do bunch of @extends into some root level HTML elements. Such as...

That code is executing perfectly, bootstrap is being imported successfully with @use, the <button> is rendering as expected with those styles, and all is well on that side of things. So, it's a bit of a strange inline error. I checked the Diagnostics, and I'm seeing...

Interesting. Unfortunately, the google juice for that that specific error ("css-lcurlyexpected") doesn't return much. I understand the basics, like, it's telling me that it is expecting an open curly bracket "{" somewhere on that line, but nothing seems to help...

Brackets around the path...

Brackets around the whole line...

Anyone got any ideas?! Thanks!

[bajrangCoder]

Why is there ---- YAML frontmatter(on line 1 and 2) in scss ? That's not a scss syntax and I think that is causing the issue

[eliduke]

@bajrangCoder That is because I am using Jekyll (static site generator) and that is how you indicate to the Jekyll Sass Converter that the file is scss and needs preprocessing from app.scss to app.css.

It's an interesting point you bring up though! If I remove that empty front-matter, the @use error goes away.

But for some reason, the empty front-matter is only causing problems for the @use line. It has no issues with any other styles in that file, it seems to be a specific issue with empty front-matter and any @ (@use or @import) declaration at the root of the file. It has no problem with the @extend inside the button declaration.

I wonder what the solution is here... 🤔

Maybe there's a different way to get Jekyll to process scss?

[bajrangCoder]

The problem is in scss-lsp(vscode-css-languageservice) as it doesn't handle Jekyll(ig) and from internet i found that the workaround for this is to just turn off validation entirely

{
  "lsp": {
    "scss-lsp": {
      "settings": {
        "scss": {
          "validate": false
        }
      }
    }
  }
}

[eliduke]

Hmmm... not ideal. I would like to the scss, and turning it off completely seems pretty heavy handed.