[scss] support interpolation in layer name

[ngdangtu-vn]

This feature request is about new CSS at-rule call @layer. This at-rule can be considerate available for public since it is very close to 90% supported browsers. But the current vscode 1.77.3 doesn't support @layer keyword and constantly fire error every time I use it.

Language that needs to support this feature: CSS, SASS/SCSS, LESS

[gjsjohnmurray]

#161842 implies this should already be handled. Please check its related issues, and also that extensions you may be using are up to date.

[ngdangtu-vn]

I don't think I use any extensions that affect syntax highlight. Could it be because I'm using Linux?

Just double check on plain CSS, it works now. But for SCSS it doesn't. Can I ask for SCSS support in here since it also got native support from vscode?

It also fire error on SCSS variable when I typing. It can only disappear if I close the tab and reopen it.

[aeschli]

@ngdangtu-vn Please paste the small code sample that doesn't work.

[ngdangtu-vn]

Sure

/**
 * Cascade Threshold
 */
@mixin module-on($min-width, $layer, $selector)
{
	@layer #{$layer}
	{
		@media screen and (min-width: #{$min-width})
		{
			#{$selector}
			{
				@content;
			}
		}
	}
}

@import 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap' layer(font);

All the error underlines in those code above will display once you modify the code file. If you save it and close then reopen, the error will disappear. (Of course it appears in the Problems panel too)

[Alexand3r]

Here's a more simple reproducible example where it throws this error with the @layer in .scss files (.css files have no issues)

@layer bootstrap;
@import url('bootstrap/scss/bootstrap.scss') layer(bootstrap);

{ expectedscss(css-lcurlyexpected)

[aeschli]

Fixed by microsoft/vscode-css-languageservice#370

[TylerLeonhardt]

No longer errors, verified ✅

@layer in

@layer bootstrap;
@import url('bootstrap/scss/bootstrap.scss') layer(bootstrap);

not being highlighted seems like a syntax highlighting issue...

I'll open a new issue for that.

[justschen]

@aeschli was this accidentally reopened? deferring to microsoft/vscode-css#24 and closing this one on this milestone