webpack 5.79.0 → 5.81.0

package/lib/container/FallbackDependency.js

@@ -8,6 +8,9 @@
 const Dependency = require("../Dependency");
 const makeSerializable = require("../util/makeSerializable");
 
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+
 class FallbackDependency extends Dependency {
 	constructor(requests) {
 		super();
@@ -29,6 +32,9 @@ class FallbackDependency extends Dependency {
 		return "esm";
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.requests);

package/lib/container/FallbackModule.js

@@ -24,6 +24,8 @@ const FallbackItemDependency = require("./FallbackItemDependency");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
@@ -154,6 +156,9 @@ class FallbackModule extends Module {
 		return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS };
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.requests);

package/lib/container/RemoteModule.js

@@ -23,6 +23,8 @@ const RemoteToExternalDependency = require("./RemoteToExternalDependency");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
@@ -149,6 +151,9 @@ class RemoteModule extends Module {
 		return { sources, data, runtimeRequirements: RUNTIME_REQUIREMENTS };
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this.request);

package/lib/css/CssModulesPlugin.js

@@ -5,8 +5,14 @@
 
 "use strict";
 
-const { ConcatSource } = require("webpack-sources");
+const { ConcatSource, PrefixSource } = require("webpack-sources");
+const CssModule = require("../CssModule");
 const HotUpdateChunk = require("../HotUpdateChunk");
+const {
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_GLOBAL,
+	CSS_MODULE_TYPE_MODULE
+} = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
 const CssExportDependency = require("../dependencies/CssExportDependency");
@@ -125,53 +131,56 @@ class CssModulesPlugin {
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
 				);
-				normalModuleFactory.hooks.createParser
-					.for("css")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser();
-					});
-				normalModuleFactory.hooks.createParser
-					.for("css/global")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser({
-							allowPseudoBlocks: false,
-							allowModeSwitch: false
+				for (const type of [
+					CSS_MODULE_TYPE,
+					CSS_MODULE_TYPE_GLOBAL,
+					CSS_MODULE_TYPE_MODULE
+				]) {
+					normalModuleFactory.hooks.createParser
+						.for(type)
+						.tap(plugin, parserOptions => {
+							validateParserOptions(parserOptions);
+
+							switch (type) {
+								case CSS_MODULE_TYPE:
+									return new CssParser();
+								case CSS_MODULE_TYPE_GLOBAL:
+									return new CssParser({
+										allowPseudoBlocks: false,
+										allowModeSwitch: false
+									});
+								case CSS_MODULE_TYPE_MODULE:
+									return new CssParser({
+										defaultMode: "local"
+									});
+							}
 						});
-					});
-				normalModuleFactory.hooks.createParser
-					.for("css/module")
-					.tap(plugin, parserOptions => {
-						validateParserOptions(parserOptions);
-						return new CssParser({
-							defaultMode: "local"
+					normalModuleFactory.hooks.createGenerator
+						.for(type)
+						.tap(plugin, generatorOptions => {
+							validateGeneratorOptions(generatorOptions);
+							return this._exportsOnly
+								? new CssExportsGenerator()
+								: new CssGenerator();
 						});
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css/global")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
-				normalModuleFactory.hooks.createGenerator
-					.for("css/module")
-					.tap(plugin, generatorOptions => {
-						validateGeneratorOptions(generatorOptions);
-						return this._exportsOnly
-							? new CssExportsGenerator()
-							: new CssGenerator();
-					});
+					normalModuleFactory.hooks.createModuleClass
+						.for(type)
+						.tap(plugin, (createData, resolveData) => {
+							if (resolveData.dependencies.length > 0) {
+								// When CSS is imported from CSS there is only one dependency
+								const dependency = resolveData.dependencies[0];
+
+								return new CssModule({
+									...createData,
+									cssLayer: dependency.layer,
+									supports: dependency.supports,
+									media: dependency.media
+								});
+							}
+
+							return new CssModule(createData);
+						});
+				}
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap("CssModulesPlugin", () => {
 					const { chunkGraph } = compilation;
@@ -401,16 +410,48 @@ class CssModulesPlugin {
 			try {
 				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 
-				const s =
+				let moduleSource =
 					codeGenResult.sources.get("css") ||
 					codeGenResult.sources.get("css-import");
-				if (s) {
-					source.add(s);
+
+				if (module.media) {
+					moduleSource = new ConcatSource(
+						`@media ${module.media} {\n`,
+						new PrefixSource("\t", moduleSource),
+						"}"
+					);
+				}
+
+				if (module.supports) {
+					moduleSource = new ConcatSource(
+						`@supports (${module.supports}) {\n`,
+						new PrefixSource("\t", moduleSource),
+						"}"
+					);
+				}
+
+				// Layer can be anonymous
+				if (module.cssLayer !== undefined && module.cssLayer !== null) {
+					moduleSource = new ConcatSource(
+						`@layer${module.cssLayer ? ` (${module.cssLayer})` : ""} {\n`,
+						new PrefixSource("\t", moduleSource),
+						"}"
+					);
+				}
+
+				if (moduleSource) {
+					source.add(moduleSource);
 					source.add("\n");
 				}
 				const exports =
 					codeGenResult.data && codeGenResult.data.get("css-exports");
-				const moduleId = chunkGraph.getModuleId(module) + "";
+				let moduleId = chunkGraph.getModuleId(module) + "";
+
+				// When `optimization.moduleIds` is `named` the module id is a path, so we need to normalize it between platforms
+				if (typeof moduleId === "string") {
+					moduleId = moduleId.replace(/\\/g, "/");
+				}
+
 				metaData.push(
 					`${
 						exports

package/lib/css/CssParser.js

@@ -17,21 +17,57 @@ const walkCssTokens = require("./walkCssTokens");
 
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
-
 const CC_LEFT_CURLY = "{".charCodeAt(0);
 const CC_RIGHT_CURLY = "}".charCodeAt(0);
 const CC_COLON = ":".charCodeAt(0);
 const CC_SLASH = "/".charCodeAt(0);
 const CC_SEMICOLON = ";".charCodeAt(0);
 
-const cssUnescape = str => {
-	return str.replace(/\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g, match => {
-		if (match.length > 2) {
-			return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
-		} else {
-			return match[1];
+// https://www.w3.org/TR/css-syntax-3/#newline
+// We don't have `preprocessing` stage, so we need specify all of them
+const STRING_MULTILINE = /\\[\n\r\f]/g;
+// https://www.w3.org/TR/css-syntax-3/#whitespace
+const TRIM_WHITE_SPACES = /(^[ \t\n\r\f]*|[ \t\n\r\f]*$)/g;
+const UNESCAPE = /\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g;
+const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
+const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/;
+const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY =
+	/^(-\w+-)?animation(-name)?$/i;
+
+const normalizeUrl = (str, isString) => {
+	// Remove extra spaces and newlines:
+	// `url("im\
+	// g.png")`
+	if (isString) {
+		str = str.replace(STRING_MULTILINE, "");
+	}
+
+	str = str
+		// Remove unnecessary spaces from `url("   img.png	 ")`
+		.replace(TRIM_WHITE_SPACES, "")
+		// Unescape
+		.replace(UNESCAPE, match => {
+			if (match.length > 2) {
+				return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
+			} else {
+				return match[1];
+			}
+		});
+
+	if (/^data:/i.test(str)) {
+		return str;
+	}
+
+	if (str.includes("%")) {
+		// Convert `url('%2E/img.png')` -> `url('./img.png')`
+		try {
+			str = decodeURIComponent(str);
+		} catch (error) {
+			// Ignore
 		}
-	});
+	}
+
+	return str;
 };
 
 class LocConverter {
@@ -73,10 +109,8 @@ const CSS_MODE_TOP_LEVEL = 0;
 const CSS_MODE_IN_RULE = 1;
 const CSS_MODE_IN_LOCAL_RULE = 2;
 const CSS_MODE_AT_IMPORT_EXPECT_URL = 3;
-// TODO implement layer and supports for @import
-const CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS = 4;
-const CSS_MODE_AT_IMPORT_EXPECT_MEDIA = 5;
-const CSS_MODE_AT_OTHER = 6;
+const CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA = 4;
+const CSS_MODE_AT_OTHER = 5;
 
 const explainMode = mode => {
 	switch (mode) {
@@ -88,10 +122,8 @@ const explainMode = mode => {
 			return "parsing css rule content (local)";
 		case CSS_MODE_AT_IMPORT_EXPECT_URL:
 			return "parsing @import (expecting url)";
-		case CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS:
-			return "parsing @import (expecting optionally supports or media query)";
-		case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-			return "parsing @import (expecting optionally media query)";
+		case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA:
+			return "parsing @import (expecting optionally layer, supports or media query)";
 		case CSS_MODE_AT_OTHER:
 			return "parsing at-rule";
 		default:
@@ -132,13 +164,15 @@ class CssParser extends Parser {
 
 		const locConverter = new LocConverter(source);
 		let mode = CSS_MODE_TOP_LEVEL;
-		let modePos = 0;
 		let modeNestingLevel = 0;
 		let modeData = undefined;
 		let singleClassSelector = undefined;
 		let lastIdentifier = undefined;
-		const modeStack = [];
 		let awaitRightParenthesis = false;
+		/** @type [string, number, number][] */
+		let balanced = [];
+		const modeStack = [];
+
 		const isTopLevelLocal = () =>
 			modeData === "local" ||
 			(this.defaultMode === "local" && modeData === undefined);
@@ -279,8 +313,7 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
-				propertyName.toLowerCase() === "animation-name" ||
-				propertyName.toLowerCase() === "animation"
+				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
 			) {
 				modeData = "animation";
 				lastIdentifier = undefined;
@@ -302,25 +335,39 @@ class CssParser extends Parser {
 		const eatNameInVar = eatUntil(",)};/");
 		walkCssTokens(source, {
 			isSelector: () => {
-				return mode !== CSS_MODE_IN_RULE && mode !== CSS_MODE_IN_LOCAL_RULE;
+				return (
+					mode !== CSS_MODE_IN_RULE &&
+					mode !== CSS_MODE_IN_LOCAL_RULE &&
+					mode !== CSS_MODE_AT_IMPORT_EXPECT_URL &&
+					mode !== CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA
+				);
 			},
-			url: (input, start, end, contentStart, contentEnd) => {
-				const value = cssUnescape(input.slice(contentStart, contentEnd));
+			url: (input, start, end, contentStart, contentEnd, isString) => {
+				let value = normalizeUrl(
+					input.slice(contentStart, contentEnd),
+					isString
+				);
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						modeData.url = value;
-						mode = CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS;
+						modeData.lastPos = end;
+						mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+						break;
+					}
+					// Do not parse URLs in `supports(...)`
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
 						break;
 					}
-					case CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS:
-					case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-						throw new Error(
-							`Unexpected ${input.slice(
-								start,
-								end
-							)} at ${start} during ${explainMode(mode)}`
-						);
 					default: {
+						if (
+							// Ignore `url(#highlight)` URLs
+							/^#/.test(value) ||
+							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+							value.length === 0
+						) {
+							break;
+						}
+
 						const dep = new CssUrlDependency(value, [start, end], "url");
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(end);
@@ -335,10 +382,54 @@ class CssParser extends Parser {
 			string: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
-						modeData.url = cssUnescape(input.slice(start + 1, end - 1));
-						mode = CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS;
+						modeData.url = normalizeUrl(input.slice(start + 1, end - 1), true);
+						modeData.lastPos = end;
+						const insideURLFunction =
+							balanced[balanced.length - 1] &&
+							balanced[balanced.length - 1][0] === "url";
+
+						if (!insideURLFunction) {
+							mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+						}
 						break;
 					}
+					// Do not parse URLs in `supports(...)`
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						break;
+					}
+					default: {
+						// TODO move escaped parsing to tokenizer
+						const last = balanced[balanced.length - 1];
+
+						if (
+							last &&
+							(last[0].replace(/\\/g, "").toLowerCase() === "url" ||
+								IMAGE_SET_FUNCTION.test(last[0].replace(/\\/g, "")))
+						) {
+							let value = normalizeUrl(input.slice(start + 1, end - 1), true);
+
+							if (
+								// Ignore `url(#highlight)` URLs
+								/^#/.test(value) ||
+								// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+								value.length === 0
+							) {
+								break;
+							}
+
+							const isUrl = last[0].replace(/\\/g, "").toLowerCase() === "url";
+							const dep = new CssUrlDependency(
+								value,
+								[start, end],
+								isUrl ? "string" : "url"
+							);
+							const { line: sl, column: sc } = locConverter.get(start);
+							const { line: el, column: ec } = locConverter.get(end);
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
+							module.addCodeGenerationDependency(dep);
+						}
+					}
 				}
 				return end;
 			},
@@ -354,14 +445,16 @@ class CssParser extends Parser {
 						);
 					}
 					mode = CSS_MODE_AT_IMPORT_EXPECT_URL;
-					modePos = end;
 					modeData = {
-						start: start,
+						atRuleStart: start,
+						lastPos: end,
 						url: undefined,
-						supports: undefined
+						layer: undefined,
+						supports: undefined,
+						media: undefined
 					};
 				}
-				if (name === "@keyframes") {
+				if (OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)) {
 					let pos = end;
 					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 					if (pos === input.length) return pos;
@@ -400,20 +493,40 @@ class CssParser extends Parser {
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL:
 						throw new Error(`Expected URL for @import at ${start}`);
-					case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-					case CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS: {
-						const { line: sl, column: sc } = locConverter.get(modeData.start);
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						if (modeData.url === undefined) {
+							throw new Error(
+								`Expected URL for @import at ${modeData.atRuleStart}`
+							);
+						}
+						const semicolonPos = end;
+						const { line: sl, column: sc } = locConverter.get(
+							modeData.atRuleStart
+						);
 						const { line: el, column: ec } = locConverter.get(end);
-						end = eatWhiteLine(input, end);
-						const media = input.slice(modePos, start).trim();
+						const pos = walkCssTokens.eatWhitespaceAndComments(
+							input,
+							modeData.lastPos
+						);
+						// Prevent to consider comments as a part of media query
+						if (pos !== semicolonPos - 1) {
+							modeData.media = input
+								.slice(modeData.lastPos, semicolonPos - 1)
+								.trim();
+						}
 						const dep = new CssImportDependency(
-							modeData.url,
+							modeData.url.trim(),
 							[modeData.start, end],
+							modeData.layer,
 							modeData.supports,
-							media
+							modeData.media && modeData.media.length > 0
+								? modeData.media
+								: undefined
 						);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
+						modeData = undefined;
+						mode = CSS_MODE_TOP_LEVEL;
 						break;
 					}
 					case CSS_MODE_IN_LOCAL_RULE: {
@@ -488,6 +601,13 @@ class CssParser extends Parser {
 							lastIdentifier = [start, end];
 						}
 						break;
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						if (input.slice(start, end).toLowerCase() === "layer") {
+							modeData.layer = "";
+							modeData.lastPos = end;
+						}
+						break;
+					}
 				}
 				return end;
 			},
@@ -513,7 +633,40 @@ class CssParser extends Parser {
 				}
 				return end;
 			},
+			function: (input, start, end) => {
+				let name = input.slice(start, end - 1);
+
+				balanced.push([name, start, end]);
+
+				switch (mode) {
+					case CSS_MODE_IN_LOCAL_RULE: {
+						name = name.toLowerCase();
+
+						if (name === "var") {
+							let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
+							if (pos === input.length) return pos;
+							const [newPos, name] = eatText(input, pos, eatNameInVar);
+							if (!name.startsWith("--")) return end;
+							const { line: sl, column: sc } = locConverter.get(pos);
+							const { line: el, column: ec } = locConverter.get(newPos);
+							const dep = new CssSelfLocalIdentifierDependency(
+								name.slice(2),
+								[pos, newPos],
+								"--",
+								declaredCssVariables
+							);
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
+							return newPos;
+						}
+						break;
+					}
+				}
+				return end;
+			},
 			leftParenthesis: (input, start, end) => {
+				balanced.push(["(", start, end]);
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
 						modeStack.push(false);
@@ -523,6 +676,10 @@ class CssParser extends Parser {
 				return end;
 			},
 			rightParenthesis: (input, start, end) => {
+				const last = balanced[balanced.length - 1];
+
+				balanced.pop();
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
 						if (awaitRightParenthesis) {
@@ -536,7 +693,25 @@ class CssParser extends Parser {
 						}
 						break;
 					}
+					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
+						if (last && last[0] === "url") {
+							modeData.lastPos = end;
+							mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+						}
+						break;
+					}
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						if (last && last[0].toLowerCase() === "layer") {
+							modeData.layer = input.slice(last[2], end - 1).trim();
+							modeData.lastPos = end;
+						} else if (last && last[0].toLowerCase() === "supports") {
+							modeData.supports = input.slice(last[2], end - 1).trim();
+							modeData.lastPos = end;
+						}
+						break;
+					}
 				}
+
 				return end;
 			},
 			pseudoClass: (input, start, end) => {
@@ -564,9 +739,14 @@ class CssParser extends Parser {
 				return end;
 			},
 			pseudoFunction: (input, start, end) => {
+				let name = input.slice(start, end - 1);
+
+				balanced.push([name, start, end]);
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end - 1).toLowerCase();
+						name = name.toLowerCase();
+
 						if (this.allowModeSwitch && name === ":global") {
 							modeStack.push(modeData);
 							modeData = "global";
@@ -586,32 +766,6 @@ class CssParser extends Parser {
 				}
 				return end;
 			},
-			function: (input, start, end) => {
-				switch (mode) {
-					case CSS_MODE_IN_LOCAL_RULE: {
-						const name = input.slice(start, end - 1).toLowerCase();
-						if (name === "var") {
-							let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
-							if (pos === input.length) return pos;
-							const [newPos, name] = eatText(input, pos, eatNameInVar);
-							if (!name.startsWith("--")) return end;
-							const { line: sl, column: sc } = locConverter.get(pos);
-							const { line: el, column: ec } = locConverter.get(newPos);
-							const dep = new CssSelfLocalIdentifierDependency(
-								name.slice(2),
-								[pos, newPos],
-								"--",
-								declaredCssVariables
-							);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-							return newPos;
-						}
-						break;
-					}
-				}
-				return end;
-			},
 			comma: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: