Skip to content

Commit 571f800

Browse files
romainmenkeromainmenke
authored
add detection for env functions (#921)
1 parent 51b3bc6 commit 571f800

File tree

17 files changed

+515
-58
lines changed

17 files changed

+515
-58
lines changed

‎packages/media-query-list-parser/CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
### Unreleased (patch)
44

5-
- Improve the detection of math function in media queries.
5+
- Add support for `env()` functions as values in media queries.
6+
- Improve the detection of math function as values in media queries.
67

78
### 2.0.2 (March 25, 2023)
89

‎packages/media-query-list-parser/dist/index.cjs‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/media-query-list-parser/dist/index.mjs‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/media-query-list-parser/dist/util/component-value-is.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ import { ComponentValue } from '@csstools/css-parser-algorithms';
22
export declare function isNumber(componentValue: ComponentValue): boolean;
33
export declare function isDimension(componentValue: ComponentValue): boolean;
44
export declare function isIdent(componentValue: ComponentValue): boolean;
5+
export declare function isEnvironmentVariable(componentValue: ComponentValue): boolean;

‎packages/media-query-list-parser/src/nodes/media-feature-value.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ComponentValue, ComponentValueType, ContainerNode } from '@csstools/css-parser-algorithms';
22
import { CSSToken, stringify, TokenType } from '@csstools/css-tokenizer';
3-
import { isDimension, isIdent, isNumber } from '../util/component-value-is';
3+
import { isDimension, isEnvironmentVariable, isIdent, isNumber } from '../util/component-value-is';
44
import { NodeType } from '../util/node-type';
55

66
export class MediaFeatureValue {
@@ -137,6 +137,12 @@ export function parseMediaFeatureValue(componentValues: Array<ComponentValue>):
137137
continue;
138138
}
139139

140+
if (isEnvironmentVariable(componentValue)) {
141+
candidateIndexStart = i;
142+
candidateIndexEnd = i;
143+
continue;
144+
}
145+
140146
if (isDimension(componentValue)) {
141147
candidateIndexStart = i;
142148
candidateIndexEnd = i;

‎packages/media-query-list-parser/src/util/component-value-is.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,13 @@ export function isIdent(componentValue: ComponentValue) {
5252

5353
return false;
5454
}
55+
56+
export function isEnvironmentVariable(componentValue: ComponentValue) {
57+
if (componentValue.type === ComponentValueType.Function &&
58+
toLowerCaseAZ(((componentValue as FunctionNode).name as TokenFunction)[4].value) === 'env'
59+
) {
60+
return true;
61+
}
62+
63+
return false;
64+
}

‎packages/media-query-list-parser/test/cases/mf-plain/0009.expect.json‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
[
2+
{
3+
"type": "media-query-without-type",
4+
"string": "(min-width: env(safe-area-inset-top))",
5+
"media": {
6+
"type": "media-condition",
7+
"media": {
8+
"type": "media-in-parens",
9+
"media": {
10+
"type": "media-feature",
11+
"feature": {
12+
"type": "mf-plain",
13+
"name": {
14+
"type": "mf-name",
15+
"name": "min-width",
16+
"tokens": [
17+
[
18+
"ident-token",
19+
"min-width",
20+
1,
21+
9,
22+
{
23+
"value": "min-width"
24+
}
25+
]
26+
]
27+
},
28+
"value": {
29+
"type": "mf-value",
30+
"value": {
31+
"type": "function",
32+
"name": "env",
33+
"tokens": [
34+
[
35+
"function-token",
36+
"env(",
37+
12,
38+
15,
39+
{
40+
"value": "env"
41+
}
42+
],
43+
[
44+
"ident-token",
45+
"safe-area-inset-top",
46+
16,
47+
34,
48+
{
49+
"value": "safe-area-inset-top"
50+
}
51+
],
52+
[
53+
")-token",
54+
")",
55+
35,
56+
35,
57+
null
58+
]
59+
],
60+
"value": [
61+
{
62+
"type": "token",
63+
"tokens": [
64+
[
65+
"ident-token",
66+
"safe-area-inset-top",
67+
16,
68+
34,
69+
{
70+
"value": "safe-area-inset-top"
71+
}
72+
]
73+
]
74+
}
75+
]
76+
},
77+
"tokens": [
78+
[
79+
"whitespace-token",
80+
" ",
81+
11,
82+
11,
83+
null
84+
],
85+
[
86+
"function-token",
87+
"env(",
88+
12,
89+
15,
90+
{
91+
"value": "env"
92+
}
93+
],
94+
[
95+
"ident-token",
96+
"safe-area-inset-top",
97+
16,
98+
34,
99+
{
100+
"value": "safe-area-inset-top"
101+
}
102+
],
103+
[
104+
")-token",
105+
")",
106+
35,
107+
35,
108+
null
109+
]
110+
]
111+
},
112+
"tokens": [
113+
[
114+
"ident-token",
115+
"min-width",
116+
1,
117+
9,
118+
{
119+
"value": "min-width"
120+
}
121+
],
122+
[
123+
"colon-token",
124+
":",
125+
10,
126+
10,
127+
null
128+
],
129+
[
130+
"whitespace-token",
131+
" ",
132+
11,
133+
11,
134+
null
135+
],
136+
[
137+
"function-token",
138+
"env(",
139+
12,
140+
15,
141+
{
142+
"value": "env"
143+
}
144+
],
145+
[
146+
"ident-token",
147+
"safe-area-inset-top",
148+
16,
149+
34,
150+
{
151+
"value": "safe-area-inset-top"
152+
}
153+
],
154+
[
155+
")-token",
156+
")",
157+
35,
158+
35,
159+
null
160+
]
161+
]
162+
},
163+
"before": [
164+
[
165+
"(-token",
166+
"(",
167+
0,
168+
0,
169+
null
170+
]
171+
],
172+
"after": [
173+
[
174+
")-token",
175+
")",
176+
36,
177+
36,
178+
null
179+
]
180+
]
181+
},
182+
"before": [],
183+
"after": []
184+
}
185+
}
186+
}
187+
]

‎packages/media-query-list-parser/test/cases/mf-plain/0009.mjs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import assert from 'assert';
2+
import { runTest } from '../../util/run-test.mjs';
3+
4+
runTest(
5+
'(min-width: env(safe-area-inset-top))',
6+
'mf-plain/0009',
7+
(actual, expected) => {
8+
assert.deepStrictEqual(
9+
actual,
10+
expected,
11+
);
12+
},
13+
);

0 commit comments

Comments
 (0)