add container query lengths (#366)

Author: aeschli

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();

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 {
 

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));