diff --git a/.changeset/fifty-poets-play.md b/.changeset/fifty-poets-play.md
new file mode 100644
index 000000000..5c6d05098
--- /dev/null
+++ b/.changeset/fifty-poets-play.md
@@ -0,0 +1,5 @@
+---
+"webpack": minor
+---
+
+Handle more at-rules for CSS modules
diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js
index 5fd0aec78..b24c887b2 100644
--- a/lib/css/CssParser.js
+++ b/lib/css/CssParser.js
@@ -63,6 +63,9 @@ 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 LIST_STYLE_PROPERTY = /^(list-style(-type)?)$/i;
+const COUNTER_STYLE_PROPERTIES = /^(system|fallback|speak-as)$/i;
+const CONTAINER_PROPERTY = /^(container(-name)?)$/i;
 const COMPOSES_PROPERTY = /^(composes|compose-with)$/i;
 const IS_MODULES = /\.module(s)?\.[^.]+$/i;
 const CSS_COMMENT = /\/\*((?!\*\/).*?)\*\//g;
@@ -238,6 +241,17 @@ const unescapeIdentifier = (str) => {
 	return ret;
 };
 
+/**
+ * A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
+ * The <custom-property-name> production corresponds to this:
+ * it’s defined as any <dashed-ident> (a valid identifier that starts with two dashes),
+ * except -- itself, which is reserved for future use by CSS.
+ * @param {string} identifier identifier
+ * @returns {boolean} true when identifier is dashed, otherwise false
+ */
+const isDashedIdentifier = (identifier) =>
+	identifier.startsWith("--") && identifier.length >= 3;
+
 /** @type {Record<string, number>} */
 const ANIMATION_KEYWORDS = {
 	// animation-direction
@@ -272,6 +286,138 @@ const ANIMATION_KEYWORDS = {
 	"revert-layer": Infinity
 };
 
+/** @type {Record<string, number>} */
+const PREDEFINED_COUNTER_STYLES = {
+	decimal: 1,
+	"decimal-leading-zero": 1,
+	"arabic-indic": 1,
+	armenian: 1,
+	"upper-armenian": 1,
+	"lower-armenian": 1,
+	bengali: 1,
+	cambodian: 1,
+	khmer: 1,
+	"cjk-decimal": 1,
+	devanagari: 1,
+	georgian: 1,
+	gujarati: 1,
+	/* cspell:disable-next-line */
+	gurmukhi: 1,
+	hebrew: 1,
+	kannada: 1,
+	lao: 1,
+	malayalam: 1,
+	mongolian: 1,
+	myanmar: 1,
+	oriya: 1,
+	persian: 1,
+	"lower-roman": 1,
+	"upper-roman": 1,
+	tamil: 1,
+	telugu: 1,
+	thai: 1,
+	tibetan: 1,
+
+	"lower-alpha": 1,
+	"lower-latin": 1,
+	"upper-alpha": 1,
+	"upper-latin": 1,
+	"lower-greek": 1,
+	hiragana: 1,
+	/* cspell:disable-next-line */
+	"hiragana-iroha": 1,
+	katakana: 1,
+	/* cspell:disable-next-line */
+	"katakana-iroha": 1,
+
+	disc: 1,
+	circle: 1,
+	square: 1,
+	"disclosure-open": 1,
+	"disclosure-closed": 1,
+
+	"cjk-earthly-branch": 1,
+	"cjk-heavenly-stem": 1,
+
+	"japanese-informal": 1,
+	"japanese-formal": 1,
+
+	"korean-hangul-formal": 1,
+	/* cspell:disable-next-line */
+	"korean-hanja-informal": 1,
+	/* cspell:disable-next-line */
+	"korean-hanja-formal": 1,
+
+	"simp-chinese-informal": 1,
+	"simp-chinese-formal": 1,
+	"trad-chinese-informal": 1,
+	"trad-chinese-formal": 1,
+	"cjk-ideographic": 1,
+
+	"ethiopic-numeric": 1
+};
+
+/** @type {Record<string, number>} */
+const LIST_STYLE_KEYWORDS = {
+	// list-style-position
+	inside: 1,
+	outside: 1,
+	// list-style-type
+	...PREDEFINED_COUNTER_STYLES,
+	// Special
+	none: Infinity,
+	// Global values
+	initial: Infinity,
+	inherit: Infinity,
+	unset: Infinity,
+	revert: Infinity,
+	"revert-layer": Infinity
+};
+
+/** @type {Record<string, number>} */
+const SYSTEM_KEYWORDS = {
+	cyclic: 1,
+	numeric: 1,
+	alphabetic: 1,
+	symbolic: 1,
+	additive: 1,
+	fixed: 1,
+	extends: 1,
+	...PREDEFINED_COUNTER_STYLES
+};
+
+/** @type {Record<string, number>} */
+const FALLBACK_KEYWORDS = {
+	...PREDEFINED_COUNTER_STYLES
+};
+
+/** @type {Record<string, number>} */
+const SPEAK_AS_KEYWORDS = {
+	auto: 1,
+	bullets: 1,
+	numbers: 1,
+	words: 1,
+	"spell-out": 1,
+	...PREDEFINED_COUNTER_STYLES
+};
+
+/** @type {Record<string, number>} */
+const CONTAINER_KEYWORDS = {
+	// container-type
+	normal: 1,
+	size: 1,
+	"inline-size": 1,
+	"scroll-state": 1,
+	// Special
+	none: Infinity,
+	// Global values
+	initial: Infinity,
+	inherit: Infinity,
+	unset: Infinity,
+	revert: Infinity,
+	"revert-layer": Infinity
+};
+
 class LocConverter {
 	/**
 	 * @param {string} input input
@@ -1152,11 +1298,18 @@ class CssParser extends Parser {
 		/**
 		 * @param {string} input input
 		 * @param {1 | 2} type type of function
+		 * @param {boolean} needExport true when we need to export value, otherwise false
 		 * @param {number} start start position
 		 * @param {number} end end position
 		 * @returns {number} position after handling
 		 */
-		const processLocalOrGlobalFunction = (input, type, start, end) => {
+		const processLocalOrGlobalFunction = (
+			input,
+			type,
+			needExport,
+			start,
+			end
+		) => {
 			// Replace `local(`/` or `global(` (handle legacy `:local(` or `:global(` too)
 			{
 				const isColon = input.charCodeAt(start - 1) === CC_COLON;
@@ -1167,23 +1320,34 @@ class CssParser extends Parser {
 			end = walkCssTokens.consumeUntil(
 				input,
 				start,
-				type === 1
-					? {
-							identifier(input, start, end) {
-								const name = unescapeIdentifier(input.slice(start, end));
-								const { line: sl, column: sc } = locConverter.get(start);
-								const { line: el, column: ec } = locConverter.get(end);
-								const dep = new CssIcssLocalIdentifierDependency(name, [
-									start,
-									end
-								]);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
+				{
+					identifier(input, start, end) {
+						if (type === 1) {
+							const identifier = unescapeIdentifier(input.slice(start, end));
+							const { line: sl, column: sc } = locConverter.get(start);
+							const { line: el, column: ec } = locConverter.get(end);
+							const isDashedIdent = isDashedIdentifier(identifier);
+							const dep = needExport
+								? new CssIcssLocalIdentifierDependency(
+										isDashedIdent ? identifier.slice(2) : identifier,
+										[start, end],
+										isDashedIdent && identifier.length >= 3 ? "--" : ""
+									)
+								: new CssIcssSelfLocalIdentifierDependency(
+										isDashedIdent ? identifier.slice(2) : identifier,
+										undefined,
+										[start, end],
+										isDashedIdent ? "--" : "",
+										isDashedIdent ? declaredCssVariables : undefined
+									);
 
-								return end;
-							}
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
 						}
-					: {},
+
+						return end;
+					}
+				},
 				{},
 				{ onlyTopLevel: true, functionValue: true }
 			);
@@ -1200,29 +1364,63 @@ class CssParser extends Parser {
 		/**
 		 * @param {string} input input
 		 * @param {number} end name end position
-		 * @param {{ string?: boolean, identifier: boolean, validate?: (name: string) => boolean, dashed?: boolean }} options types which allowed to handle
+		 * @param {{ string?: boolean, identifier?: boolean | RegExp, dashed?: boolean }} options types which allowed to handle
 		 * @returns {number} position after handling
 		 */
 		const processLocalAtRule = (input, end, options) => {
-			/** @type {[number, number, boolean] | undefined} */
-			let value;
 			let found = false;
 
-			walkCssTokens.consumeUntil(
+			return walkCssTokens.consumeUntil(
 				input,
 				end,
 				{
 					string(_input, start, end) {
 						if (!found && options.string) {
+							const value = input.slice(start + 1, end - 1);
+							const { line: sl, column: sc } = locConverter.get(start);
+							const { line: el, column: ec } = locConverter.get(end);
+							const dep = new CssIcssLocalIdentifierDependency(
+								unescapeIdentifier(value),
+								[start, end]
+							);
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
 							found = true;
-							value = [start, end, true];
 						}
 						return end;
 					},
-					identifier(_input, start, end) {
-						if (!found && options.identifier) {
-							found = true;
-							value = [start, end, false];
+					identifier(input, start, end) {
+						if (!found) {
+							const identifier = input.slice(start, end);
+
+							if (
+								options.identifier ||
+								(options.dashed && isDashedIdentifier(identifier))
+							) {
+								const name = unescapeIdentifier(identifier);
+
+								if (
+									options.identifier instanceof RegExp &&
+									options.identifier.test(identifier)
+								) {
+									return end;
+								}
+
+								const { line: sl, column: sc } = locConverter.get(start);
+								const { line: el, column: ec } = locConverter.get(end);
+								const dep = new CssIcssLocalIdentifierDependency(
+									options.dashed ? name.slice(2) : name,
+									[start, end],
+									options.dashed ? "--" : ""
+								);
+								dep.setLoc(sl, sc, el, ec);
+								module.addDependency(dep);
+								found = true;
+
+								if (options.dashed) {
+									declaredCssVariables.add(name.slice(2));
+								}
+							}
 						}
 						return end;
 					}
@@ -1240,7 +1438,17 @@ class CssParser extends Parser {
 
 						if (!found && type) {
 							found = true;
-							return processLocalOrGlobalFunction(input, type, start, end);
+							return processLocalOrGlobalFunction(
+								input,
+								type,
+								true,
+								start,
+								end
+							);
+						}
+
+						if (isLocalMode() && (name === "var" || name === "style")) {
+							return processDashedIdent(input, end, end);
 						}
 
 						return end;
@@ -1248,42 +1456,18 @@ class CssParser extends Parser {
 				},
 				{ onlyTopLevel: true, atRulePrelude: true }
 			);
-			if (!value) return end;
-			let name = value[2]
-				? input.slice(value[0] + 1, value[1] - 1)
-				: input.slice(value[0], value[1]);
-			if (options.validate && !options.validate(name)) return end;
-			name = unescapeIdentifier(name);
-			const { line: sl, column: sc } = locConverter.get(value[0]);
-			const { line: el, column: ec } = locConverter.get(value[1]);
-			if (options.dashed) {
-				name = name.slice(2);
-				declaredCssVariables.add(name);
-			}
-			const dep = new CssIcssLocalIdentifierDependency(
-				name,
-				[value[0], value[1]],
-				options.dashed ? "--" : ""
-			);
-			dep.setLoc(sl, sc, el, ec);
-			module.addDependency(dep);
-			return value[1];
 		};
 		/**
 		 * @param {string} input input
+		 * @param {number} start start position
 		 * @param {number} end end position
+		 * @param {boolean=} declaration true when in declaration, otherwise false
 		 * @returns {number} position after handling
 		 */
-		const processVarFunction = (input, end) => {
-			const customIdent = walkCssTokens.eatIdentSequence(input, end);
+		const processDashedIdent = (input, start, end, declaration) => {
+			const customIdent = walkCssTokens.eatIdentSequence(input, start);
 			if (!customIdent) return end;
-			let name = input.slice(customIdent[0], customIdent[1]);
-			// A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
-			// The <custom-property-name> production corresponds to this:
-			// it’s defined as any <dashed-ident> (a valid identifier that starts with two dashes),
-			// except -- itself, which is reserved for future use by CSS.
-			if (!name.startsWith("--") || name.length < 3) return end;
-			name = unescapeIdentifier(
+			const identifier = unescapeIdentifier(
 				input.slice(customIdent[0] + 2, customIdent[1])
 			);
 			const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments(
@@ -1324,9 +1508,10 @@ class CssParser extends Parser {
 						/** @type {"local" | "global"} */
 						(mode),
 						[customIdent[0], from[1] - 1],
-						name,
-						name,
-						"--"
+						identifier,
+						identifier,
+						"--",
+						0
 					);
 
 					dep.setLoc(sl, sc, el, ec);
@@ -1339,10 +1524,14 @@ class CssParser extends Parser {
 					}
 				}
 			} else {
+				if (declaration) {
+					declaredCssVariables.add(identifier);
+				}
+
 				const { line: sl, column: sc } = locConverter.get(customIdent[0]);
 				const { line: el, column: ec } = locConverter.get(customIdent[1]);
 				const dep = new CssIcssSelfLocalIdentifierDependency(
-					name,
+					identifier,
 					undefined,
 					[customIdent[0], customIdent[1]],
 					"--",
@@ -1372,26 +1561,11 @@ class CssParser extends Parser {
 			);
 			if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return end;
 			pos = propertyNameEnd + 1;
-			if (propertyName.startsWith("--") && propertyName.length >= 3) {
-				// CSS Variable
-				const { line: sl, column: sc } = locConverter.get(propertyNameStart);
-				const { line: el, column: ec } = locConverter.get(propertyNameEnd);
-				const name = unescapeIdentifier(propertyName.slice(2));
-				const dep = new CssIcssLocalIdentifierDependency(
-					name,
-					[propertyNameStart, propertyNameEnd],
-					"--"
-				);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
-				declaredCssVariables.add(name);
-			} else if (
-				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
-			) {
+			if (OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)) {
 				/** @type {[number, number, boolean][]} */
 				const animationNames = [];
 				/** @type {Record<string, number>} */
-				let parsedAnimationKeywords = Object.create(null);
+				let parsedKeywords = Object.create(null);
 
 				const end = walkCssTokens.consumeUntil(
 					input,
@@ -1403,16 +1577,17 @@ class CssParser extends Parser {
 							return end;
 						},
 						identifier(input, start, end) {
-							const keyword = input.slice(start, end).toLowerCase();
+							const identifier = input.slice(start, end);
+							const keyword = identifier.toLowerCase();
 
-							parsedAnimationKeywords[keyword] =
-								typeof parsedAnimationKeywords[keyword] !== "undefined"
-									? parsedAnimationKeywords[keyword] + 1
+							parsedKeywords[keyword] =
+								typeof parsedKeywords[keyword] !== "undefined"
+									? parsedKeywords[keyword] + 1
 									: 0;
 
 							if (
 								ANIMATION_KEYWORDS[keyword] &&
-								parsedAnimationKeywords[keyword] < ANIMATION_KEYWORDS[keyword]
+								parsedKeywords[keyword] < ANIMATION_KEYWORDS[keyword]
 							) {
 								return end;
 							}
@@ -1421,7 +1596,7 @@ class CssParser extends Parser {
 							return end;
 						},
 						comma(_input, _start, end) {
-							parsedAnimationKeywords = {};
+							parsedKeywords = {};
 
 							return end;
 						}
@@ -1433,15 +1608,21 @@ class CssParser extends Parser {
 								.replace(/\\/g, "")
 								.toLowerCase();
 
-							if (isLocalMode() && name === "var") {
-								return processVarFunction(input, end);
-							}
-
 							const type =
 								name === "local" ? 1 : name === "global" ? 2 : undefined;
 
 							if (type) {
-								return processLocalOrGlobalFunction(input, type, start, end);
+								return processLocalOrGlobalFunction(
+									input,
+									type,
+									false,
+									start,
+									end
+								);
+							}
+
+							if (isLocalMode() && name === "var") {
+								return processDashedIdent(input, end, end);
 							}
 
 							return end;
@@ -1470,6 +1651,253 @@ class CssParser extends Parser {
 					}
 				}
 
+				return end;
+			} else if (LIST_STYLE_PROPERTY.test(propertyName)) {
+				/** @type {[number, number][]} */
+				const counterStyleNames = [];
+				/** @type {Record<string, number>} */
+				const parsedKeywords = Object.create(null);
+
+				const end = walkCssTokens.consumeUntil(
+					input,
+					pos,
+					{
+						identifier(input, start, end) {
+							const identifier = input.slice(start, end);
+							const keyword = identifier.toLowerCase();
+
+							parsedKeywords[keyword] =
+								typeof parsedKeywords[keyword] !== "undefined"
+									? parsedKeywords[keyword] + 1
+									: 0;
+
+							if (
+								LIST_STYLE_KEYWORDS[keyword] &&
+								parsedKeywords[keyword] < LIST_STYLE_KEYWORDS[keyword]
+							) {
+								return end;
+							}
+
+							counterStyleNames.push([start, end]);
+							return end;
+						}
+					},
+					{
+						function(input, start, end) {
+							const name = input
+								.slice(start, end - 1)
+								.replace(/\\/g, "")
+								.toLowerCase();
+
+							const type =
+								name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+							if (type) {
+								return processLocalOrGlobalFunction(
+									input,
+									type,
+									false,
+									start,
+									end
+								);
+							}
+
+							if (isLocalMode() && name === "var") {
+								return processDashedIdent(input, end, end);
+							}
+
+							return end;
+						}
+					},
+					{ onlyTopLevel: true, declarationValue: true }
+				);
+
+				if (counterStyleNames.length > 0) {
+					for (const counterStyleName of counterStyleNames) {
+						const { line: sl, column: sc } = locConverter.get(
+							counterStyleName[0]
+						);
+						const { line: el, column: ec } = locConverter.get(
+							counterStyleName[1]
+						);
+						const [start, end] = counterStyleName;
+						const type = unescapeIdentifier(input.slice(start, end));
+						const dep = new CssIcssSelfLocalIdentifierDependency(
+							type,
+							undefined,
+							[start, end]
+						);
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+				}
+
+				return end;
+			} else if (COUNTER_STYLE_PROPERTIES.test(propertyName)) {
+				/** @type {[number, number][]} */
+				const counterStyleNames = [];
+				/** @type {Record<string, number>} */
+				const parsedKeywords = Object.create(null);
+
+				const end = walkCssTokens.consumeUntil(
+					input,
+					pos,
+					{
+						identifier(input, start, end) {
+							const identifier = input.slice(start, end);
+							const keyword = identifier.toLowerCase();
+
+							parsedKeywords[keyword] =
+								typeof parsedKeywords[keyword] !== "undefined"
+									? parsedKeywords[keyword] + 1
+									: 0;
+
+							const keywords =
+								propertyName.toLowerCase() === "system"
+									? SYSTEM_KEYWORDS
+									: propertyName.toLowerCase() === "fallback"
+										? FALLBACK_KEYWORDS
+										: SPEAK_AS_KEYWORDS;
+
+							if (
+								keywords[keyword] &&
+								parsedKeywords[keyword] < keywords[keyword]
+							) {
+								return end;
+							}
+
+							counterStyleNames.push([start, end]);
+							return end;
+						}
+					},
+					{
+						function(input, start, end) {
+							const name = input
+								.slice(start, end - 1)
+								.replace(/\\/g, "")
+								.toLowerCase();
+
+							const type =
+								name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+							if (type) {
+								return processLocalOrGlobalFunction(
+									input,
+									type,
+									false,
+									start,
+									end
+								);
+							}
+
+							if (isLocalMode() && name === "var") {
+								return processDashedIdent(input, end, end);
+							}
+
+							return end;
+						}
+					},
+					{ onlyTopLevel: true, declarationValue: true }
+				);
+
+				if (counterStyleNames.length > 0) {
+					for (const counterName of counterStyleNames) {
+						const { line: sl, column: sc } = locConverter.get(counterName[0]);
+						const { line: el, column: ec } = locConverter.get(counterName[1]);
+						const [start, end] = counterName;
+						const type = unescapeIdentifier(input.slice(start, end));
+						const dep = new CssIcssSelfLocalIdentifierDependency(
+							type,
+							undefined,
+							[start, end]
+						);
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+				}
+
+				return end;
+			} else if (CONTAINER_PROPERTY.test(propertyName)) {
+				/** @type {[number, number][]} */
+				const counterNames = [];
+				/** @type {Record<string, number>} */
+				const parsedContainerKeywords = Object.create(null);
+
+				const end = walkCssTokens.consumeUntil(
+					input,
+					pos,
+					{
+						identifier(input, start, end) {
+							const identifier = input.slice(start, end);
+
+							if (isLocalMode() && isDashedIdentifier(identifier)) {
+								return processDashedIdent(input, start, end);
+							}
+
+							const keyword = identifier.toLowerCase();
+
+							parsedContainerKeywords[keyword] =
+								typeof parsedContainerKeywords[keyword] !== "undefined"
+									? parsedContainerKeywords[keyword] + 1
+									: 0;
+
+							if (
+								CONTAINER_KEYWORDS[keyword] &&
+								parsedContainerKeywords[keyword] < CONTAINER_KEYWORDS[keyword]
+							) {
+								return end;
+							}
+
+							counterNames.push([start, end]);
+							return end;
+						}
+					},
+					{
+						function(input, start, end) {
+							const name = input
+								.slice(start, end - 1)
+								.replace(/\\/g, "")
+								.toLowerCase();
+
+							const type =
+								name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+							if (type) {
+								return processLocalOrGlobalFunction(
+									input,
+									type,
+									false,
+									start,
+									end
+								);
+							}
+
+							if (isLocalMode() && name === "var") {
+								return processDashedIdent(input, end, end);
+							}
+
+							return end;
+						}
+					},
+					{ onlyTopLevel: true, declarationValue: true }
+				);
+
+				if (counterNames.length > 0) {
+					for (const counterName of counterNames) {
+						const { line: sl, column: sc } = locConverter.get(counterName[0]);
+						const { line: el, column: ec } = locConverter.get(counterName[1]);
+						const [start, end] = counterName;
+						const type = unescapeIdentifier(input.slice(start, end));
+						const dep = new CssIcssSelfLocalIdentifierDependency(
+							type,
+							undefined,
+							[start, end]
+						);
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+				}
+
 				return end;
 			} else if (COMPOSES_PROPERTY.test(propertyName)) {
 				if (lastLocalIdentifiers.length > 1) {
@@ -1782,11 +2210,23 @@ class CssParser extends Parser {
 									string: true,
 									identifier: true
 								});
-							} else if (name === "@property" && isLocalMode()) {
+							} else if (name === "@counter-style") {
 								return processLocalAtRule(input, end, {
-									identifier: true,
-									dashed: true,
-									validate: (name) => name.startsWith("--") && name.length >= 3
+									identifier: true
+								});
+							} else if (name === "@container") {
+								return processLocalAtRule(input, end, {
+									identifier: /^(none|and|or|not)$/
+								});
+							} else if (
+								(name === "@color-profile" ||
+									name === "@font-palette-values" ||
+									name === "@position-try" ||
+									name === "@property") &&
+								isLocalMode()
+							) {
+								return processLocalAtRule(input, end, {
+									dashed: true
 								});
 							} else if (name === "@scope") {
 								isNextRulePrelude = true;
@@ -1808,10 +2248,20 @@ class CssParser extends Parser {
 			},
 			identifier: (input, start, end) => {
 				if (isModules) {
-					const name = input.slice(start, end);
+					const identifier = input.slice(start, end);
 
-					if (icssDefinitions.has(name)) {
-						return processICSSSymbol(name, start, end);
+					if (icssDefinitions.has(identifier)) {
+						return processICSSSymbol(identifier, start, end);
+					}
+
+					if (isLocalMode() && isDashedIdentifier(identifier)) {
+						const isProperty =
+							scope === CSS_MODE_IN_BLOCK &&
+							input.charCodeAt(
+								walkCssTokens.eatWhitespaceAndComments(input, end)
+							) === CC_COLON;
+
+						return processDashedIdent(input, start, end, isProperty);
 					}
 
 					switch (scope) {
@@ -1972,8 +2422,6 @@ class CssParser extends Parser {
 					default: {
 						if (this.url && IMAGE_SET_FUNCTION.test(name)) {
 							return processImageSetFunction(input, start, end);
-						} else if (isLocalMode() && name === "var") {
-							return processVarFunction(input, end);
 						}
 					}
 				}
diff --git a/lib/css/walkCssTokens.js b/lib/css/walkCssTokens.js
index e5e2ecb7e..41fc48b65 100644
--- a/lib/css/walkCssTokens.js
+++ b/lib/css/walkCssTokens.js
@@ -1201,7 +1201,7 @@ module.exports = (input, pos = 0, callbacks = {}) => {
  * @param {string} input input css
  * @param {number} pos pos
  * @param {CssTokenCallbacks} callbacks callbacks
- * @param {CssTokenCallbacks} additional additional callbacks
+ * @param {CssTokenCallbacks=} additional additional callbacks
  * @param {{ onlyTopLevel?: boolean, declarationValue?: boolean, atRulePrelude?: boolean, functionValue?: boolean }=} options options
  * @returns {number} pos
  */
@@ -1221,7 +1221,7 @@ const consumeUntil = (input, pos, callbacks, additional, options = {}) => {
 				needHandle = false;
 			}
 
-			if (additional.function !== undefined) {
+			if (additional && additional.function !== undefined) {
 				return additional.function(input, start, end);
 			}
 
@@ -1265,6 +1265,10 @@ const consumeUntil = (input, pos, callbacks, additional, options = {}) => {
 			needTerminate = true;
 			return end;
 		};
+		servicedCallbacks.semicolon = (_input, _start, end) => {
+			needTerminate = true;
+			return end;
+		};
 	}
 
 	while (pos < input.length) {
diff --git a/lib/dependencies/CssIcssFromIdentifierDependency.js b/lib/dependencies/CssIcssFromIdentifierDependency.js
index f7d57b71c..aced6f04d 100644
--- a/lib/dependencies/CssIcssFromIdentifierDependency.js
+++ b/lib/dependencies/CssIcssFromIdentifierDependency.js
@@ -24,6 +24,7 @@ const ModuleDependency = require("./ModuleDependency");
 /** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
 /** @typedef {import("../css/CssGenerator")} CssGenerator */
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
+/** @typedef {import("./CssIcssExportDependency").ExportMode} ExportMode */
 
 class CssIcssFromIdentifierDependency extends CssIcssImportDependency {
 	/**
@@ -33,14 +34,18 @@ class CssIcssFromIdentifierDependency extends CssIcssImportDependency {
 	 * @param {string} name import class name
 	 * @param {string} exportName export class name
 	 * @param {string=} prefix prefix
+	 * @param {ExportMode=} exportMode override export mode
 	 */
-	constructor(request, mode, range, name, exportName, prefix) {
+	constructor(request, mode, range, name, exportName, prefix, exportMode) {
 		super(request, range, mode, name);
 		this.exportName = exportName;
 		this.value = name;
 		this.prefix = prefix;
 		this.interpolationMode = CssIcssExportDependency.INTERPOLATION_MODE.VALUE;
-		this.exportMode = CssIcssExportDependency.EXPORT_MODE.APPEND;
+		this.exportMode =
+			typeof exportMode !== "undefined"
+				? exportMode
+				: CssIcssExportDependency.EXPORT_MODE.APPEND;
 	}
 
 	get type() {
diff --git a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
index faaa5b352..8f88b51da 100644
--- a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
+++ b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
@@ -179,6 +179,7 @@ Object {
   "supports": "style_module_css-displayGridInSupports",
   "supportsInMedia": "style_module_css-displayFlexInSupportsInMedia",
   "supportsWithOperator": "style_module_css-floatRightInNegativeSupports",
+  "textColor": "--style_module_css-text-color",
   "vars": "--style_module_css-local-color style_module_css-vars undefined style_module_css-globalVars",
   "webkitAnyWmultiParams": "style_module_css-local16",
   "whereWmultiParams": "style_module_css-local10",
@@ -544,35 +545,35 @@ div {
 }
 
 .var-function_module_css-from {
-	color: var(--my-var-u1 );
+	color: var(--var-function-export_modules_css-my-var-u1);
 }
 
 .var-function_module_css-from-1 {
-	color: var(--var-function_module_css-main-bg-color, var(--my-var-u1 ));
+	color: var(--var-function_module_css-main-bg-color, var(--var-function-export_modules_css-my-var-u1));
 }
 
 .var-function_module_css-from-2 {
-	color: var(--my-var-u1 ,  var(--var-function_module_css-main-bg-color));
+	color: var(--var-function-export_modules_css-my-var-u1,  var(--var-function_module_css-main-bg-color));
 }
 
 .var-function_module_css-from-3 {
-	color: var(--my-var-u1 ,  var(--my-var-u2 ));
+	color: var(--var-function-export_modules_css-my-var-u1,  var(--var-function-export_modules_css-my-var-u2));
 }
 
 .var-function_module_css-from-4 {
-	color: var(--1 );
+	color: var(--var-function-export_modules_css-1);
 }
 
 .var-function_module_css-from-5 {
-	color: var(----a );
+	color: var(--var-function-export_modules_css---a);
 }
 
 .var-function_module_css-from-6 {
-	color: var(--main-bg-color );
+	color: var(--var-function-export_modules_css-main-bg-color);
 }
 
 .var-function_module_css-mixed {
-	color: var(--my-var-u1 , var(--my-global, var(--var-function_module_css-main-bg-color, red)));
+	color: var(--var-function-export_modules_css-my-var-u1, var(--my-global, var(--var-function_module_css-main-bg-color, red)));
 }
 
 .var-function_module_css-broken {
@@ -588,7 +589,7 @@ div {
 }
 
 .var-function_module_css-not-override-class {
-	color: var(--not-override-class )
+	color: var(--var-function-export_modules_css-not-override-class)
 }
 
 .var-function_module_css-theme-dark {
@@ -794,6 +795,17 @@ div {
 	color: tan;
 }
 
+/*!************************!*\\\\
+  !*** css ./shared.css ***!
+  \\\\************************/
+:root {
+	--shared_css-from-shared: --shared_css-custom-shared;
+}
+
+@color-profile --shared_css-custom-shared {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
 /*!******************************!*\\\\
   !*** css ./style.module.css ***!
   \\\\******************************/
@@ -1076,7 +1088,7 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style style_module_css-thumbs {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
@@ -1158,7 +1170,7 @@ div {
 		}
 	}
 
-	@container foo {
+	@container style_module_css-foo {
 		background: red;
 
 		.style_module_css-nested-layer {
@@ -1270,7 +1282,7 @@ div {
 	}
 }
 
-@container summary (min-width: 400px) {
+@container style_module_css-summary (min-width: 400px) {
 	@container (width > 400px) {
 		.style_module_css-deep-class-in-container {
 			font-size: 1.5em;
@@ -1569,14 +1581,67 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style style_module_css-thumbs {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
 }
 
 ul {
-	list-style: thumbs;
+	list-style: style_module_css-thumbs;
+}
+
+@counter-style style_module_css-extend-thumbs {
+	fallback: style_module_css-thumbs;
+	system: extends style_module_css-thumbs;
+	speak-as: style_module_css-thumbs;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(img/shape.png);
+	list-style: none;
+	list-style: none disc url(img/shape.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(\\"./img/shape.png\\");
+	list-style: georgian inside url(\\"./img/shape.png\\");
+	list-style: georgian outside url(\\"./img/shape.png\\");
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(\\"./img/shape.png\\");
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(\\"img/shape.png\\") inside;
+
+	/* three values */
+	list-style: lower-roman url(\\"img/shape.png\\") outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: style_module_css-extend-thumbs;
+	list-style: style_module_css-extend-thumbs;
 }
 
 @container (width > 400px) and style(--responsive: true) {
@@ -1584,6 +1649,73 @@ ul {
 		font-size: 1.5em;
 	}
 }
+
+@container style_module_css-tall (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container style_module_css-sticky-heading scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container style_module_css-card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.style_module_css-post {
+	container-name: style_module_css-tall;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: style_module_css-sticky-heading / inline-size;
+	container: style_module_css-sticky-heading / size;
+	container: style_module_css-sticky-heading / scroll-state;
+	--style_module_css-my-var: local(sticky-heading);
+
+	container: var(--style_module_css-my-var);
+	--style_module_css-cards: small;
+	container-type: inline-size;
+}
+
+
+@container style_module_css-summary style(--style_module_css-cards: small) {
+	.style_module_css-card {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -1591,12 +1723,12 @@ ul {
 	}
 }
 
-@font-palette-values --identifier {
+@font-palette-values --style_module_css-identifier {
 	font-family: Bixa;
 }
 
 .style_module_css-my-class {
-	font-palette: --identifier;
+	font-palette: --style_module_css-identifier;
 }
 
 @keyframes style_module_css-foo { /* ... */ }
@@ -1637,27 +1769,27 @@ ul {
 	& .style_module_css-class { opacity: 0; }
 }
 
-@position-try --custom-left {
+@position-try --style_module_css-custom-left {
 	position-area: left;
 	width: 100px;
 	margin: 0 10px 0 0;
 }
 
-@position-try --custom-bottom {
+@position-try --style_module_css-custom-bottom {
 	top: anchor(bottom);
 	justify-self: anchor-center;
 	margin: 10px 0 0 0;
 	position-area: none;
 }
 
-@position-try --custom-right {
+@position-try --style_module_css-custom-right {
 	left: calc(anchor(right) + 10px);
 	align-self: anchor-center;
 	width: 100px;
 	position-area: none;
 }
 
-@position-try --custom-bottom-right {
+@position-try --style_module_css-custom-bottom-right {
 	position-area: bottom right;
 	margin: 10px 0 0 10px;
 }
@@ -1669,8 +1801,8 @@ ul {
 	width: 200px;
 	margin: 0 0 10px 0;
 	position-try-fallbacks:
-		--custom-left, --custom-bottom,
-		--custom-right, --custom-bottom-right;
+		--style_module_css-custom-left, --style_module_css-custom-bottom,
+		--style_module_css-custom-right, --style_module_css-custom-bottom-right;
 }
 
 @page {
@@ -1678,12 +1810,12 @@ ul {
 	margin-top: 4in;
 }
 
-@color-profile --swop5c {
+@color-profile --style_module_css-swop5c {
 	src: url(https://example.org/SWOP2006_Coated5v2.icc);
 }
 
 .style_module_css-header {
-	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--style_module_css-swop5c 0% 70% 20% 0%);
 }
 
 .style_module_css-test {
@@ -1822,6 +1954,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --style_module_css-progress {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.style_module_css-bar {
+	display: inline-block;
+	--style_module_css-progress: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--style_module_css-progress),
+		black var(--style_module_css-progress)
+	);
+	animation: style_module_css-progressAnimation 2.5s ease infinite;
+}
+
+@keyframes style_module_css-progressAnimation {
+	to {
+		--style_module_css-progress: 100%;
+	}
+}
+
 @keyframes style_module_css-initial { /* ... */ }
 @keyframes/**test**/style_module_css-initial { /* ... */ }
 @keyframes/**test**/style_module_css-initial/**test**/{ /* ... */ }
@@ -1960,6 +2117,133 @@ div {
 .style_module_css-exportNameWeirdCharacters {
 	}
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--style_module_css-base-color: #faa6ff;
+	background-color: --transparent(var(--style_module_css-base-color), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--style_module_css-duration: 1s;
+	--style_module_css-easing: linear;
+	result: var(--animation) var(--style_module_css-duration) var(--count) var(--style_module_css-easing);
+}
+
+div {
+	animation: --anim-1s(style_module_css-bounce, 2);
+}
+
+@function --outer(--outer-arg) {
+	--style_module_css-outer-local: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--style_module_css-outer-local));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--style_module_css-mode: sharp;
+}
+
+.style_module_css-apply-sharp {
+	border-radius: if(style(--style_module_css-mode: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.style_module_css-class {
+	background-color: color(--style_module_css-swop5c 0% 70% 20% 0%);
+	background-color: color(local(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(:local(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(global(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(:global(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--shared_css-from-shared 0% 70% 20% 0%);
+	background-color: color(local(--style_module_css-swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--style_module_css-swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--style_module_css-text-color: #eee;
+}
+
+.style_module_css-simple {
+	color: var(--style_module_css-text-color);
+}
+
+/* Just nesting */
+.style_module_css-theme-dark {
+	--style_module_css-text-color: #fff;
+	--style_module_css-bg-color: #333;
+
+	.style_module_css-button {
+		--style_module_css-button-color: var(--style_module_css-text-color);
+		--style_module_css-button-bg: var(--style_module_css-bg-color);
+		color: var(--style_module_css-button-color);
+		background-color: var(--style_module_css-button-bg);
+	}
+}
+
+/* A container context based on inline size */
+.style_module_css-post {
+	--style_module_css-themeColor: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--style_module_css-themeColor: blue) {
+	.style_module_css-card {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!*********************************!*\\\\
   !*** css ./style.module.my-css ***!
   \\\\*********************************/
@@ -2040,6 +2324,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -2405,35 +2690,35 @@ div {
 }
 
 .n7N3Yd {
-	color: var(--my-var-u1 );
+	color: var(--IUIj4X);
 }
 
 .Cavu2H {
-	color: var(--ir5X1L, var(--my-var-u1 ));
+	color: var(--ir5X1L, var(--IUIj4X));
 }
 
 ._6emYNM {
-	color: var(--my-var-u1 ,  var(--ir5X1L));
+	color: var(--IUIj4X,  var(--ir5X1L));
 }
 
 .XNaXe3 {
-	color: var(--my-var-u1 ,  var(--my-var-u2 ));
+	color: var(--IUIj4X,  var(--_89DIRX));
 }
 
 .mGmB4l {
-	color: var(--1 );
+	color: var(--_5g4K-I);
 }
 
 .znpqdH {
-	color: var(----a );
+	color: var(--_31C3Gv);
 }
 
 .uSxmmJ {
-	color: var(--main-bg-color );
+	color: var(--msAO3F);
 }
 
 .AfNRVE {
-	color: var(--my-var-u1 , var(--my-global, var(--ir5X1L, red)));
+	color: var(--IUIj4X, var(--my-global, var(--ir5X1L, red)));
 }
 
 .Y8L6uE {
@@ -2449,7 +2734,7 @@ div {
 }
 
 ._96YRqM {
-	color: var(--not-override-class )
+	color: var(--TSNC0A)
 }
 
 .fYc0TB {
@@ -2655,6 +2940,17 @@ div {
 	color: tan;
 }
 
+/*!************************!*\\\\
+  !*** css ./shared.css ***!
+  \\\\************************/
+:root {
+	--lKXG0f: --vyaIR5;
+}
+
+@color-profile --vyaIR5 {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
 /*!******************************!*\\\\
   !*** css ./style.module.css ***!
   \\\\******************************/
@@ -2937,7 +3233,7 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style uwNNmq {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
@@ -3019,7 +3315,7 @@ div {
 		}
 	}
 
-	@container foo {
+	@container Pns_CJ {
 		background: red;
 
 		.Sin_15 {
@@ -3131,7 +3427,7 @@ div {
 	}
 }
 
-@container summary (min-width: 400px) {
+@container qYFiUT (min-width: 400px) {
 	@container (width > 400px) {
 		._0Kw8ER {
 			font-size: 1.5em;
@@ -3430,14 +3726,67 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style uwNNmq {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
 }
 
 ul {
-	list-style: thumbs;
+	list-style: uwNNmq;
+}
+
+@counter-style _8HrqS4 {
+	fallback: uwNNmq;
+	system: extends uwNNmq;
+	speak-as: uwNNmq;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(img/shape.png);
+	list-style: none;
+	list-style: none disc url(img/shape.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(\\"./img/shape.png\\");
+	list-style: georgian inside url(\\"./img/shape.png\\");
+	list-style: georgian outside url(\\"./img/shape.png\\");
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(\\"./img/shape.png\\");
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(\\"img/shape.png\\") inside;
+
+	/* three values */
+	list-style: lower-roman url(\\"img/shape.png\\") outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: _8HrqS4;
+	list-style: _8HrqS4;
 }
 
 @container (width > 400px) and style(--responsive: true) {
@@ -3445,6 +3794,73 @@ ul {
 		font-size: 1.5em;
 	}
 }
+
+@container M6rjPY (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container Jsj6BT scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container r3yzH0 (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.rPnlZa {
+	container-name: M6rjPY;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: Jsj6BT / inline-size;
+	container: Jsj6BT / size;
+	container: Jsj6BT / scroll-state;
+	--d1bVSO: local(sticky-heading);
+
+	container: var(--d1bVSO);
+	--K6CLJ5: small;
+	container-type: inline-size;
+}
+
+
+@container qYFiUT style(--K6CLJ5: small) {
+	.r3yzH0 {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -3452,12 +3868,12 @@ ul {
 	}
 }
 
-@font-palette-values --identifier {
+@font-palette-values --wdoIWt {
 	font-family: Bixa;
 }
 
 .Fr8iIT {
-	font-palette: --identifier;
+	font-palette: --wdoIWt;
 }
 
 @keyframes Pns_CJ { /* ... */ }
@@ -3498,27 +3914,27 @@ ul {
 	& .Th9Hcz { opacity: 0; }
 }
 
-@position-try --custom-left {
+@position-try --PgMDE7 {
 	position-area: left;
 	width: 100px;
 	margin: 0 10px 0 0;
 }
 
-@position-try --custom-bottom {
+@position-try --hhKfVV {
 	top: anchor(bottom);
 	justify-self: anchor-center;
 	margin: 10px 0 0 0;
 	position-area: none;
 }
 
-@position-try --custom-right {
+@position-try --KWLHtz {
 	left: calc(anchor(right) + 10px);
 	align-self: anchor-center;
 	width: 100px;
 	position-area: none;
 }
 
-@position-try --custom-bottom-right {
+@position-try --mwT4O_ {
 	position-area: bottom right;
 	margin: 10px 0 0 10px;
 }
@@ -3530,8 +3946,8 @@ ul {
 	width: 200px;
 	margin: 0 0 10px 0;
 	position-try-fallbacks:
-		--custom-left, --custom-bottom,
-		--custom-right, --custom-bottom-right;
+		--PgMDE7, --hhKfVV,
+		--KWLHtz, --mwT4O_;
 }
 
 @page {
@@ -3539,12 +3955,12 @@ ul {
 	margin-top: 4in;
 }
 
-@color-profile --swop5c {
+@color-profile --ROcANu {
 	src: url(https://example.org/SWOP2006_Coated5v2.icc);
 }
 
 .Zq4Bgu {
-	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--ROcANu 0% 70% 20% 0%);
 }
 
 .w_hBjy {
@@ -3683,6 +4099,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --_7d1iGg {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.b5xu71 {
+	display: inline-block;
+	--_7d1iGg: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--_7d1iGg),
+		black var(--_7d1iGg)
+	);
+	animation: _4FiJQA 2.5s ease infinite;
+}
+
+@keyframes _4FiJQA {
+	to {
+		--_7d1iGg: 100%;
+	}
+}
+
 @keyframes _3XWMcj { /* ... */ }
 @keyframes/**test**/_3XWMcj { /* ... */ }
 @keyframes/**test**/_3XWMcj/**test**/{ /* ... */ }
@@ -3761,7 +4202,7 @@ div {
 	--pilraw: 10px;
 	--Pns_CJ: 10px;
 	--b5xu71: calc(var(--Pns_CJ) + 10px);
-	--_8NggIH: linear-gradient(to top, var(--cuyscJ), white);
+	--zMOaz9: linear-gradient(to top, var(--cuyscJ), white);
 	--Xz8Zyw: \\"test\\";
 	--FWUVf6: yellow;
 	--h5_X_2: red;
@@ -3821,6 +4262,133 @@ div {
 .pfrK-J {
 	}
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--_5hZGZD: #faa6ff;
+	background-color: --transparent(var(--_5hZGZD), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--uRmi-O: 1s;
+	--_2c0Pw3: linear;
+	result: var(--animation) var(--uRmi-O) var(--count) var(--_2c0Pw3);
+}
+
+div {
+	animation: --anim-1s(M0uhU5, 2);
+}
+
+@function --outer(--outer-arg) {
+	--sVY4tR: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--sVY4tR));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--_93Jj1p: sharp;
+}
+
+.Y4Gwu3 {
+	border-radius: if(style(--_93Jj1p: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.Th9Hcz {
+	background-color: color(--ROcANu 0% 70% 20% 0%);
+	background-color: color(local(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(:local(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(global(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(:global(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--lKXG0f 0% 70% 20% 0%);
+	background-color: color(local(--ROcANu, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--ROcANu, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--PJiFhP: #eee;
+}
+
+.RRkM-G {
+	color: var(--PJiFhP);
+}
+
+/* Just nesting */
+.yIfcPh {
+	--PJiFhP: #fff;
+	--YI1Kj3: #333;
+
+	.mYBaWo {
+		--VLWr0L: var(--PJiFhP);
+		--I-Ywj4: var(--YI1Kj3);
+		color: var(--VLWr0L);
+		background-color: var(--I-Ywj4);
+	}
+}
+
+/* A container context based on inline size */
+.rPnlZa {
+	--CSr0Ji: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--CSr0Ji: blue) {
+	.r3yzH0 {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!*********************************!*\\\\
   !*** css ./style.module.my-css ***!
   \\\\*********************************/
@@ -3907,6 +4475,7 @@ Object {
   "supports": "style_module_css-displayGridInSupports",
   "supportsInMedia": "style_module_css-displayFlexInSupportsInMedia",
   "supportsWithOperator": "style_module_css-floatRightInNegativeSupports",
+  "textColor": "--style_module_css-text-color",
   "vars": "--style_module_css-local-color style_module_css-vars undefined style_module_css-globalVars",
   "webkitAnyWmultiParams": "style_module_css-local16",
   "whereWmultiParams": "style_module_css-local10",
@@ -3961,6 +4530,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -4015,6 +4585,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -8632,7 +9203,7 @@ Array [
 /* localize animation using special characters */
 .postcss-modules-local-by-default_local_modules_css-foo { animation: postcss-modules-local-by-default_local_modules_css-😃bounce😃; }
 
-/* not localize custom property */
+/* localize custom property */
 .postcss-modules-local-by-default_local_modules_css-foo { animation: postcss-modules-local-by-default_local_modules_css---foo; }
 
 /* not localize name in nested function */
@@ -9088,6 +9659,8 @@ input { a_value: some-value; }
 /* postcss-modules-local-by-default */
 /* TODO not implemented yet */
 
+@keyframes postcss-modules-local-by-default_pure_modules_css-bounce {}
+@keyframes postcss-modules-local-by-default_pure_modules_css-fly {}
 
 /* localize and not localize animation-name in mixed case #3 */
 .postcss-modules-local-by-default_pure_modules_css-foo { animation-name: postcss-modules-local-by-default_pure_modules_css-fadeInOut, moveLeft300px, postcss-modules-local-by-default_pure_modules_css-bounce; }
@@ -11726,11 +12299,131 @@ ul {
 	list-style: thumbs;
 }
 
+@counter-style extend-thumbs {
+	fallback: thumbs;
+	system: extends thumbs;
+	speak-as: thumbs;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(09a1a1112c577c279435.png);
+	list-style: none;
+	list-style: none disc url(09a1a1112c577c279435.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(09a1a1112c577c279435.png);
+	list-style: georgian inside url(09a1a1112c577c279435.png);
+	list-style: georgian outside url(09a1a1112c577c279435.png);
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(09a1a1112c577c279435.png);
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(09a1a1112c577c279435.png) inside;
+
+	/* three values */
+	list-style: lower-roman url(09a1a1112c577c279435.png) outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: extend-thumbs;
+	list-style: extend-thumbs;
+}
+
 @container (width > 400px) and style(--responsive: true) {
 	.class {
 		font-size: 1.5em;
 	}
 }
+
+@container tall (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container sticky-heading scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.post {
+	container-name: tall;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: sticky-heading / inline-size;
+	container: sticky-heading / size;
+	container: sticky-heading / scroll-state;
+	--my-var: local(sticky-heading);
+
+	container: var(--my-var);
+	--cards: small;
+	container-type: inline-size;
+}
+
+
+@container summary style(--cards: small) {
+	.card {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -11969,6 +12662,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --progress {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.bar {
+	display: inline-block;
+	--progress: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--progress),
+		black var(--progress)
+	);
+	animation: progressAnimation 2.5s ease infinite;
+}
+
+@keyframes progressAnimation {
+	to {
+		--progress: 100%;
+	}
+}
+
 @keyframes \\"initial\\" { /* ... */ }
 @keyframes/**test**/\\"initial\\" { /* ... */ }
 @keyframes/**test**/\\"initial\\"/**test**/{ /* ... */ }
@@ -12129,6 +12847,133 @@ div {
 	composes: a -b b- --c c-- _d d\\\\% from \\"./classes.modules.css\\";
 }
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--base-color: #faa6ff;
+	background-color: --transparent(var(--base-color), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--duration: 1s;
+	--easing: linear;
+	result: var(--animation) var(--duration) var(--count) var(--easing);
+}
+
+div {
+	animation: --anim-1s(local(bounce), 2);
+}
+
+@function --outer(--outer-arg) {
+	--outer-local: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--outer-local));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--mode: sharp;
+}
+
+.apply-sharp {
+	border-radius: if(style(--mode: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile local(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile :local(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile global(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile :global(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.class {
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(--swop5c from global 0% 70% 20% 0%);
+	background-color: color(--from-shared from \\"./shared.css\\" 0% 70% 20% 0%);
+	background-color: color(local(--swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--text-color: #eee;
+}
+
+.simple {
+	color: var(--text-color);
+}
+
+/* Just nesting */
+.theme-dark {
+	--text-color: #fff;
+	--bg-color: #333;
+
+	.button {
+		--button-color: var(--text-color);
+		--button-bg: var(--bg-color);
+		color: var(--button-color);
+		background-color: var(--button-bg);
+	}
+}
+
+/* A container context based on inline size */
+.post {
+	--themeColor: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--themeColor: blue) {
+	.card {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!***********************!*\\\\
   !*** css ./style.css ***!
   \\\\***********************/
diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap
index b93e69baa..5e1479cca 100644
--- a/test/__snapshots__/ConfigTestCases.basictest.js.snap
+++ b/test/__snapshots__/ConfigTestCases.basictest.js.snap
@@ -179,6 +179,7 @@ Object {
   "supports": "style_module_css-displayGridInSupports",
   "supportsInMedia": "style_module_css-displayFlexInSupportsInMedia",
   "supportsWithOperator": "style_module_css-floatRightInNegativeSupports",
+  "textColor": "--style_module_css-text-color",
   "vars": "--style_module_css-local-color style_module_css-vars undefined style_module_css-globalVars",
   "webkitAnyWmultiParams": "style_module_css-local16",
   "whereWmultiParams": "style_module_css-local10",
@@ -544,35 +545,35 @@ div {
 }
 
 .var-function_module_css-from {
-	color: var(--my-var-u1 );
+	color: var(--var-function-export_modules_css-my-var-u1);
 }
 
 .var-function_module_css-from-1 {
-	color: var(--var-function_module_css-main-bg-color, var(--my-var-u1 ));
+	color: var(--var-function_module_css-main-bg-color, var(--var-function-export_modules_css-my-var-u1));
 }
 
 .var-function_module_css-from-2 {
-	color: var(--my-var-u1 ,  var(--var-function_module_css-main-bg-color));
+	color: var(--var-function-export_modules_css-my-var-u1,  var(--var-function_module_css-main-bg-color));
 }
 
 .var-function_module_css-from-3 {
-	color: var(--my-var-u1 ,  var(--my-var-u2 ));
+	color: var(--var-function-export_modules_css-my-var-u1,  var(--var-function-export_modules_css-my-var-u2));
 }
 
 .var-function_module_css-from-4 {
-	color: var(--1 );
+	color: var(--var-function-export_modules_css-1);
 }
 
 .var-function_module_css-from-5 {
-	color: var(----a );
+	color: var(--var-function-export_modules_css---a);
 }
 
 .var-function_module_css-from-6 {
-	color: var(--main-bg-color );
+	color: var(--var-function-export_modules_css-main-bg-color);
 }
 
 .var-function_module_css-mixed {
-	color: var(--my-var-u1 , var(--my-global, var(--var-function_module_css-main-bg-color, red)));
+	color: var(--var-function-export_modules_css-my-var-u1, var(--my-global, var(--var-function_module_css-main-bg-color, red)));
 }
 
 .var-function_module_css-broken {
@@ -588,7 +589,7 @@ div {
 }
 
 .var-function_module_css-not-override-class {
-	color: var(--not-override-class )
+	color: var(--var-function-export_modules_css-not-override-class)
 }
 
 .var-function_module_css-theme-dark {
@@ -794,6 +795,17 @@ div {
 	color: tan;
 }
 
+/*!************************!*\\\\
+  !*** css ./shared.css ***!
+  \\\\************************/
+:root {
+	--shared_css-from-shared: --shared_css-custom-shared;
+}
+
+@color-profile --shared_css-custom-shared {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
 /*!******************************!*\\\\
   !*** css ./style.module.css ***!
   \\\\******************************/
@@ -1076,7 +1088,7 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style style_module_css-thumbs {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
@@ -1158,7 +1170,7 @@ div {
 		}
 	}
 
-	@container foo {
+	@container style_module_css-foo {
 		background: red;
 
 		.style_module_css-nested-layer {
@@ -1270,7 +1282,7 @@ div {
 	}
 }
 
-@container summary (min-width: 400px) {
+@container style_module_css-summary (min-width: 400px) {
 	@container (width > 400px) {
 		.style_module_css-deep-class-in-container {
 			font-size: 1.5em;
@@ -1569,14 +1581,67 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style style_module_css-thumbs {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
 }
 
 ul {
-	list-style: thumbs;
+	list-style: style_module_css-thumbs;
+}
+
+@counter-style style_module_css-extend-thumbs {
+	fallback: style_module_css-thumbs;
+	system: extends style_module_css-thumbs;
+	speak-as: style_module_css-thumbs;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(img/shape.png);
+	list-style: none;
+	list-style: none disc url(img/shape.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(\\"./img/shape.png\\");
+	list-style: georgian inside url(\\"./img/shape.png\\");
+	list-style: georgian outside url(\\"./img/shape.png\\");
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(\\"./img/shape.png\\");
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(\\"img/shape.png\\") inside;
+
+	/* three values */
+	list-style: lower-roman url(\\"img/shape.png\\") outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: style_module_css-extend-thumbs;
+	list-style: style_module_css-extend-thumbs;
 }
 
 @container (width > 400px) and style(--responsive: true) {
@@ -1584,6 +1649,73 @@ ul {
 		font-size: 1.5em;
 	}
 }
+
+@container style_module_css-tall (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container style_module_css-sticky-heading scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container style_module_css-card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.style_module_css-post {
+	container-name: style_module_css-tall;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: style_module_css-sticky-heading / inline-size;
+	container: style_module_css-sticky-heading / size;
+	container: style_module_css-sticky-heading / scroll-state;
+	--style_module_css-my-var: local(sticky-heading);
+
+	container: var(--style_module_css-my-var);
+	--style_module_css-cards: small;
+	container-type: inline-size;
+}
+
+
+@container style_module_css-summary style(--style_module_css-cards: small) {
+	.style_module_css-card {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -1591,12 +1723,12 @@ ul {
 	}
 }
 
-@font-palette-values --identifier {
+@font-palette-values --style_module_css-identifier {
 	font-family: Bixa;
 }
 
 .style_module_css-my-class {
-	font-palette: --identifier;
+	font-palette: --style_module_css-identifier;
 }
 
 @keyframes style_module_css-foo { /* ... */ }
@@ -1637,27 +1769,27 @@ ul {
 	& .style_module_css-class { opacity: 0; }
 }
 
-@position-try --custom-left {
+@position-try --style_module_css-custom-left {
 	position-area: left;
 	width: 100px;
 	margin: 0 10px 0 0;
 }
 
-@position-try --custom-bottom {
+@position-try --style_module_css-custom-bottom {
 	top: anchor(bottom);
 	justify-self: anchor-center;
 	margin: 10px 0 0 0;
 	position-area: none;
 }
 
-@position-try --custom-right {
+@position-try --style_module_css-custom-right {
 	left: calc(anchor(right) + 10px);
 	align-self: anchor-center;
 	width: 100px;
 	position-area: none;
 }
 
-@position-try --custom-bottom-right {
+@position-try --style_module_css-custom-bottom-right {
 	position-area: bottom right;
 	margin: 10px 0 0 10px;
 }
@@ -1669,8 +1801,8 @@ ul {
 	width: 200px;
 	margin: 0 0 10px 0;
 	position-try-fallbacks:
-		--custom-left, --custom-bottom,
-		--custom-right, --custom-bottom-right;
+		--style_module_css-custom-left, --style_module_css-custom-bottom,
+		--style_module_css-custom-right, --style_module_css-custom-bottom-right;
 }
 
 @page {
@@ -1678,12 +1810,12 @@ ul {
 	margin-top: 4in;
 }
 
-@color-profile --swop5c {
+@color-profile --style_module_css-swop5c {
 	src: url(https://example.org/SWOP2006_Coated5v2.icc);
 }
 
 .style_module_css-header {
-	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--style_module_css-swop5c 0% 70% 20% 0%);
 }
 
 .style_module_css-test {
@@ -1822,6 +1954,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --style_module_css-progress {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.style_module_css-bar {
+	display: inline-block;
+	--style_module_css-progress: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--style_module_css-progress),
+		black var(--style_module_css-progress)
+	);
+	animation: style_module_css-progressAnimation 2.5s ease infinite;
+}
+
+@keyframes style_module_css-progressAnimation {
+	to {
+		--style_module_css-progress: 100%;
+	}
+}
+
 @keyframes style_module_css-initial { /* ... */ }
 @keyframes/**test**/style_module_css-initial { /* ... */ }
 @keyframes/**test**/style_module_css-initial/**test**/{ /* ... */ }
@@ -1960,6 +2117,133 @@ div {
 .style_module_css-exportNameWeirdCharacters {
 	}
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--style_module_css-base-color: #faa6ff;
+	background-color: --transparent(var(--style_module_css-base-color), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--style_module_css-duration: 1s;
+	--style_module_css-easing: linear;
+	result: var(--animation) var(--style_module_css-duration) var(--count) var(--style_module_css-easing);
+}
+
+div {
+	animation: --anim-1s(style_module_css-bounce, 2);
+}
+
+@function --outer(--outer-arg) {
+	--style_module_css-outer-local: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--style_module_css-outer-local));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--style_module_css-mode: sharp;
+}
+
+.style_module_css-apply-sharp {
+	border-radius: if(style(--style_module_css-mode: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --style_module_css-swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.style_module_css-class {
+	background-color: color(--style_module_css-swop5c 0% 70% 20% 0%);
+	background-color: color(local(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(:local(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(global(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(:global(--style_module_css-swop5c) 0% 70% 20% 0%);
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--shared_css-from-shared 0% 70% 20% 0%);
+	background-color: color(local(--style_module_css-swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--style_module_css-swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--style_module_css-text-color: #eee;
+}
+
+.style_module_css-simple {
+	color: var(--style_module_css-text-color);
+}
+
+/* Just nesting */
+.style_module_css-theme-dark {
+	--style_module_css-text-color: #fff;
+	--style_module_css-bg-color: #333;
+
+	.style_module_css-button {
+		--style_module_css-button-color: var(--style_module_css-text-color);
+		--style_module_css-button-bg: var(--style_module_css-bg-color);
+		color: var(--style_module_css-button-color);
+		background-color: var(--style_module_css-button-bg);
+	}
+}
+
+/* A container context based on inline size */
+.style_module_css-post {
+	--style_module_css-themeColor: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--style_module_css-themeColor: blue) {
+	.style_module_css-card {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!*********************************!*\\\\
   !*** css ./style.module.my-css ***!
   \\\\*********************************/
@@ -2040,6 +2324,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -2405,35 +2690,35 @@ div {
 }
 
 .n7N3Yd {
-	color: var(--my-var-u1 );
+	color: var(--IUIj4X);
 }
 
 .Cavu2H {
-	color: var(--ir5X1L, var(--my-var-u1 ));
+	color: var(--ir5X1L, var(--IUIj4X));
 }
 
 ._6emYNM {
-	color: var(--my-var-u1 ,  var(--ir5X1L));
+	color: var(--IUIj4X,  var(--ir5X1L));
 }
 
 .XNaXe3 {
-	color: var(--my-var-u1 ,  var(--my-var-u2 ));
+	color: var(--IUIj4X,  var(--_89DIRX));
 }
 
 .mGmB4l {
-	color: var(--1 );
+	color: var(--_5g4K-I);
 }
 
 .znpqdH {
-	color: var(----a );
+	color: var(--_31C3Gv);
 }
 
 .uSxmmJ {
-	color: var(--main-bg-color );
+	color: var(--msAO3F);
 }
 
 .AfNRVE {
-	color: var(--my-var-u1 , var(--my-global, var(--ir5X1L, red)));
+	color: var(--IUIj4X, var(--my-global, var(--ir5X1L, red)));
 }
 
 .Y8L6uE {
@@ -2449,7 +2734,7 @@ div {
 }
 
 ._96YRqM {
-	color: var(--not-override-class )
+	color: var(--TSNC0A)
 }
 
 .fYc0TB {
@@ -2655,6 +2940,17 @@ div {
 	color: tan;
 }
 
+/*!************************!*\\\\
+  !*** css ./shared.css ***!
+  \\\\************************/
+:root {
+	--lKXG0f: --vyaIR5;
+}
+
+@color-profile --vyaIR5 {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
 /*!******************************!*\\\\
   !*** css ./style.module.css ***!
   \\\\******************************/
@@ -2937,7 +3233,7 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style uwNNmq {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
@@ -3019,7 +3315,7 @@ div {
 		}
 	}
 
-	@container foo {
+	@container Pns_CJ {
 		background: red;
 
 		.Sin_15 {
@@ -3131,7 +3427,7 @@ div {
 	}
 }
 
-@container summary (min-width: 400px) {
+@container qYFiUT (min-width: 400px) {
 	@container (width > 400px) {
 		._0Kw8ER {
 			font-size: 1.5em;
@@ -3430,14 +3726,67 @@ div {
 	}
 }
 
-@counter-style thumbs {
+@counter-style uwNNmq {
 	system: cyclic;
 	symbols: \\"\\\\1F44D\\";
 	suffix: \\" \\";
 }
 
 ul {
-	list-style: thumbs;
+	list-style: uwNNmq;
+}
+
+@counter-style _8HrqS4 {
+	fallback: uwNNmq;
+	system: extends uwNNmq;
+	speak-as: uwNNmq;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(img/shape.png);
+	list-style: none;
+	list-style: none disc url(img/shape.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(\\"./img/shape.png\\");
+	list-style: georgian inside url(\\"./img/shape.png\\");
+	list-style: georgian outside url(\\"./img/shape.png\\");
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(\\"./img/shape.png\\");
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(\\"img/shape.png\\") inside;
+
+	/* three values */
+	list-style: lower-roman url(\\"img/shape.png\\") outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: _8HrqS4;
+	list-style: _8HrqS4;
 }
 
 @container (width > 400px) and style(--responsive: true) {
@@ -3445,6 +3794,73 @@ ul {
 		font-size: 1.5em;
 	}
 }
+
+@container M6rjPY (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container Jsj6BT scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container r3yzH0 (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.rPnlZa {
+	container-name: M6rjPY;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: Jsj6BT / inline-size;
+	container: Jsj6BT / size;
+	container: Jsj6BT / scroll-state;
+	--d1bVSO: local(sticky-heading);
+
+	container: var(--d1bVSO);
+	--K6CLJ5: small;
+	container-type: inline-size;
+}
+
+
+@container qYFiUT style(--K6CLJ5: small) {
+	.r3yzH0 {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -3452,12 +3868,12 @@ ul {
 	}
 }
 
-@font-palette-values --identifier {
+@font-palette-values --wdoIWt {
 	font-family: Bixa;
 }
 
 .Fr8iIT {
-	font-palette: --identifier;
+	font-palette: --wdoIWt;
 }
 
 @keyframes Pns_CJ { /* ... */ }
@@ -3498,27 +3914,27 @@ ul {
 	& .Th9Hcz { opacity: 0; }
 }
 
-@position-try --custom-left {
+@position-try --PgMDE7 {
 	position-area: left;
 	width: 100px;
 	margin: 0 10px 0 0;
 }
 
-@position-try --custom-bottom {
+@position-try --hhKfVV {
 	top: anchor(bottom);
 	justify-self: anchor-center;
 	margin: 10px 0 0 0;
 	position-area: none;
 }
 
-@position-try --custom-right {
+@position-try --KWLHtz {
 	left: calc(anchor(right) + 10px);
 	align-self: anchor-center;
 	width: 100px;
 	position-area: none;
 }
 
-@position-try --custom-bottom-right {
+@position-try --mwT4O_ {
 	position-area: bottom right;
 	margin: 10px 0 0 10px;
 }
@@ -3530,8 +3946,8 @@ ul {
 	width: 200px;
 	margin: 0 0 10px 0;
 	position-try-fallbacks:
-		--custom-left, --custom-bottom,
-		--custom-right, --custom-bottom-right;
+		--PgMDE7, --hhKfVV,
+		--KWLHtz, --mwT4O_;
 }
 
 @page {
@@ -3539,12 +3955,12 @@ ul {
 	margin-top: 4in;
 }
 
-@color-profile --swop5c {
+@color-profile --ROcANu {
 	src: url(https://example.org/SWOP2006_Coated5v2.icc);
 }
 
 .Zq4Bgu {
-	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--ROcANu 0% 70% 20% 0%);
 }
 
 .w_hBjy {
@@ -3683,6 +4099,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --_7d1iGg {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.b5xu71 {
+	display: inline-block;
+	--_7d1iGg: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--_7d1iGg),
+		black var(--_7d1iGg)
+	);
+	animation: _4FiJQA 2.5s ease infinite;
+}
+
+@keyframes _4FiJQA {
+	to {
+		--_7d1iGg: 100%;
+	}
+}
+
 @keyframes _3XWMcj { /* ... */ }
 @keyframes/**test**/_3XWMcj { /* ... */ }
 @keyframes/**test**/_3XWMcj/**test**/{ /* ... */ }
@@ -3761,7 +4202,7 @@ div {
 	--pilraw: 10px;
 	--Pns_CJ: 10px;
 	--b5xu71: calc(var(--Pns_CJ) + 10px);
-	--_8NggIH: linear-gradient(to top, var(--cuyscJ), white);
+	--zMOaz9: linear-gradient(to top, var(--cuyscJ), white);
 	--Xz8Zyw: \\"test\\";
 	--FWUVf6: yellow;
 	--h5_X_2: red;
@@ -3821,6 +4262,133 @@ div {
 .pfrK-J {
 	}
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--_5hZGZD: #faa6ff;
+	background-color: --transparent(var(--_5hZGZD), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--uRmi-O: 1s;
+	--_2c0Pw3: linear;
+	result: var(--animation) var(--uRmi-O) var(--count) var(--_2c0Pw3);
+}
+
+div {
+	animation: --anim-1s(M0uhU5, 2);
+}
+
+@function --outer(--outer-arg) {
+	--sVY4tR: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--sVY4tR));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--_93Jj1p: sharp;
+}
+
+.Y4Gwu3 {
+	border-radius: if(style(--_93Jj1p: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --ROcANu {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.Th9Hcz {
+	background-color: color(--ROcANu 0% 70% 20% 0%);
+	background-color: color(local(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(:local(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(global(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(:global(--ROcANu) 0% 70% 20% 0%);
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(--lKXG0f 0% 70% 20% 0%);
+	background-color: color(local(--ROcANu, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--ROcANu, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--PJiFhP: #eee;
+}
+
+.RRkM-G {
+	color: var(--PJiFhP);
+}
+
+/* Just nesting */
+.yIfcPh {
+	--PJiFhP: #fff;
+	--YI1Kj3: #333;
+
+	.mYBaWo {
+		--VLWr0L: var(--PJiFhP);
+		--I-Ywj4: var(--YI1Kj3);
+		color: var(--VLWr0L);
+		background-color: var(--I-Ywj4);
+	}
+}
+
+/* A container context based on inline size */
+.rPnlZa {
+	--CSr0Ji: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--CSr0Ji: blue) {
+	.r3yzH0 {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!*********************************!*\\\\
   !*** css ./style.module.my-css ***!
   \\\\*********************************/
@@ -3907,6 +4475,7 @@ Object {
   "supports": "style_module_css-displayGridInSupports",
   "supportsInMedia": "style_module_css-displayFlexInSupportsInMedia",
   "supportsWithOperator": "style_module_css-floatRightInNegativeSupports",
+  "textColor": "--style_module_css-text-color",
   "vars": "--style_module_css-local-color style_module_css-vars undefined style_module_css-globalVars",
   "webkitAnyWmultiParams": "style_module_css-local16",
   "whereWmultiParams": "style_module_css-local10",
@@ -3961,6 +4530,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -4015,6 +4585,7 @@ Object {
   "supports": "qyhlLo",
   "supportsInMedia": "KHcaFg",
   "supportsWithOperator": "NQmDdm",
+  "textColor": "--PJiFhP",
   "vars": "--ZfGW2N I8Lkai undefined Uw64p0",
   "webkitAnyWmultiParams": "piVgU0",
   "whereWmultiParams": "n4-IgX",
@@ -8632,7 +9203,7 @@ Array [
 /* localize animation using special characters */
 .postcss-modules-local-by-default_local_modules_css-foo { animation: postcss-modules-local-by-default_local_modules_css-😃bounce😃; }
 
-/* not localize custom property */
+/* localize custom property */
 .postcss-modules-local-by-default_local_modules_css-foo { animation: postcss-modules-local-by-default_local_modules_css---foo; }
 
 /* not localize name in nested function */
@@ -9088,6 +9659,8 @@ input { a_value: some-value; }
 /* postcss-modules-local-by-default */
 /* TODO not implemented yet */
 
+@keyframes postcss-modules-local-by-default_pure_modules_css-bounce {}
+@keyframes postcss-modules-local-by-default_pure_modules_css-fly {}
 
 /* localize and not localize animation-name in mixed case #3 */
 .postcss-modules-local-by-default_pure_modules_css-foo { animation-name: postcss-modules-local-by-default_pure_modules_css-fadeInOut, moveLeft300px, postcss-modules-local-by-default_pure_modules_css-bounce; }
@@ -11726,11 +12299,131 @@ ul {
 	list-style: thumbs;
 }
 
+@counter-style extend-thumbs {
+	fallback: thumbs;
+	system: extends thumbs;
+	speak-as: thumbs;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(09a1a1112c577c279435.png);
+	list-style: none;
+	list-style: none disc url(09a1a1112c577c279435.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url(09a1a1112c577c279435.png);
+	list-style: georgian inside url(09a1a1112c577c279435.png);
+	list-style: georgian outside url(09a1a1112c577c279435.png);
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url(09a1a1112c577c279435.png);
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url(09a1a1112c577c279435.png) inside;
+
+	/* three values */
+	list-style: lower-roman url(09a1a1112c577c279435.png) outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: \\"★\\";
+
+	list-style-type: extend-thumbs;
+	list-style: extend-thumbs;
+}
+
 @container (width > 400px) and style(--responsive: true) {
 	.class {
 		font-size: 1.5em;
 	}
 }
+
+@container tall (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container sticky-heading scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.post {
+	container-name: tall;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: sticky-heading / inline-size;
+	container: sticky-heading / size;
+	container: sticky-heading / scroll-state;
+	--my-var: local(sticky-heading);
+
+	container: var(--my-var);
+	--cards: small;
+	container-type: inline-size;
+}
+
+
+@container summary style(--cards: small) {
+	.card {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for \\"nice-style\\" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -11969,6 +12662,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --progress {
+	syntax: \\"<percentage>\\";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.bar {
+	display: inline-block;
+	--progress: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--progress),
+		black var(--progress)
+	);
+	animation: progressAnimation 2.5s ease infinite;
+}
+
+@keyframes progressAnimation {
+	to {
+		--progress: 100%;
+	}
+}
+
 @keyframes \\"initial\\" { /* ... */ }
 @keyframes/**test**/\\"initial\\" { /* ... */ }
 @keyframes/**test**/\\"initial\\"/**test**/{ /* ... */ }
@@ -12129,6 +12847,133 @@ div {
 	composes: a -b b- --c c-- _d d\\\\% from \\"./classes.modules.css\\";
 }
 
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--base-color: #faa6ff;
+	background-color: --transparent(var(--base-color), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--duration: 1s;
+	--easing: linear;
+	result: var(--animation) var(--duration) var(--count) var(--easing);
+}
+
+div {
+	animation: --anim-1s(local(bounce), 2);
+}
+
+@function --outer(--outer-arg) {
+	--outer-local: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--outer-local));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--mode: sharp;
+}
+
+.apply-sharp {
+	border-radius: if(style(--mode: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --swop5c {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile local(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile :local(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile global(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+@color-profile :global(--swop5c) {
+	src: url(https://example.org/SWOP2006_Coated5v2.icc);
+}
+
+.class {
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(--swop5c from global 0% 70% 20% 0%);
+	background-color: color(--from-shared from \\"./shared.css\\" 0% 70% 20% 0%);
+	background-color: color(local(--swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c, \\"./shared.css\\") 0% 70% 20% 0%);
+}
+
+:root {
+	--text-color: #eee;
+}
+
+.simple {
+	color: var(--text-color);
+}
+
+/* Just nesting */
+.theme-dark {
+	--text-color: #fff;
+	--bg-color: #333;
+
+	.button {
+		--button-color: var(--text-color);
+		--button-bg: var(--bg-color);
+		color: var(--button-color);
+		background-color: var(--button-bg);
+	}
+}
+
+/* A container context based on inline size */
+.post {
+	--themeColor: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--themeColor: blue) {
+	.card {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
+
 /*!***********************!*\\\\
   !*** css ./style.css ***!
   \\\\***********************/
diff --git a/test/configCases/css/css-modules/img/shape.png b/test/configCases/css/css-modules/img/shape.png
new file mode 100644
index 000000000..b74b839e2
Binary files /dev/null and b/test/configCases/css/css-modules/img/shape.png differ
diff --git a/test/configCases/css/css-modules/shared.css b/test/configCases/css/css-modules/shared.css
new file mode 100644
index 000000000..43bf3bec0
--- /dev/null
+++ b/test/configCases/css/css-modules/shared.css
@@ -0,0 +1,7 @@
+:root {
+	--from-shared: --custom-shared;
+}
+
+@color-profile --custom-shared {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css
index 624b4f4b5..ba768045e 100644
--- a/test/configCases/css/css-modules/style.module.css
+++ b/test/configCases/css/css-modules/style.module.css
@@ -782,11 +782,131 @@ ul {
 	list-style: thumbs;
 }
 
+@counter-style extend-thumbs {
+	fallback: thumbs;
+	system: extends thumbs;
+	speak-as: thumbs;
+}
+
+div {
+	list-style: inside;
+	list-style: outside;
+	list-style: upper-roman inside;
+	list-style: circle outside;
+	list-style: none disc;
+	list-style: none url(img/shape.png);
+	list-style: none;
+	list-style: none disc url(img/shape.png);
+	list-style: lower-alpha;
+	list-style: disc;
+	list-style: square;
+	list-style: url("./img/shape.png");
+	list-style: georgian inside url("./img/shape.png");
+	list-style: georgian outside url("./img/shape.png");
+	/* type */
+	list-style: square;
+
+	/* image */
+	list-style: url("./img/shape.png");
+
+	/* position */
+	list-style: inside;
+
+	/* two values */
+	list-style: georgian outside;
+	list-style: url("img/shape.png") inside;
+
+	/* three values */
+	list-style: lower-roman url("img/shape.png") outside;
+
+	/* Keyword value */
+	list-style: none;
+
+	/* Global values */
+	list-style: inherit;
+	list-style: initial;
+	list-style: revert;
+	list-style: revert-layer;
+	list-style: unset;
+
+	list-style-type: "★";
+
+	list-style-type: extend-thumbs;
+	list-style: extend-thumbs;
+}
+
 @container (width > 400px) and style(--responsive: true) {
 	.class {
 		font-size: 1.5em;
 	}
 }
+
+@container tall (height > 30rem) {
+	p {
+		line-height: 1.6;
+	}
+}
+
+@container sticky-heading scroll-state(stuck: top) {
+	h2 {
+		background: purple;
+		color: white;
+	}
+}
+
+@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+@container (width > 400px) and (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+	/* <stylesheet> */
+}
+
+@container not (width < 400px) {
+	/* <stylesheet> */
+}
+
+@container (min-width: 400px) {
+	/* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+	/* … */
+}
+@container (15em <= block-size <= 30em) {
+	/* … */
+}
+
+.post {
+	container-name: tall;
+	container-type: inline-size;
+
+	container: none;
+	container: inherit;
+	container: sticky-heading / inline-size;
+	container: sticky-heading / size;
+	container: sticky-heading / scroll-state;
+	--my-var: local(sticky-heading);
+
+	container: var(--my-var);
+	--cards: small;
+	container-type: inline-size;
+}
+
+
+@container summary style(--cards: small) {
+	.card {
+		border: thin solid silver;
+		border-radius: 0.5em;
+		padding: 1em;
+	}
+}
+
 /* At-rule for "nice-style" in Font One */
 @font-feature-values Font One {
 	@styleset {
@@ -1025,6 +1145,31 @@ ul {
 	initial-value: 40%;
 }
 
+@property --progress {
+	syntax: "<percentage>";
+	inherits: false;
+	initial-value: 25%;
+}
+
+.bar {
+	display: inline-block;
+	--progress: 25%;
+	width: 100%;
+	height: 5px;
+	background: linear-gradient(
+		to right,
+		#00d230 var(--progress),
+		black var(--progress)
+	);
+	animation: progressAnimation 2.5s ease infinite;
+}
+
+@keyframes progressAnimation {
+	to {
+		--progress: 100%;
+	}
+}
+
 @keyframes "initial" { /* ... */ }
 @keyframes/**test**/"initial" { /* ... */ }
 @keyframes/**test**/"initial"/**test**/{ /* ... */ }
@@ -1184,3 +1329,130 @@ div {
 .exportNameWeirdCharacters {
 	composes: a -b b- --c c-- _d d\% from "./classes.modules.css";
 }
+
+@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
+	result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+section {
+	--base-color: #faa6ff;
+	background-color: --transparent(var(--base-color), 0.8);
+}
+
+@function --max-plus-x(--list <length>#, --x <length>) {
+	result: calc(max(var(--list)) + var(--x));
+}
+
+div {
+	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
+}
+
+@function --anim-1s(--animation, --count) {
+	--duration: 1s;
+	--easing: linear;
+	result: var(--animation) var(--duration) var(--count) var(--easing);
+}
+
+div {
+	animation: --anim-1s(local(bounce), 2);
+}
+
+@function --outer(--outer-arg) {
+	--outer-local: 2;
+	result: --inner();
+}
+
+@function --inner() returns <number> {
+	result: calc(var(--outer-arg) + var(--outer-local));
+}
+
+div {
+	z-index: --outer(1); /* 3 */
+}
+
+@function --narrow-wide(--narrow, --wide) {
+	result: var(--wide);
+	@media (width < 700px) {
+		result: var(--narrow);
+	}
+}
+
+@function --narrow-wide-if-else(--narrow, --wide) {
+	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
+}
+
+:root {
+	--mode: sharp;
+}
+
+.apply-sharp {
+	border-radius: if(style(--mode: sharp): 0px; else: revert-rule);
+}
+
+@color-profile --swop5c {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
+
+@color-profile local(--swop5c) {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
+
+@color-profile :local(--swop5c) {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
+
+@color-profile global(--swop5c) {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
+
+@color-profile :global(--swop5c) {
+	src: url("https://example.org/SWOP2006_Coated5v2.icc");
+}
+
+.class {
+	background-color: color(--swop5c 0% 70% 20% 0%);
+	background-color: color(local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c) 0% 70% 20% 0%);
+	background-color: color(global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(:global(--swop5c) 0% 70% 20% 0%);
+	background-color: color(--swop5c from global 0% 70% 20% 0%);
+	background-color: color(--from-shared from "./shared.css" 0% 70% 20% 0%);
+	background-color: color(local(--swop5c, "./shared.css") 0% 70% 20% 0%);
+	background-color: color(:local(--swop5c, "./shared.css") 0% 70% 20% 0%);
+}
+
+:root {
+	--text-color: #eee;
+}
+
+.simple {
+	color: var(--text-color);
+}
+
+/* Just nesting */
+.theme-dark {
+	--text-color: #fff;
+	--bg-color: #333;
+
+	.button {
+		--button-color: var(--text-color);
+		--button-bg: var(--bg-color);
+		color: var(--button-color);
+		background-color: var(--button-bg);
+	}
+}
+
+/* A container context based on inline size */
+.post {
+	--themeColor: blue;
+	container-type: inline-size;
+}
+
+/* Apply styles if the container is narrower than 650px */
+@container (width < 650px) and style(--themeColor: blue) {
+	.card {
+		width: 50%;
+		background-color: lightgray;
+		font-size: 1em;
+	}
+}
diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js
index 73aa0fb68..b3b1f1a98 100644
--- a/test/configCases/css/css-modules/use-style.js
+++ b/test/configCases/css/css-modules/use-style.js
@@ -58,4 +58,5 @@ export default {
 	exportNameOtherFromKeywordWithFrom1: style.exportNameOtherFromKeywordWithFrom1,
 	exportNameOtherFromKeywordWithFrom2: style.exportNameOtherFromKeywordWithFrom2,
 	exportNameWeirdCharacters: style.exportNameWeirdCharacters,
+	textColor: style['text-color']
 };
diff --git a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css
index 352d27c92..e2004906c 100644
--- a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css
+++ b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css
@@ -183,7 +183,7 @@
 /* localize animation using special characters */
 .foo { animation: 😃bounce😃; }
 
-/* not localize custom property */
+/* localize custom property */
 .foo { animation: --foo; }
 
 /* not localize name in nested function */
diff --git a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.pure.modules.css b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.pure.modules.css
index d79ce9873..1d0555529 100644
--- a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.pure.modules.css
+++ b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.pure.modules.css
@@ -1,6 +1,8 @@
 /* postcss-modules-local-by-default */
 /* TODO not implemented yet */
 
+@keyframes bounce {}
+@keyframes fly {}
 
 /* localize and not localize animation-name in mixed case #3 */
 .foo { animation-name: fadeInOut, global(moveLeft300px), local(bounce); }