@container rule being flagged as "unknownAtRules" when nested in SCSS

microsoft · Mar 22, 2024 · 4f257bd · 4f257bd
1 parent c17c287
commit 4f257bd
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/src/parser/lessParser.ts b/src/parser/lessParser.ts
@@ -320,6 +320,7 @@ export class LESSParser extends cssParser.Parser {
 				|| this._parseSupports(true) // @supports
 				|| this._parseLayer() // @layer
 				|| this._parsePropertyAtRule() // @property
+				|| this._parseContainer() // @container
 				|| this._parseDetachedRuleSetMixin() // less detached ruleset mixin
 				|| this._parseVariableDeclaration() // Variable declarations
 				|| this._parseRuleSetDeclarationAtStatement();

diff --git a/src/parser/scssParser.ts b/src/parser/scssParser.ts
@@ -256,6 +256,7 @@ export class SCSSParser extends cssParser.Parser {
 				|| this._parseSupports(true) // @supports
 				|| this._parseLayer() // @layer
 				|| this._parsePropertyAtRule() // @property
+				|| this._parseContainer() // @container
 				|| this._parseRuleSetDeclarationAtStatement();
 		}
 		return this._parseVariableDeclaration() // variable declaration
@@ -939,7 +940,7 @@ export class SCSSParser extends cssParser.Parser {
 			this.accept(TokenType.Comma);
 		}
 
-		// More than just identifier 
+		// More than just identifier
 		return node.getChildren().length > 1 ? node : null;
 	}
 

diff --git a/src/test/less/parser.test.ts b/src/test/less/parser.test.ts
@@ -348,4 +348,9 @@ suite('LESS - Parser', () => {
 		const parser = new LESSParser();
 		assertNode('@plugin "my-plugin";', parser, parser._parseStylesheet.bind(parser));
 	});
+
+	test('@container', function () {
+		const parser = new LESSParser();
+		assertNode(`.item-icon { @container (max-height: 100px) { .item-icon { display: none;  } } }`, parser, parser._parseStylesheet.bind(parser));
+	});
 });
diff --git a/src/test/scss/parser.test.ts b/src/test/scss/parser.test.ts
@@ -291,6 +291,7 @@ suite('SCSS - Parser', () => {
 	test('@container', function () {
 		const parser = new SCSSParser();
 		assertNode(`@container (min-width: #{$minWidth}) { .scss-interpolation { line-height: 10cqh; } }`, parser, parser._parseStylesheet.bind(parser));
+		assertNode(`.item-icon { @container (max-height: 100px) { .item-icon { display: none;  } } }`, parser, parser._parseStylesheet.bind(parser));
 	});
 
 	test('@use', function () {