css-analyzer
css-analyzer copied to clipboard
`layer` should be read from `@import`
From Adam Argyle's CodePen:
@import "https://unpkg.com/open-props" layer(base);
@import "https://unpkg.com/open-props/normalize.min.css" layer(base);
@import "https://unpkg.com/open-props/oklch-hues.min.css" layer(base);
@import "https://unpkg.com/open-props/gray-oklch.min.css" layer(base);
I'd expect base to be a layer name, but currently no layers are reported. The same goes for supports() queries.
CSSTree issue: https://github.com/csstree/csstree/issues/259
CSSTree 2.3.1 does not yet parse layer() or layer in @import yet.
https://stackblitz.com/edit/node-28ttpj?file=index.js,package.json
But the syntax explorer shows that it should work... https://csstree.github.io/docs/syntax/#AtrulePrelude:import
Example @import parsing in Svelte: https://github.com/sveltejs/svelte/blob/15bef57aecc3006b6aa88425a6f3b72b304b61cd/packages/svelte/src/compiler/parse/read/css-tree-cq/css_tree_parse.js#L26-L93 using CSSTree's fork() syntax.
WIP as copied from the Svelte PR: https://stackblitz.com/edit/stackblitz-starters-umuh7n?file=index.js,csstree-fork.js,nodes%2Fcontainer-query.js,nodes%2Fquery-css-function.js,nodes%2Fquery-feature-range.js