add container query lengths (#366)

microsoft · Oct 5, 2023 · 0f2dfc4 · 0f2dfc4
1 parent 4d74676
commit 0f2dfc4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/parser/cssParser.ts b/src/parser/cssParser.ts
@@ -1873,6 +1873,7 @@ export class Parser {
 			this.peek(TokenType.Angle) ||
 			this.peek(TokenType.Time) ||
 			this.peek(TokenType.Dimension) ||
+			this.peek(TokenType.ContainerQueryLength) ||
 			this.peek(TokenType.Freq)) {
 			const node = this.create(nodes.NumericValue);
 			this.consumeToken();

diff --git a/src/parser/cssScanner.ts b/src/parser/cssScanner.ts
@@ -47,7 +47,8 @@ export enum TokenType {
 	Comment,
 	SingleLineComment,
 	EOF,
-	CustomToken
+	CustomToken,
+	ContainerQueryLength
 }
 
 export interface IToken {
@@ -212,6 +213,12 @@ staticUnitTable['%'] = TokenType.Percentage;
 staticUnitTable['fr'] = TokenType.Percentage;
 staticUnitTable['dpi'] = TokenType.Resolution;
 staticUnitTable['dpcm'] = TokenType.Resolution;
+staticUnitTable['cqw'] = TokenType.ContainerQueryLength;
+staticUnitTable['cqh'] = TokenType.ContainerQueryLength;
+staticUnitTable['cqi'] = TokenType.ContainerQueryLength;
+staticUnitTable['cqb'] = TokenType.ContainerQueryLength;
+staticUnitTable['cqmin'] = TokenType.ContainerQueryLength;
+staticUnitTable['cqmax'] = TokenType.ContainerQueryLength;
 
 export class Scanner {
 

diff --git a/src/test/css/parser.test.ts b/src/test/css/parser.test.ts
@@ -177,6 +177,11 @@ suite('CSS - Parser', () => {
 		assertNode(`@container card (inline-size > 30em) { @container style(--responsive: true) {} }`, parser, parser._parseStylesheet.bind(parser));
 	});
 
+	test('@container query length units', function () {
+		const parser = new Parser();
+		assertNode(`@container (min-width: 700px) { .card h2 { font-size: max(1.5em, 1.23em + 2cqi); } }`, parser, parser._parseStylesheet.bind(parser));
+	});
+
 	test('@import', function () {
 		const parser = new Parser();
 		assertNode('@import "asdasdsa"', parser, parser._parseImport.bind(parser));