@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Shorten more CSS when minifying: `flex` written in fewer than three components, basic shapes' default arguments, and a longhand folded into the shorthand right before it.
@@ -627,6 +627,28 @@ const FAMILY_LONGHANDS = new Map([
 	["text-wrap", ["text-wrap-mode", "text-wrap-style"]]
 ]);
 
+// The `animation` longhands whose every value is a keyword, and those keywords.
+const ANIMATION_KEYWORD_SLOTS = new Map([
+	[
+		"animation-timing-function",
+		[
+			"ease",
+			"ease-in",
+			"ease-in-out",
+			"ease-out",
+			"linear",
+			"step-end",
+			"step-start"
+		]
+	],
+	[
+		"animation-direction",
+		["alternate", "alternate-reverse", "normal", "reverse"]
+	],
+	["animation-fill-mode", ["backwards", "both", "forwards", "none"]],
+	["animation-play-state", ["paused", "running"]]
+]);
+
 // The properties whose comma-separated items take a `<custom-ident>`, where a
 // vendor spelling is a name the engine parses rather than one it may drop — so a
 // later declaration listing an earlier one's items cannot be its fallback.
@@ -8177,6 +8199,7 @@ module.exports.ANGLE_UNITS = ANGLE_UNITS;
 module.exports.ARC_COSINE_DEGREES = ARC_COSINE_DEGREES;
 module.exports.ARC_SINE_DEGREES = ARC_SINE_DEGREES;
 module.exports.ARC_TANGENT_DEGREES = ARC_TANGENT_DEGREES;
+module.exports.ANIMATION_KEYWORD_SLOTS = ANIMATION_KEYWORD_SLOTS;
 module.exports.AUTO_SECOND_VALUE_PROPERTIES = AUTO_SECOND_VALUE_PROPERTIES;
 module.exports.BOX_FAMILY_PREFIX = BOX_FAMILY_PREFIX;
 module.exports.BOX_LONGHANDS = BOX_LONGHANDS;
 
@@ -23,6 +23,7 @@ const { makeCacheable } = require("../util/identifier");
  */
 const {
 	ABSOLUTE_UNIT_SCALE,
+	ANIMATION_KEYWORD_SLOTS,
 	BOX_FAMILY_PREFIX,
 	BOX_LONGHANDS,
 	CALC_CONSTANTS,
@@ -32,6 +33,7 @@ const {
 	CSS_WIDE_KEYWORDS,
 	CUSTOM_IDENT_LIST_PROPERTIES,
 	DROPPABLE_WHEN_EMPTY_AT_RULES,
+	EASING_KEYWORDS,
 	ENCODED_ALREADY,
 	ENGINE_TRANSFER_DIFFERS,
 	FAMILY_LONGHANDS,
@@ -65,6 +67,7 @@ const {
 	SUPPORT_BROWSERS,
 	THROUGH_MATRIX,
 	THROUGH_TRANSFER,
+	TRANSITION_BEHAVIORS,
 	UNSHARED_LONGHAND_KEYWORDS,
 	foldAdd,
 	foldDivide,
@@ -12123,7 +12126,19 @@ const _foldInto = (path, items, texts, at, from) => {
 	if (shorthandColon <= 0 || longhandColon <= 0) return false;
 	const property = _printedProperty(shorthandText, shorthandColon);
 	const sides = BOX_LONGHANDS.get(property) || PAIR_LONGHANDS.get(property);
-	if (sides === undefined) return false;
+	if (sides === undefined) {
+		const folded = _foldIntoSlots(
+			property,
+			_printedValue(shorthandText, shorthandColon),
+			_printedProperty(longhandText, longhandColon),
+			_printedValue(longhandText, longhandColon)
+		);
+		if (folded === null) return false;
+		// Never longer: the slot's value is written once, its name no more.
+		const important = path.important(items[at]) ? _IMPORTANT : "";
+		texts[at] = `${property}:${folded}${important};`;
+		return true;
+	}
 	const slot = sides.indexOf(_printedProperty(longhandText, longhandColon));
 	if (slot === -1) return false;
 	const shorthandValue = _printedValue(shorthandText, shorthandColon);
@@ -12169,6 +12184,221 @@ const _foldInto = (path, items, texts, at, from) => {
 	return true;
 };
 
+// A `<time>`, which a `transition` or an `animation` reads as its duration
+// first and its delay second.
+const _TIME_RE = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:s|ms)$/i;
+const _ZERO_TIME_RE = /^[+-]?(?:0+\.?0*|\.0+)(?:s|ms)$/i;
+// An easing function a layer may hold, the keywords aside.
+const _EASING_CALL_RE = /^(?:cubic-bezier|steps|linear)\(/i;
+
+/**
+ * A longhand's value written into the shorthand of its own family standing
+ * before it, or null where the shorthand's slots cannot be read apart.
+ * @param {string} property the shorthand's printed property name
+ * @param {string} shorthandValue its printed value
+ * @param {string} longhand the longhand's printed property name
+ * @param {string} longhandValue its printed value
+ * @returns {string | null} the shorthand's new value, or null
+ */
+const _foldIntoSlots = (property, shorthandValue, longhand, longhandValue) => {
+	// A vendor spelling folds only into the shorthand of the same vendor.
+	const prefix = /^-[a-z]+-/.exec(property);
+	const base = prefix === null ? property : property.slice(prefix[0].length);
+	if (prefix !== null && !longhand.startsWith(prefix[0])) return null;
+	const slot = prefix === null ? longhand : longhand.slice(prefix[0].length);
+	// A substitution may stand for any slot, and a comma list is more than one layer.
+	if (_hasSubstitution(shorthandValue) || _hasSubstitution(longhandValue)) {
+		return null;
+	}
+	if (
+		_valueItems(shorthandValue).length !== 1 ||
+		_valueItems(longhandValue).length !== 1
+	) {
+		return null;
+	}
+	const components = _splitPrintedComponents(shorthandValue);
+	const value = _splitPrintedComponents(longhandValue);
+	if (value.length !== 1 || components.length === 0) return null;
+	for (const one of [...components, value[0]]) {
+		if (CSS_WIDE_KEYWORDS.has(toLowerCaseIfNeeded(one))) return null;
+	}
+	if (base === "flex") {
+		// IE10's `-ms-flex` reads omitted factors the 2012 draft's way.
+		if (prefix !== null && prefix[0] === "-ms-") return null;
+		const factors = _flexFactors(components);
+		const at = ["flex-grow", "flex-shrink", "flex-basis"].indexOf(slot);
+		if (factors === null || at === -1) return null;
+		if (_BARE_NUMBER_RE.test(value[0]) !== (at !== 2)) return null;
+		factors[at] = value[0];
+		return _joinSlots(_shortestFlexValue(factors) || factors);
+	}
+	if (base === "transition") {
+		return _foldTransitionSlot(components, slot, value[0]);
+	}
+	if (base === "animation") {
+		return _foldAnimationSlot(components, slot, value[0]);
+	}
+	const longhands = FAMILY_LONGHANDS.get(base);
+	// `text-wrap` was one keyword before it had longhands, and an engine reading
+	// it so drops the whole of a value with two.
+	if (
+		longhands === undefined ||
+		base === "text-wrap" ||
+		!_shorthandSlotsReadable(base)
+	) {
+		return null;
+	}
+	const filled = _familySlots(longhands, components);
+	const taken = _familySlots(longhands, value);
+	if (filled === null || taken === null || !taken.has(slot)) return null;
+	filled.set(slot, value[0]);
+	const order = longhands.filter((name) => filled.has(name));
+	return _familyValue(
+		base,
+		order,
+		order.map((name) => /** @type {string} */ (filled.get(name)))
+	);
+};
+
+/**
+ * A `transition` longhand written into a one-layer `transition`, its slots
+ * then written in the order the printer writes an authored one.
+ * @param {string[]} components the layer's components
+ * @param {string} slot the longhand's unprefixed name
+ * @param {string} value its one component
+ * @returns {string | null} the layer's new value, or null
+ */
+const _foldTransitionSlot = (components, slot, value) => {
+	const names = [];
+	const times = [];
+	const easings = [];
+	const behaviors = [];
+	for (const one of components) {
+		const lower = toLowerCaseIfNeeded(one);
+		if (_TIME_RE.test(one)) {
+			times.push(one);
+		} else if (EASING_KEYWORDS.has(lower) || _EASING_CALL_RE.test(one)) {
+			easings.push(one);
+		} else if (TRANSITION_BEHAVIORS.has(lower)) {
+			behaviors.push(one);
+		} else {
+			names.push(one);
+		}
+	}
+	// An easing keyword is a property name too, so which slot it fills is the
+	// engine's to say where no other name stands beside it.
+	if (names.length > 1 || times.length > 2 || easings.length > 1) return null;
+	if (behaviors.length > 1) return null;
+	const lower = toLowerCaseIfNeeded(value);
+	if (slot === "transition-duration" || slot === "transition-delay") {
+		if (!_TIME_RE.test(value)) return null;
+		if (slot === "transition-duration") {
+			times[0] = value;
+		} else {
+			// A delay is the second time, so the first has to be written.
+			if (times.length === 0) return null;
+			times[1] = value;
+		}
+	} else if (slot === "transition-timing-function") {
+		if (!EASING_KEYWORDS.has(lower) && !_EASING_CALL_RE.test(value)) {
+			return null;
+		}
+		easings[0] = value;
+	} else if (slot === "transition-behavior") {
+		if (!TRANSITION_BEHAVIORS.has(lower)) return null;
+		behaviors[0] = value;
+	} else if (slot === "transition-property") {
+		// A name that is a keyword of another slot reads as that slot.
+		if (
+			_TIME_RE.test(value) ||
+			EASING_KEYWORDS.has(lower) ||
+			TRANSITION_BEHAVIORS.has(lower) ||
+			lower === "none"
+		) {
+			return null;
+		}
+		names[0] = value;
+	} else {
+		return null;
+	}
+	// What a slot holding its own initial says, it says unwritten too.
+	if (times.length === 2 && _ZERO_TIME_RE.test(times[1])) times.pop();
+	if (times.length === 1 && _ZERO_TIME_RE.test(times[0])) times.pop();
+	if (easings.length === 1 && equalsLowerCase(easings[0], "ease")) {
+		easings.pop();
+	}
+	if (behaviors.length === 1 && equalsLowerCase(behaviors[0], "normal")) {
+		behaviors.pop();
+	}
+	const rest = [...times, ...easings, ...behaviors];
+	const named =
+		names.length === 1 && equalsLowerCase(names[0], "all") && rest.length > 0
+			? []
+			: names;
+	const out = [...named, ...rest];
+	return out.length === 0 ? "all" : _joinSlots(out);
+};
+
+/**
+ * An `animation` longhand written into a one-layer `animation` whose every
+ * component reads as one slot alone. The new component goes last, where an
+ * empty slot takes it; one already filled is replaced where it stands.
+ * @param {string[]} components the layer's components
+ * @param {string} slot the longhand's unprefixed name
+ * @param {string} value its one component
+ * @returns {string | null} the layer's new value, or null
+ */
+const _foldAnimationSlot = (components, slot, value) => {
+	const lower = toLowerCaseIfNeeded(value);
+	/** @type {(one: string, lowered: string) => boolean} */
+	let fills;
+	if (slot === "animation-duration" || slot === "animation-delay") {
+		if (!_TIME_RE.test(value)) return null;
+		fills = (one) => _TIME_RE.test(one);
+	} else if (slot === "animation-iteration-count") {
+		if (lower !== "infinite" && !_BARE_NUMBER_RE.test(value)) return null;
+		fills = (one, lowered) =>
+			lowered === "infinite" || _BARE_NUMBER_RE.test(one);
+	} else {
+		const keywords = ANIMATION_KEYWORD_SLOTS.get(slot);
+		if (keywords === undefined) return null;
+		// The easing slot also takes a call, which no other slot does.
+		const calls = slot === "animation-timing-function";
+		if (!keywords.includes(lower) && !(calls && _EASING_CALL_RE.test(value))) {
+			return null;
+		}
+		fills = (one, lowered) =>
+			keywords.includes(lowered) || (calls && _EASING_CALL_RE.test(one));
+	}
+	// `none` and `normal` are each a name and a keyword slot's too, so a layer
+	// holding one is read by its order, which a fold cannot keep.
+	const out = [];
+	const at = [];
+	for (const one of components) {
+		const lowered = toLowerCaseIfNeeded(one);
+		if (lowered === "none" || lowered === "normal") return null;
+		if (fills(one, lowered)) at.push(out.length);
+		out.push(one);
+	}
+	if (lower === "none" || lower === "normal") return null;
+	if (slot === "animation-delay") {
+		// A delay is the second time; with no duration the first would be it.
+		if (at.length === 0) return null;
+		if (at.length === 2) out[at[1]] = value;
+		else out.push(value);
+	} else if (slot === "animation-duration") {
+		if (at.length === 0) out.push(value);
+		else out[at[0]] = value;
+	} else if (at.length === 0) {
+		out.push(value);
+	} else if (at.length === 1) {
+		out[at[0]] = value;
+	} else {
+		return null;
+	}
+	return _joinSlots(out);
+};
+
 // A number with no unit and no percent, which `flex` reads as a factor.
 const _BARE_NUMBER_RE = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
 
@@ -12198,6 +12428,58 @@ const _shortestFlexValue = (components) => {
 		: null;
 };
 
+/**
+ * An authored `flex` value of one to three components read into its three
+ * factors in grammar order (CSS Flexbox 1 §7.1.1): a bare number is a factor
+ * unless two precede it, an omitted shrink is `1` and basis `0%`, and a keyword
+ * the factors it names.
+ * @param {string[]} components the value's components, as written
+ * @returns {string[] | null} grow, shrink and basis, or null where it is no such value
+ */
+const _flexFactors = (components) => {
+	if (components.length === 1) {
+		const lower = toLowerCaseIfNeeded(components[0]);
+		for (const [factors, keyword] of FLEX_KEYWORDS) {
+			if (keyword === lower) return factors.split(" ");
+		}
+	}
+	const factors = [];
+	let basis = null;
+	for (const component of components) {
+		if (_BARE_NUMBER_RE.test(component) && factors.length < 2) {
+			// The two factors are adjacent: a basis between them parts no pair.
+			if (factors.length === 1 && basis !== null && components[0] !== basis) {
+				return null;
+			}
+			factors.push(component);
+		} else {
+			if (basis !== null) return null;
+			basis = component;
+		}
+	}
+	if (factors.length === 0) return null;
+	return [
+		factors[0],
+		factors.length === 2 ? factors[1] : "1",
+		basis === null ? "0%" : basis
+	];
+};
+
+/**
+ * The shortest spelling of an authored `flex` value in whatever order and count
+ * its grammar allows, or `null` when what was written is already that short.
+ * @param {string[]} components the value's components, as written
+ * @returns {string[] | null} the fragments to join, or `null` to keep them as they are
+ */
+const _shortestAuthoredFlex = (components) => {
+	const factors = _flexFactors(components);
+	if (factors === null) return null;
+	const shortest = _shortestFlexValue(factors) || factors;
+	return shortest.join(" ").length < components.join(" ").length
+		? shortest
+		: null;
+};
+
 /**
  * Split on the whitespace at the top of one value, a nested call's own spaces
  * staying inside it.
@@ -16653,6 +16935,9 @@ module.exports._setRuleEntry = _setRuleEntry;
 module.exports._setHoistedRuns = _setHoistedRuns;
 module.exports._shortestColor = _shortestColor;
 module.exports._shortestFlexValue = _shortestFlexValue;
+module.exports._shortestAuthoredFlex = _shortestAuthoredFlex;
+module.exports._joinSlots = _joinSlots;
+module.exports._splitPrintedComponents = _splitPrintedComponents;
 module.exports._shorthandSlotsReadable = _shorthandSlotsReadable;
 module.exports._splitSelectorList = _splitSelectorList;
 module.exports._splitTopLevelArguments = _splitTopLevelArguments;
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Shorten more CSS when minifying: `flex` written in fewer than three components, basic shapes' default arguments, and a longhand folded into the shorthand right before it.