From 0c029488d35bc2581918d7a99d08d609a8d80f76 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 27 Mar 2026 15:07:08 +0000 Subject: [PATCH] test: add test cases for container queries with name-only (no conditions) Container conditions are now optional per the updated CSS spec. This adds test coverage proving that `@container sidebar { }` and similar patterns with only a container name (no condition block) parse correctly. See https://bugzilla.mozilla.org/show_bug.cgi?id=2016474 https://claude.ai/code/session_01Ta7yWNuyFFE523YPGg46F7 --- src/parse-atrule-prelude.test.ts | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/parse-atrule-prelude.test.ts b/src/parse-atrule-prelude.test.ts index 3a46602..18c7708 100644 --- a/src/parse-atrule-prelude.test.ts +++ b/src/parse-atrule-prelude.test.ts @@ -678,6 +678,37 @@ describe('At-Rule Prelude Nodes', () => { expect(fn.value).toBe('--custom: 1') }) + it('should parse container query with name only (no conditions)', () => { + // Container conditions are optional when a container name is specified + // See https://bugzilla.mozilla.org/show_bug.cgi?id=2016474 + const css = '@container sidebar { }' + const ast = parse(css) + const atRule = ast.first_child! + const children = atRule.prelude?.children || [] + + expect(children[0].type).toBe(CONTAINER_QUERY) + + const [ident] = children[0].children + expect(ident.type).toBe(IDENTIFIER) + expect(ident.text).toBe('sidebar') + expect(ident.type_name).toBe('Identifier') + }) + + it('should parse container query with hyphenated name only', () => { + // Container conditions are optional when a container name is specified + // See https://bugzilla.mozilla.org/show_bug.cgi?id=2016474 + const css = '@container my-layout { .card { color: red } }' + const ast = parse(css) + const atRule = ast.first_child! + const children = atRule.prelude?.children || [] + + expect(children[0].type).toBe(CONTAINER_QUERY) + + const [ident] = children[0].children + expect(ident.type).toBe(IDENTIFIER) + expect(ident.text).toBe('my-layout') + }) + it('should handle a very complex container query', () => { const css = `@container style(--themeBackground), not style(background-color: red),