diff --git a/src/css-node.ts b/src/css-node.ts index ebdd4a9..40eccdd 100644 --- a/src/css-node.ts +++ b/src/css-node.ts @@ -323,8 +323,8 @@ export class CSSNode { */ get property(): string | undefined { let { type } = this - if (type !== DECLARATION && type !== MEDIA_FEATURE) return - return this.get_content() + if (type === DECLARATION || type === MEDIA_FEATURE) return this.get_content() + if (type === SUPPORTS_DECLARATION) return this.first_child?.property } /** diff --git a/src/node-types.ts b/src/node-types.ts index 714e89e..5dd6e72 100644 --- a/src/node-types.ts +++ b/src/node-types.ts @@ -495,6 +495,8 @@ export type SupportsQuery = CSSNode & export type SupportsDeclaration = CSSNode & WithChildren & { readonly type: typeof SUPPORTS_DECLARATION + /** Property name, e.g. "-webkit-appearance" */ + readonly property: string | undefined clone(options?: CloneOptions): ToPlain } diff --git a/src/parse-atrule-prelude.test.ts b/src/parse-atrule-prelude.test.ts index a727b1a..f6573c5 100644 --- a/src/parse-atrule-prelude.test.ts +++ b/src/parse-atrule-prelude.test.ts @@ -22,7 +22,6 @@ import type { import { AT_RULE, BLOCK, - DECLARATION, MEDIA_QUERY, MEDIA_FEATURE, MEDIA_TYPE, @@ -869,32 +868,29 @@ describe('At-Rule Prelude Nodes', () => { expect(query.children[0].type).toBe(SUPPORTS_DECLARATION) }) - test('should have a Declaration with property inside SupportsDeclaration', () => { + test('should expose property and is_vendor_prefixed on SupportsDeclaration', () => { const css = '@supports (display: flex) { }' const ast = parse(css) const atRule = ast.first_child! as Atrule const children = (atRule.prelude as AtrulePrelude).children || [] const query = children.find((c) => c.type === SUPPORTS_QUERY) as SupportsQuery const supportsDecl = query.children[0] as SupportsDeclaration - const decl = supportsDecl.children[0] as Declaration - expect(supportsDecl.type).toBe(SUPPORTS_DECLARATION) - expect(decl.type).toBe(DECLARATION) - expect(decl.property).toBe('display') - expect(decl.is_vendor_prefixed).toBe(false) + expect(supportsDecl.property).toBe('display') + expect(supportsDecl.is_vendor_prefixed).toBe(false) }) - test('should detect vendor-prefixed property via Declaration.is_vendor_prefixed', () => { + test('should detect vendor-prefixed property', () => { const css = '@supports (-webkit-appearance: none) { }' const ast = parse(css) const atRule = ast.first_child! as Atrule const children = (atRule.prelude as AtrulePrelude).children || [] const query = children.find((c) => c.type === SUPPORTS_QUERY) as SupportsQuery const supportsDecl = query.children[0] as SupportsDeclaration - const decl = supportsDecl.children[0] as Declaration - expect(decl.property).toBe('-webkit-appearance') - expect(decl.is_vendor_prefixed).toBe(true) + expect(supportsDecl.property).toBe('-webkit-appearance') + const declaration = supportsDecl.first_child + expect(declaration.is_vendor_prefixed).toBe(true) }) test('should have a Value child on the Declaration inside SupportsDeclaration', () => { @@ -907,7 +903,8 @@ describe('At-Rule Prelude Nodes', () => { const decl = supportsDecl.children[0] as Declaration expect(decl.value).not.toBeNull() - expect((decl.value as CSSNode).text).toBe('flex') + expect(decl.value?.text).toBe('flex') + expect(decl.value?.is_vendor_prefixed).toBe(false) }) test('should build SupportsDeclaration for each query in a multi-condition supports', () => {