Skip to content

Commit

Permalink
Add @layer support
Browse files Browse the repository at this point in the history
  • Loading branch information
@lahmatiy
lahmatiy committed Sep 25, 2023
1 parent f2d3c17 commit 689185f
Show file tree
Hide file tree
Showing 14 changed files with 389 additions and 7 deletions.
6 changes: 4 additions & 2 deletions CHANGELOG.md
View file
@@ -1,5 +1,8 @@
## next

- Added support for the `@container` at-rule
- Added support for the `@layer` at-rule
- Added `LayerName` and `LayerNameList` node types
- Bumped `mdn/data` to `2.1.0`
- Added `TokenStream#lookupTypeNonSC()` method
- Added `<dashed-ident>` to generic types
Expand All @@ -8,7 +11,7 @@
- Both left and right parts of a ratio can now be any number; validation of number range is no longer within the parser's scope.
- Both parts can now be functions. Although not explicitly mentioned in the specification, mathematical functions can replace numbers, addressing potential use cases (#162).
- As per the [CSS Values and Units Level 4](https://drafts.csswg.org/css-values-4/#ratios) specification, the right part of `Ratio` can be omitted. While this can't be a parser output (which would produce a `Number` node), it's feasible during `Ratio` node construction or transformation.
- Changed to query-related at-rules:
- Changes to query-related at-rules:
- Added new node types:
- [`Feature`](./docs/ast.md#feature): represents features like `(feature)` and `(feature: value)`, fundamental for both `@media` and `@container` at-rules
- [`FeatureRange`](./docs/ast.md#featurerange): represents [features in a range context](https://www.w3.org/TR/mediaqueries-4/#mq-range-context)
Expand Down Expand Up @@ -45,7 +48,6 @@
- Added `SupportsDeclaration` node type to encapsulate a declaration in a query, replacing `Parentheses`.
- Parsing now employs `Condition` or `SupportsDeclaration` nodes of kind `supports` instead of `Parentheses`.
- Added support for the [`selector()`](https://drafts.csswg.org/css-conditional-4/#at-supports-ext) feature via the `FeatureFunction` node (configured in `features.supports.selector`).
- Added support for the `@container` at-rule
## 2.3.1 (December 14, 2022)
Expand Down
193 changes: 193 additions & 0 deletions fixtures/ast/atrule/atrule/layer.json
View file
@@ -0,0 +1,193 @@
{
"anonymous layer": {
"source": "@layer;",
"ast": {
"type": "Atrule",
"name": "layer",
"prelude": null,
"block": null
}
},
"anonymous layer with block": {
"source": "@layer { selector {} }",
"generate": "@layer{selector{}}",
"ast": {
"type": "Atrule",
"loc": null,
"name": "layer",
"prelude": null,
"block": {
"type": "Block",
"loc": null,
"children": [
{
"type": "Rule",
"loc": null,
"prelude": {
"type": "SelectorList",
"loc": null,
"children": [
{
"type": "Selector",
"loc": null,
"children": [
{
"type": "TypeSelector",
"loc": null,
"name": "selector"
}
]
}
]
},
"block": {
"type": "Block",
"loc": null,
"children": []
}
}
]
}
}
},
"one layer name": {
"source": "@layer test;",
"ast": {
"type": "Atrule",
"name": "layer",
"prelude": {
"type": "AtrulePrelude",
"children": [
{
"type": "LayerNameList",
"children": [
{
"type": "LayerName",
"name": "test"
}
]
}
]
},
"block": null
}
},
"layer name with fullstop": {
"source": "@layer foo.bar;",
"ast": {
"type": "Atrule",
"name": "layer",
"prelude": {
"type": "AtrulePrelude",
"children": [
{
"type": "LayerNameList",
"children": [
{
"type": "LayerName",
"name": "foo.bar"
}
]
}
]
},
"block": null
}
},
"with a block": {
"source": "@layer test { selector {} }",
"generate": "@layer test{selector{}}",
"ast": {
"type": "Atrule",
"loc": null,
"name": "layer",
"prelude": {
"type": "AtrulePrelude",
"loc": null,
"children": [
{
"type": "LayerNameList",
"loc": null,
"children": [
{
"type": "LayerName",
"loc": null,
"name": "test"
}
]
}
]
},
"block": {
"type": "Block",
"loc": null,
"children": [
{
"type": "Rule",
"loc": null,
"prelude": {
"type": "SelectorList",
"loc": null,
"children": [
{
"type": "Selector",
"loc": null,
"children": [
{
"type": "TypeSelector",
"loc": null,
"name": "selector"
}
]
}
]
},
"block": {
"type": "Block",
"loc": null,
"children": []
}
}
]
}
}
},
"layer name list": {
"source": "@layer foo, foo.bar, foo.bar.baz;",
"generate": "@layer foo,foo.bar,foo.bar.baz;",
"ast": {
"type": "Atrule",
"name": "layer",
"prelude": {
"type": "AtrulePrelude",
"children": [
{
"type": "LayerNameList",
"children": [
{
"type": "LayerName",
"name": "foo"
},
{
"type": "LayerName",
"name": "foo.bar"
},
{
"type": "LayerName",
"name": "foo.bar.baz"
}
]
}
]
},
"block": null
}
},
"error": [
{
"source": "@layer foo . bar ;",
"offset": " ^",
"error": "Semicolon or block is expected"
}
]
}
2 changes: 1 addition & 1 deletion fixtures/ast/mediaQuery/Ratio.json
View file
Expand Up @@ -390,7 +390,7 @@
{
"source": "(foo: 1/)",
"offset": " ^",
"error": "Number of function are expected"
"error": "Number of function is expected"
}
]
}
108 changes: 106 additions & 2 deletions fixtures/stringify.ast
View file
Expand Up @@ -8,8 +8,8 @@
"column": 1
},
"end": {
"offset": 1783,
"line": 82,
"offset": 1802,
"line": 83,
"column": 1
}
},
Expand Down Expand Up @@ -6082,6 +6082,110 @@
},
"children": []
}
},
{
"type": "Atrule",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1783,
"line": 82,
"column": 1
},
"end": {
"offset": 1801,
"line": 82,
"column": 19
}
},
"name": "layer",
"prelude": {
"type": "AtrulePrelude",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1793,
"line": 82,
"column": 11
},
"end": {
"offset": 1799,
"line": 82,
"column": 17
}
},
"children": [
{
"type": "LayerNameList",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1793,
"line": 82,
"column": 11
},
"end": {
"offset": 1799,
"line": 82,
"column": 17
}
},
"children": [
{
"type": "LayerName",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1793,
"line": 82,
"column": 11
},
"end": {
"offset": 1794,
"line": 82,
"column": 12
}
},
"name": "foo"
},
{
"type": "LayerName",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1798,
"line": 82,
"column": 16
},
"end": {
"offset": 1799,
"line": 82,
"column": 17
}
},
"name": "bar"
}
]
}
]
},
"block": {
"type": "Block",
"loc": {
"source": "stringify.css",
"start": {
"offset": 1799,
"line": 82,
"column": 17
},
"end": {
"offset": 1801,
"line": 82,
"column": 19
}
},
"children": []
}
}
]
}
1 change: 1 addition & 0 deletions fixtures/stringify.css
View file
Expand Up @@ -79,3 +79,4 @@ edge\ .c\61ases {
@media (foo: 123) and (1) and foo(1) {}
@supports selector(.a) {}
@container (width > 500px) and style(--foo:1) {}
@layer foo, bar {}
2 changes: 1 addition & 1 deletion lib/__tests/walk.js
View file
Expand Up @@ -566,7 +566,7 @@ describe('AST traversal', () => {
it('should throws when visit has wrong value', () => {
assert.throws(
() => walk(ast, { visit: 'Foo' }),
/Bad value `Foo` for `visit` option \(should be: AnPlusB, Atrule, AtrulePrelude, AttributeSelector, Block, Brackets, CDC, CDO, ClassSelector, Combinator, Comment, Condition, Declaration, DeclarationList, Dimension, Feature, FeatureFunction, FeatureRange, Function, GeneralEnclosed, Hash, IdSelector, Identifier, MediaQuery, MediaQueryList, NestingSelector, Nth, Number, Operator, Parentheses, Percentage, PseudoClassSelector, PseudoElementSelector, Ratio, Raw, Rule, Selector, SelectorList, String, StyleSheet, SupportsDeclaration, TypeSelector, UnicodeRange, Url, Value, WhiteSpace\)/
/Bad value `Foo` for `visit` option \(should be: AnPlusB, Atrule, AtrulePrelude, AttributeSelector, Block, Brackets, CDC, CDO, ClassSelector, Combinator, Comment, Condition, Declaration, DeclarationList, Dimension, Feature, FeatureFunction, FeatureRange, Function, GeneralEnclosed, Hash, IdSelector, Identifier, LayerName, LayerNameList, MediaQuery, MediaQueryList, NestingSelector, Nth, Number, Operator, Parentheses, Percentage, PseudoClassSelector, PseudoElementSelector, Ratio, Raw, Rule, Selector, SelectorList, String, StyleSheet, SupportsDeclaration, TypeSelector, UnicodeRange, Url, Value, WhiteSpace\)/
);
});
});
Expand Down
2 changes: 2 additions & 0 deletions lib/syntax/atrule/index.js
View file
@@ -1,6 +1,7 @@
import container from './container.js';
import fontFace from './font-face.js';
import importAtrule from './import.js';
import layer from './layer.js';
import media from './media.js';
import nest from './nest.js';
import page from './page.js';
Expand All @@ -10,6 +11,7 @@ export default {
container,
'font-face': fontFace,
import: importAtrule,
layer,
media,
nest,
page,
Expand Down
12 changes: 12 additions & 0 deletions lib/syntax/atrule/layer.js
View file
@@ -0,0 +1,12 @@
export default {
parse: {
prelude() {
return this.createSingleNodeList(
this.LayerNameList()
);
},
block() {
return this.Block(false);
}
}
};

0 comments on commit 689185f

Please sign in to comment.