refactor: corrected expected output

Author: mfranzke

packages/css-if-polyfill/src/transform.js

@@ -184,11 +184,12 @@ const extractIfFunctions = (cssText) => {
 };
 
 /**
- * Parse if() function content
+ * Parse if() function content - supports both single conditions and multiple chained conditions
  */
 const parseIfFunction = (content) => {
-	// Find the colon that separates condition from values
-	let colonIndex = -1;
+	// Split content by semicolons, but respect parentheses and quotes
+	const segments = [];
+	let currentSegment = '';
 	let parenDepth = 0;
 	let inQuotes = false;
 	let quoteChar = '';
@@ -213,44 +214,111 @@ const parseIfFunction = (content) => {
 				parenDepth++;
 			} else if (char === ')') {
 				parenDepth--;
-			} else if (char === ':' && parenDepth === 0) {
-				colonIndex = i;
-				break;
+			} else if (char === ';' && parenDepth === 0) {
+				// End of segment
+				segments.push(currentSegment.trim());
+				currentSegment = '';
+				continue;
 			}
 		}
+
+		currentSegment += char;
 	}
 
-	if (colonIndex === -1) {
-		throw new Error('Invalid if() function: missing colon');
+	// Add the last segment
+	if (currentSegment.trim()) {
+		segments.push(currentSegment.trim());
 	}
 
-	const condition = content.slice(0, colonIndex).trim();
-	const valuesString = content.slice(colonIndex + 1).trim();
+	// Parse segments into conditions and values
+	const conditions = [];
+	let elseValue = null;
 
-	// Parse values (value; else: fallback)
-	const elseMatch = valuesString.match(/^(.*?);?\s*else:\s*(.*)$/);
+	for (const segment of segments) {
+		// Check if this is an else clause
+		const elseMatch = segment.match(/^else:\s*(.*)$/);
+		if (elseMatch) {
+			elseValue = elseMatch[1].trim();
+			continue;
+		}
 
-	if (!elseMatch) {
-		throw new Error('Invalid if() function: missing else clause');
-	}
+		// Parse condition: value format
+		let colonIndex = -1;
+		let parenDepth = 0;
+		let inQuotes = false;
+		let quoteChar = '';
+
+		// Find the colon that's outside of parentheses and quotes
+		for (let i = 0; i < segment.length; i++) {
+			const char = segment[i];
+			const previousChar = i > 0 ? segment[i - 1] : '';
+
+			// Handle quotes
+			if ((char === '"' || char === "'") && previousChar !== '\\') {
+				if (!inQuotes) {
+					inQuotes = true;
+					quoteChar = char;
+				} else if (char === quoteChar) {
+					inQuotes = false;
+					quoteChar = '';
+				}
+			}
 
-	const trueValue = elseMatch[1].trim();
-	const falseValue = elseMatch[2].trim();
+			if (!inQuotes) {
+				if (char === '(') {
+					parenDepth++;
+				} else if (char === ')') {
+					parenDepth--;
+				} else if (char === ':' && parenDepth === 0) {
+					colonIndex = i;
+					break;
+				}
+			}
+		}
 
-	// Parse condition
-	const conditionMatch = condition.match(/^(style|media|supports)\((.*)\)$/);
-	if (!conditionMatch) {
-		throw new Error('Invalid if() function: unknown condition type');
+		if (colonIndex === -1) {
+			throw new Error('Invalid if() function: missing colon in segment');
+		}
+
+		const conditionPart = segment.slice(0, colonIndex).trim();
+		const valuePart = segment.slice(colonIndex + 1).trim();
+
+		// Parse the condition type and expression
+		const conditionMatch = conditionPart.match(
+			/^(style|media|supports)\((.*)\)$/
+		);
+		if (!conditionMatch) {
+			throw new Error(
+				`Invalid if() function: unknown condition type in "${conditionPart}"`
+			);
+		}
+
+		conditions.push({
+			conditionType: conditionMatch[1],
+			conditionExpression: conditionMatch[2],
+			value: valuePart
+		});
 	}
 
-	const conditionType = conditionMatch[1];
-	const conditionExpression = conditionMatch[2];
+	if (!elseValue) {
+		throw new Error('Invalid if() function: missing else clause');
+	}
 
+	// For backward compatibility, if there's only one condition, return the old format
+	if (conditions.length === 1) {
+		return {
+			conditionType: conditions[0].conditionType,
+			conditionExpression: conditions[0].conditionExpression,
+			trueValue: conditions[0].value,
+			falseValue: elseValue
+		};
+	}
+
+	// For multiple conditions, return the new format
 	return {
-		conditionType,
-		conditionExpression,
-		trueValue,
-		falseValue
+		conditions,
+		falseValue: elseValue,
+		isMultipleConditions: true
 	};
 };
 
@@ -276,41 +344,94 @@ const transformPropertyToNative = (selector, property, value) => {
 		try {
 			const parsed = parseIfFunction(ifFunc.content);
 
-			if (parsed.conditionType === 'style') {
-				// Style() conditions need runtime processing
-				runtimeRules.push({
-					selector,
-					property,
-					value,
-					condition: parsed
-				});
-			} else {
-				// Media() and supports() can be transformed to native CSS
-				const nativeCondition =
-					parsed.conditionType === 'media'
-						? `@media (${parsed.conditionExpression})`
-						: `@supports (${parsed.conditionExpression})`;
-
-				// Create conditional rule with true value
-				const trueValue = value.replace(
-					ifFunc.fullFunction,
-					parsed.trueValue
+			// Handle multiple conditions format
+			if (parsed.isMultipleConditions) {
+				// Check if any condition uses style() - if so, needs runtime processing
+				const hasStyleCondition = parsed.conditions.some(
+					(condition) => condition.conditionType === 'style'
 				);
-				nativeRules.push({
-					condition: nativeCondition,
-					rule: `${selector} { ${property}: ${trueValue}; }`
-				});
 
-				// Create fallback rule with false value
-				const falseValue = value.replace(
+				if (hasStyleCondition) {
+					// If any condition uses style(), fall back to runtime processing
+					runtimeRules.push({
+						selector,
+						property,
+						value,
+						condition: parsed
+					});
+					continue;
+				}
+
+				// All conditions are media() or supports() - can transform to native CSS
+				// Create fallback rule first
+				const fallbackValue = value.replace(
 					ifFunc.fullFunction,
 					parsed.falseValue
 				);
 				nativeRules.push({
 					condition: null, // No condition = fallback
-					rule: `${selector} { ${property}: ${falseValue}; }`
+					rule: `${selector} { ${property}: ${fallbackValue}; }`
 				});
+
+				// Create conditional rules for each condition (in reverse order for CSS cascade)
+				const { conditions } = parsed;
+				for (let i = conditions.length - 1; i >= 0; i--) {
+					const condition = conditions[i];
+					const nativeCondition =
+						condition.conditionType === 'media'
+							? `@media (${condition.conditionExpression})`
+							: `@supports (${condition.conditionExpression})`;
+
+					const conditionalValue = value.replace(
+						ifFunc.fullFunction,
+						condition.value
+					);
+					nativeRules.push({
+						condition: nativeCondition,
+						rule: `${selector} { ${property}: ${conditionalValue}; }`
+					});
+				}
+
+				continue;
+			}
+
+			// Handle single condition format (backward compatibility)
+			if (parsed.conditionType === 'style') {
+				// Style() conditions need runtime processing
+				runtimeRules.push({
+					selector,
+					property,
+					value,
+					condition: parsed
+				});
+				continue;
 			}
+
+			// Media() and supports() can be transformed to native CSS
+			const nativeCondition =
+				parsed.conditionType === 'media'
+					? `@media (${parsed.conditionExpression})`
+					: `@supports (${parsed.conditionExpression})`;
+
+			// Create conditional rule with true value
+			const trueValue = value.replace(
+				ifFunc.fullFunction,
+				parsed.trueValue
+			);
+			nativeRules.push({
+				condition: nativeCondition,
+				rule: `${selector} { ${property}: ${trueValue}; }`
+			});
+
+			// Create fallback rule with false value
+			const falseValue = value.replace(
+				ifFunc.fullFunction,
+				parsed.falseValue
+			);
+			nativeRules.push({
+				condition: null, // No condition = fallback
+				rule: `${selector} { ${property}: ${falseValue}; }`
+			});
 		} catch (error) {
 			// If parsing fails, fall back to runtime processing
 			runtimeRules.push({

packages/postcss-if-function/README.md

@@ -206,9 +206,9 @@ module.exports = {
 	padding: 15px;
 }
 
-@media (width >= 1200px) {
+@media (width >= 480px) {
 	.responsive {
-		padding: 40px;
+		padding: 20px;
 	}
 }
 
@@ -218,9 +218,9 @@ module.exports = {
 	}
 }
 
-@media (width >= 480px) {
+@media (width >= 1200px) {
 	.responsive {
-		padding: 20px;
+		padding: 40px;
 	}
 }
 ```

packages/postcss-if-function/test/plugin.test.js

@@ -103,26 +103,15 @@ describe('postcss-if-function plugin', () => {
 	);
 }`;
 
-		const expected = `.responsive {
-	padding: 15px;
-}
-
-@media (width >= 1200px) {
-	.responsive {
-		padding: 40px;
-	}
+		const expected = `.responsive { padding: 15px; }
+@media (width >= 480px) {
+  .responsive { padding: 20px; }
 }
-
 @media (width >= 768px) {
-	.responsive {
-		padding: 30px;
-	}
+  .responsive { padding: 30px; }
 }
-
-@media (width >= 480px) {
-	.responsive {
-		padding: 20px;
-	}
+@media (width >= 1200px) {
+  .responsive { padding: 40px; }
 }`;
 
 		await run(input, expected);