css-analyzer icon indicating copy to clipboard operation
css-analyzer copied to clipboard

`layer` should be read from `@import`

Open bartveneman opened this issue 2 years ago • 3 comments

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

bartveneman avatar Apr 24 '23 20:04 bartveneman

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

bartveneman avatar Apr 26 '23 12:04 bartveneman

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.

bartveneman avatar Sep 21 '23 12:09 bartveneman

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

bartveneman avatar Sep 23 '23 10:09 bartveneman