Finding Layer in tree should not have to search for LAYER_NAME

This messes with my brain too much:

const ast = parse_atrule_prelude('import', params)

for (const node of ast) {
	if (node.type === LAYER_NAME && !node.name) {
		// LAYER_NAME???? 
	}
}

given layer(test) I expect: node.type === LAYER or node.type === FUNCTION and node.first_child.type === LAYER_NAME

Desired solution

@import url('test.css') layer(test.me); should have an AtRule with 2 children:
- Url
- Function{name='layer', children=[LayerName]}
@import url('test.css') supports(display: grid); should have an AtRule with 2 children:
- Url
- Function{name='supports', children=[SupportsQuery]}

There will be some nuances around how we should handle the surrounding (), because I believe that's part of why we initially chose to structure the AST as described in the comments below.

Encountered the same for this CSS:

@import url('test.css') layer(test.me);

@layer test.me {}

StyleSheet (1)
    children:
        Atrule (3)
            name: "import"
            children:
                AtrulePrelude (40)
                    children:
                        Url (18)
                            value: "'test.css'"
                        Layer (37)
                            name: "test.me"
                            value: "test.me"
        Atrule (3)
            name: "layer"
            children:
                AtrulePrelude (40)
                    children:
                        Layer (37)
                            name: "test.me"
                            value: "test.me"
                Block (7)

Same for suppoorts queries:

@import url('test.css') supports(display: grid);

@supports (display: grid) {}

StyleSheet (1)
    children:
        Atrule (3)
            name: "import"
            children:
                AtrulePrelude (40)
                    children:
                        Url (18)
                            value: "'test.css'"
                        SupportsQuery (36)
                            value: "display: grid"
                            children:
                                SupportsDeclaration (57)
                                    property: "display"
                                    value:
                                        Value (50)
                                            children:
                                                Identifier (10)
                                                    name: "grid"
                                    children:
                                        Declaration (4)
                                            property: "display"
                                            value:
                                                Value (50)
                                                    children:
                                                        Identifier (10)
                                                            name: "grid"
        Atrule (3)
            name: "supports"
            children:
                AtrulePrelude (40)
                    children:
                        SupportsQuery (36)
                            value: "display: grid"
                            children:
                                SupportsDeclaration (57)
                                    property: "display"
                                    value:
                                        Value (50)
                                            children:
                                                Identifier (10)
                                                    name: "grid"
                                    children:
                                        Declaration (4)
                                            property: "display"
                                            value:
                                                Value (50)
                                                    children:
                                                        Identifier (10)
                                                            name: "grid"
                Block (7)

The csstree AST seems very reasonable for the layer scenario:

@import url('test.css') layer(test.me);

@layer test.me {}

@layer test.me, a;

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Atrule",
      "name": "import",
      "prelude": {
        "type": "AtrulePrelude",
        "children": [
          {
            "type": "Url",
            "value": "test.css"
          },
          {
            "type": "Function",
            "name": "layer",
            "children": [
              {
                "type": "Layer",
                "name": "test.me"
              }
            ]
          }
        ]
      },
      "block": null
    },
    {
      "type": "Atrule",
      "name": "layer",
      "prelude": {
        "type": "AtrulePrelude",
        "children": [
          {
            "type": "LayerList",
            "children": [
              {
                "type": "Layer",
                "name": "test.me"
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": []
      }
    },
    {
      "type": "Atrule",
      "name": "layer",
      "prelude": {
        "type": "AtrulePrelude",
        "children": [
          {
            "type": "LayerList",
            "children": [
              {
                "type": "Layer",
                "name": "test.me"
              },
              {
                "type": "Layer",
                "name": "a"
              }
            ]
          }
        ]
      },
      "block": null
    }
  ]
}

csstree AST for supports goes a little different:

@import url('test.css') supports(display: grid);

@supports (display: grid) {}

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Atrule",
      "name": "import",
      "prelude": {
        "type": "AtrulePrelude",
        "children": [
          {
            "type": "Url",
            "value": "test.css"
          },
          {
            "type": "Function",
            "name": "supports",
            "children": [
              {
                "type": "Declaration",
                "important": false,
                "property": "display",
                "value": {
                  "type": "Value",
                  "children": [
                    {
                      "type": "Identifier",
                      "name": "grid"
                    }
                  ]
                }
              }
            ]
          }
        ]
      },
      "block": null
    },
    {
      "type": "Atrule",
      "name": "supports",
      "prelude": {
        "type": "AtrulePrelude",
        "children": [
          {
            "type": "Condition",
            "kind": "supports",
            "children": [
              {
                "type": "SupportsDeclaration",
                "declaration": {
                  "type": "Declaration",
                  "important": false,
                  "property": "display",
                  "value": {
                    "type": "Value",
                    "children": [
                      {
                        "type": "Identifier",
                        "name": "grid"
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": []
      }
    }
  ]
}

feat!: wrap @import layer() and supports() in a Function node (#318)

fixed in #318

Navigation Menu

Repository navigation

Finding Layer in tree should not have to search for LAYER_NAME #195

Desired solution

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Finding Layer in tree should not have to search for LAYER_NAME #195

Description

Desired solution

Activity

bartveneman commented on Oct 21, 2026

bartveneman commented on Oct 21, 2026

bartveneman commented on Oct 21, 2026

bartveneman commented on Oct 21, 2026

bartveneman commented on Oct 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions