add detection for env functions (#921)

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

@@ -2,7 +2,8 @@
 
 ### Unreleased (patch)
 
-- Improve the detection of math function in media queries.
+- Add support for `env()` functions as values in media queries.
+- Improve the detection of math function as values in media queries.
 
 ### 2.0.2 (March 25, 2023)
 

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

@@ -2,3 +2,4 @@ import { ComponentValue } from '@csstools/css-parser-algorithms';
 export declare function isNumber(componentValue: ComponentValue): boolean;
 export declare function isDimension(componentValue: ComponentValue): boolean;
 export declare function isIdent(componentValue: ComponentValue): boolean;
+export declare function isEnvironmentVariable(componentValue: ComponentValue): boolean;

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

@@ -1,6 +1,6 @@
 import { ComponentValue, ComponentValueType, ContainerNode } from '@csstools/css-parser-algorithms';
 import { CSSToken, stringify, TokenType } from '@csstools/css-tokenizer';
-import { isDimension, isIdent, isNumber } from '../util/component-value-is';
+import { isDimension, isEnvironmentVariable, isIdent, isNumber } from '../util/component-value-is';
 import { NodeType } from '../util/node-type';
 
 export class MediaFeatureValue {
@@ -137,6 +137,12 @@ export function parseMediaFeatureValue(componentValues: Array<ComponentValue>):
 			continue;
 		}
 
+		if (isEnvironmentVariable(componentValue)) {
+			candidateIndexStart = i;
+			candidateIndexEnd = i;
+			continue;
+		}
+
 		if (isDimension(componentValue)) {
 			candidateIndexStart = i;
 			candidateIndexEnd = i;

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

@@ -52,3 +52,13 @@ export function isIdent(componentValue: ComponentValue) {
 
 	return false;
 }
+
+export function isEnvironmentVariable(componentValue: ComponentValue) {
+	if (componentValue.type === ComponentValueType.Function &&
+		toLowerCaseAZ(((componentValue as FunctionNode).name as TokenFunction)[4].value) === 'env'
+	) {
+		return true;
+	}
+
+	return false;
+}

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

@@ -0,0 +1,187 @@
+[
+	{
+		"type": "media-query-without-type",
+		"string": "(min-width: env(safe-area-inset-top))",
+		"media": {
+			"type": "media-condition",
+			"media": {
+				"type": "media-in-parens",
+				"media": {
+					"type": "media-feature",
+					"feature": {
+						"type": "mf-plain",
+						"name": {
+							"type": "mf-name",
+							"name": "min-width",
+							"tokens": [
+								[
+									"ident-token",
+									"min-width",
+									1,
+									9,
+									{
+										"value": "min-width"
+									}
+								]
+							]
+						},
+						"value": {
+							"type": "mf-value",
+							"value": {
+								"type": "function",
+								"name": "env",
+								"tokens": [
+									[
+										"function-token",
+										"env(",
+										12,
+										15,
+										{
+											"value": "env"
+										}
+									],
+									[
+										"ident-token",
+										"safe-area-inset-top",
+										16,
+										34,
+										{
+											"value": "safe-area-inset-top"
+										}
+									],
+									[
+										")-token",
+										")",
+										35,
+										35,
+										null
+									]
+								],
+								"value": [
+									{
+										"type": "token",
+										"tokens": [
+											[
+												"ident-token",
+												"safe-area-inset-top",
+												16,
+												34,
+												{
+													"value": "safe-area-inset-top"
+												}
+											]
+										]
+									}
+								]
+							},
+							"tokens": [
+								[
+									"whitespace-token",
+									" ",
+									11,
+									11,
+									null
+								],
+								[
+									"function-token",
+									"env(",
+									12,
+									15,
+									{
+										"value": "env"
+									}
+								],
+								[
+									"ident-token",
+									"safe-area-inset-top",
+									16,
+									34,
+									{
+										"value": "safe-area-inset-top"
+									}
+								],
+								[
+									")-token",
+									")",
+									35,
+									35,
+									null
+								]
+							]
+						},
+						"tokens": [
+							[
+								"ident-token",
+								"min-width",
+								1,
+								9,
+								{
+									"value": "min-width"
+								}
+							],
+							[
+								"colon-token",
+								":",
+								10,
+								10,
+								null
+							],
+							[
+								"whitespace-token",
+								" ",
+								11,
+								11,
+								null
+							],
+							[
+								"function-token",
+								"env(",
+								12,
+								15,
+								{
+									"value": "env"
+								}
+							],
+							[
+								"ident-token",
+								"safe-area-inset-top",
+								16,
+								34,
+								{
+									"value": "safe-area-inset-top"
+								}
+							],
+							[
+								")-token",
+								")",
+								35,
+								35,
+								null
+							]
+						]
+					},
+					"before": [
+						[
+							"(-token",
+							"(",
+							0,
+							0,
+							null
+						]
+					],
+					"after": [
+						[
+							")-token",
+							")",
+							36,
+							36,
+							null
+						]
+					]
+				},
+				"before": [],
+				"after": []
+			}
+		}
+	}
+]

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

@@ -0,0 +1,13 @@
+import assert from 'assert';
+import { runTest } from '../../util/run-test.mjs';
+
+runTest(
+	'(min-width: env(safe-area-inset-top))',
+	'mf-plain/0009',
+	(actual, expected) => {
+		assert.deepStrictEqual(
+			actual,
+			expected,
+		);
+	},
+);