refactor: adding further fixtures

generate-fixtures.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+/**
+ * Generate expected outputs for new fixtures
+ */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Import the transform function
+import { buildTimeTransform } from './packages/css-if-polyfill/src/index.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, 'test', 'fixtures');
+
+const newFixtures = [
+	'empty-token-stream',
+	'cyclic-substitution',
+	'complex-supports',
+	'boolean-negation',
+	'multiple-mixed-conditions',
+	'nested-media-features'
+];
+
+async function generateExpectedOutputs() {
+	const results = await Promise.all(
+		newFixtures.map(async (fixture) => {
+			const inputPath = path.join(fixturesDir, `${fixture}.input.css`);
+			const expectedPath = path.join(
+				fixturesDir,
+				`${fixture}.expected.css`
+			);
+
+			try {
+				const input = await readFile(inputPath, 'utf8');
+				console.log(`Processing ${fixture}...`);
+				console.log('Input:', input);
+
+				const result = buildTimeTransform(input);
+				console.log('Output:', result);
+
+				// Extract the appropriate CSS output (nativeCSS for static transforms, runtimeCSS for dynamic)
+				const outputCSS = result.nativeCSS || result.runtimeCSS || '';
+
+				await writeFile(expectedPath, outputCSS);
+				console.log(`✓ Generated ${fixture}.expected.css\n`);
+				return { fixture, success: true };
+			} catch (error) {
+				console.error(`✗ Failed to process ${fixture}:`, error.message);
+				return { fixture, success: false, error };
+			}
+		})
+	);
+
+	return results;
+}
+
+await generateExpectedOutputs();

packages/css-if-polyfill/test/integrated.test.js

@@ -2,7 +2,8 @@
 import {
 	basicFixtureTests,
 	loadFixture,
-	normalizeCSS
+	normalizeCSS,
+	runtimeOnlyFixtureTests
 } from '../../../test/scripts/fixture-utils.js';
 import { buildTimeTransform, init, processCSSText } from '../src/index.js';
 
@@ -30,6 +31,22 @@
 			});
 		}
 
+		// Runtime-only fixtures that cannot be transformed at build time
+		for (const { fixture, description } of runtimeOnlyFixtureTests) {
+			test(description, () => {
+				const { input, expected } = loadFixture(fixture);
+				const result = buildTimeTransform(input);
+
+				// These fixtures should preserve the if() functions for runtime processing
+				expect(result.hasRuntimeRules).toBe(true);
+				expect(normalizeCSS(result.runtimeCSS)).toBe(
+					normalizeCSS(expected)
+				);
+				// NativeCSS should be empty or contain only fallback values
+				expect(result.nativeCSS).toBe('');
+			});
+		}
+
 		test('handles mixed media and style conditions', () => {
 			const { input } = loadFixture('mixed-conditions');
 			const result = buildTimeTransform(input);

packages/postcss-if-function/src/index.js

@@ -71,8 +71,19 @@ function postcssIfFunction(options = {}) {
 			// Apply transformation
 			const transformed = buildTimeTransform(cssText);
 
+			// If no transformations were made, keep original
 			if (transformed.nativeCSS === cssText) {
-				// No transformations were made
+				return;
+			}
+
+			// If we have runtime rules but no native CSS (or only empty nativeCSS),
+			// we can't transform at build-time, so preserve the original
+			if (
+				(!transformed.nativeCSS ||
+					transformed.nativeCSS.trim() === '') &&
+				transformed.hasRuntimeRules
+			) {
+				// Keep the original CSS unchanged since these features need runtime processing
 				return;
 			}
 

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

@@ -3,7 +3,8 @@ import { describe, expect, it, vi } from 'vitest';
 import {
 	loadFixture,
 	normalizeCSS,
-	postcssFixtureTests
+	postcssFixtureTests,
+	runtimeOnlyFixtureTests
 } from '../../../test/scripts/fixture-utils.js';
 import { postcssIfFunction } from '../src/index.js';
 
@@ -27,6 +28,16 @@ describe('postcss-if-function plugin', () => {
 		});
 	}
 
+	// Runtime-only fixtures that cannot be transformed at build time
+	// PostCSS should preserve these unchanged
+	for (const { fixture, description } of runtimeOnlyFixtureTests) {
+		it(`should preserve ${description} unchanged`, async () => {
+			const { input } = loadFixture(fixture);
+			// For runtime-only features, PostCSS should preserve the original CSS
+			await run(input, input);
+		});
+	}
+
 	it('should work with logTransformations option', async () => {
 		const { input, expected } = loadFixture('basic-media');
 

test/fixtures/boolean-negation.expected.css

@@ -0,0 +1,16 @@
+.test {
+	color: black;
+}
+@media (not (print)) {
+	.test {
+		color: blue;
+	}
+}
+.test {
+	display: grid;
+}
+@supports (not display: grid) {
+	.test {
+		display: block;
+	}
+}

test/fixtures/boolean-negation.input.css

@@ -0,0 +1,4 @@
+.test {
+	color: if(not media(print): blue; else: black);
+	display: if(not supports(display: grid): block; else: grid);
+}

test/fixtures/complex-supports.expected.css

@@ -0,0 +1,21 @@
+.test {
+	display: block;
+}
+@supports ((display: grid) and (gap: 1rem)) {
+	.test {
+		display: grid;
+	}
+}
+.test {
+	color: blue;
+}
+@supports (color: hsl(from red h s l)) {
+	.test {
+		color: hsl(from red h s l);
+	}
+}
+@supports (color: lab(50% 20 -30)) {
+	.test {
+		color: lab(50% 20 -30);
+	}
+}

test/fixtures/complex-supports.input.css

@@ -0,0 +1,4 @@
+.test {
+	display: if(supports((display: grid) and (gap: 1rem)): grid; else: block);
+	color: if(supports(color: lab(50% 20 -30)): lab(50% 20 -30); supports(color: hsl(from red h s l)): hsl(from red h s l); else: blue);
+}

test/fixtures/cyclic-substitution.expected.css

@@ -0,0 +1,3 @@
+.test {
+	--foo: default;
+}

test/fixtures/cyclic-substitution.input.css

@@ -0,0 +1,3 @@
+.test {
+	--foo: if(style(--foo: bar): baz; else: default);
+}

test/fixtures/empty-token-stream.expected.css

@@ -0,0 +1,3 @@
+.test {
+	background: transparent;
+}

test/fixtures/empty-token-stream.input.css

@@ -0,0 +1,4 @@
+.test {
+	color: if(media(print): red);
+	background: if(supports(display: none): transparent);
+}

test/fixtures/multiple-mixed-conditions.expected.css

@@ -0,0 +1,18 @@
+.responsive {
+	padding: 15px;
+}
+@supports (display: grid) {
+	.responsive {
+		padding: 25px;
+	}
+}
+@media (width >= 768px) {
+	.responsive {
+		padding: 30px;
+	}
+}
+@media (width >= 1200px) {
+	.responsive {
+		padding: 40px;
+	}
+}

test/fixtures/multiple-mixed-conditions.input.css

@@ -0,0 +1,9 @@
+.responsive {
+	padding: if(
+		media(width >= 1200px): 40px;
+		media(width >= 768px): 30px;
+		supports(display: grid): 25px;
+		style(--large-padding): 35px;
+		else: 15px
+	);
+}

test/fixtures/nested-media-features.expected.css

@@ -0,0 +1,16 @@
+.test {
+	width: 100%;
+}
+@media ((orientation: landscape) and (hover: hover)) {
+	.test {
+		width: 80%;
+	}
+}
+.test {
+	font-size: 1rem;
+}
+@media ((min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference)) {
+	.test {
+		font-size: 1.2rem;
+	}
+}

test/fixtures/nested-media-features.input.css

@@ -0,0 +1,4 @@
+.test {
+	width: if(media((orientation: landscape) and (hover: hover)): 80%; else: 100%);
+	font-size: if(media((min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference)): 1.2rem; else: 1rem);
+}

test/scripts/fixture-utils.js

@@ -122,6 +122,38 @@ export const basicFixtureTests = [
 	{
 		fixture: 'no-if-functions',
 		description: 'preserve CSS without if() functions'
+	},
+	{
+		fixture: 'complex-supports',
+		description: 'handle complex supports conditions with multiple values'
+	},
+	{
+		fixture: 'nested-media-features',
+		description: 'handle complex nested media feature queries'
+	}
+];
+
+/**
+ * Runtime-only test configurations for features that cannot be transformed at build time
+ */
+export const runtimeOnlyFixtureTests = [
+	{
+		fixture: 'empty-token-stream',
+		description:
+			'handle if() functions without else clause (empty token stream)'
+	},
+	{
+		fixture: 'cyclic-substitution',
+		description: 'prevent cyclic substitution context in style queries'
+	},
+	{
+		fixture: 'boolean-negation',
+		description: 'handle boolean negation in conditions'
+	},
+	{
+		fixture: 'multiple-mixed-conditions',
+		description:
+			'handle multiple mixed condition types in single if() function'
 	}
 ];