Skip to content

Commit

Permalink
Add support functions in features
Browse files Browse the repository at this point in the history
  • Loading branch information
@lahmatiy
lahmatiy committed Sep 25, 2023
1 parent c426179 commit 775524e
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 84 deletions.
5 changes: 4 additions & 1 deletion CHANGELOG.md
View file
Expand Up @@ -10,12 +10,13 @@
- Changed 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 [ranges in media queries](https://www.w3.org/TR/mediaqueries-4/#mq-range-context)
- [`FeatureRange`](./docs/ast.md#featurerange): represents [features in a range context](https://www.w3.org/TR/mediaqueries-4/#mq-range-context)
- [`FeatureFunction`](./docs/ast.md#featurefunction): represents functional features such as `@supports`'s `selector()` or `@container`'s `style()`
- [`Condition`](./docs/ast.md#condition): used across all query-like at-rules, encapsulating queries with features and the `not`, `and`, and `or` operators
- [`GeneralEnclosure`](./docs/ast.md#condition): represents the [`<general-enclosed>`](https://www.w3.org/TR/mediaqueries-4/#typedef-general-enclosed) production, which caters to unparsed parentheses or functional expressions
> Note: All new nodes include a `kind` property to define the at-rule type. Supported kinds are `media`, `supports`, and `container`.

- Added support for functions for features and features in a range context, e.g. `(width: calc(100cm / 6))`
- Added a `condition` value for the parser's context option to parse queries. Use the `kind` option to specify the condition type, e.g., `parse('...', { context: 'condition', kind: 'media' })`.
- Introduced a `features` section in the syntax configuration for defining functional features of at-rules. Expand definitions using the `fork()` method. The current definition is as follows:
```js
Expand All @@ -26,6 +27,7 @@
```
- Changes for `@media` at-rule:
- Enhanced prelude parsing for complex queries. Parentheses with errors will be parsed as `GeneralEnclosed`.
- Added support for features in a range context, e.g. `(width > 100px)` or `(100px < height < 400px)`
- Transitioned from `MediaFeature` node type to the `Feature` node type with `kind: "media"`.
- Changed `MediaQuery` node structure into the following form:
```ts
Expand All @@ -38,6 +40,7 @@
```
- Changes for `@supports` at-rule:
- Enhanced prelude parsing for complex queries. Parentheses with errors will be parsed as `GeneralEnclosed`.
- Added support for features in a range context, e.g. `(width > 100px)` or `(100px < height < 400px)`
- 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`).
Expand Down
252 changes: 252 additions & 0 deletions fixtures/ast/mediaQuery/FeatureRange.json
View file
@@ -0,0 +1,252 @@
{
"basic": {
"source": "(foo>1)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Identifier",
"name": "foo"
},
"leftComparison": ">",
"middle": {
"type": "Number",
"value": "1"
},
"rightComparison": null,
"right": null
}
]
}
},
"number first": {
"source": "(1<foo)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Number",
"value": "1"
},
"leftComparison": "<",
"middle": {
"type": "Identifier",
"name": "foo"
},
"rightComparison": null,
"right": null
}
]
}
},
"ratio first": {
"source": "(1/2<foo)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Ratio",
"left": "1",
"right": "2"
},
"leftComparison": "<",
"middle": {
"type": "Identifier",
"name": "foo"
},
"rightComparison": null,
"right": null
}
]
}
},
"dimension first": {
"source": "(1px<foo)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Dimension",
"value": "1",
"unit": "px"
},
"leftComparison": "<",
"middle": {
"type": "Identifier",
"name": "foo"
},
"rightComparison": null,
"right": null
}
]
}
},
"full form": {
"source": "(100px<bar<200px)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Dimension",
"value": "100",
"unit": "px"
},
"leftComparison": "<",
"middle": {
"type": "Identifier",
"name": "bar"
},
"rightComparison": "<",
"right": {
"type": "Dimension",
"value": "200",
"unit": "px"
}
}
]
}
},
"all three numbers": {
"source": "(1 < 2 < 3)",
"generate": "(1<2<3)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Number",
"value": "1"
},
"leftComparison": "<",
"middle": {
"type": "Number",
"value": "2"
},
"rightComparison": "<",
"right": {
"type": "Number",
"value": "3"
}
}
]
}
},
"all three ratio": {
"source": "(1 / 2 < 1 /**/ / /**/ 3 < 1/**///**/4)",
"generate": "(1/2<1/3<1/4)",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Ratio",
"left": "1",
"right": "2"
},
"leftComparison": "<",
"middle": {
"type": "Ratio",
"left": "1",
"right": "3"
},
"rightComparison": "<",
"right": {
"type": "Ratio",
"left": "1",
"right": "4"
}
}
]
}
},
"all three functions": {
"source": "(calc(1 + 2) < calc() < max(1, 2))",
"generate": "(calc(1 + 2)<calc()<max(1,2))",
"ast": {
"type": "Condition",
"kind": "media",
"children": [
{
"type": "FeatureRange",
"kind": "media",
"left": {
"type": "Function",
"name": "calc",
"children": [
{
"type": "Number",
"value": "1"
},
{
"type": "Operator",
"value": " + "
},
{
"type": "Number",
"value": "2"
}
]
},
"leftComparison": "<",
"middle": {
"type": "Function",
"name": "calc",
"children": []
},
"rightComparison": "<",
"right": {
"type": "Function",
"name": "max",
"children": [
{
"type": "Number",
"value": "1"
},
{
"type": "Operator",
"value": ","
},
{
"type": "Number",
"value": "2"
}
]
}
}
]
}
},
"error": [
{
"source": "(foo > 123 123)",
"offset": " ^",
"error": "Expected \"<\", \">\", \"=\" or \")\""
}
]
}
62 changes: 0 additions & 62 deletions fixtures/ast/mediaQuery/MediaFeatureRange.json
View file

This file was deleted.

0 comments on commit 775524e

Please sign in to comment.