TEST_FIXTURES.md

CSS if() Polyfill Test Fixtures

This document demonstrates the centralized test fixture system that provides a single source of truth for CSS test cases across all test suites.

Basic Media Query

Input CSS:

.responsive {
	width: if(media(width <= 768px): 100%; else: 50%);
}

Expected Output:

.responsive {
	width: 50%;
}
@media (width <= 768px) {
	.responsive {
		width: 100%;
	}
}

Basic Supports Query

Input CSS:

.grid {
	display: if(supports(display: grid): grid; else: block);
}

Expected Output:

.grid {
	display: block;
}
@supports (display: grid) {
	.grid {
		display: grid;
	}
}

Basic Style Query (Runtime Processing)

Input CSS:

.test {
	color: if(style(--theme): var(--primary); else: #00f);
}

Expected Output:

.test {
	color: #00f;
}

Multiple Functions in One Rule

Input CSS:

.example {
	color: if(media(width <= 768px): #00f; else: red);
	font-size: if(supports(display: grid): 1.2rem; else: 1rem);
}

Expected Output:

.example {
	color: red;
}
@media (width <= 768px) {
	.example {
		color: #00f;
	}
}
.example {
	font-size: 1rem;
}
@supports (display: grid) {
	.example {
		font-size: 1.2rem;
	}
}

Multiple Concatenated Conditions

Input CSS:

.responsive {
	padding: if(
		media(width >= 1200px): 40px; media(width >= 768px): 30px;
			media(width >= 480px): 20px; else: 15px
	);
}

Expected Output:

.responsive {
	padding: 15px;
}
@media (width >= 480px) {
	.responsive {
		padding: 20px;
	}
}
@media (width >= 768px) {
	.responsive {
		padding: 30px;
	}
}
@media (width >= 1200px) {
	.responsive {
		padding: 40px;
	}
}

Mixed Conditions (Build-time and Runtime)

Input CSS:

.test {
	color: if(media(width >= 768px): #00f; else: red);
	background: if(style(--dark-mode): black; else: white);
}

Expected Output:

.test {
	color: red;
}
@media (width >= 768px) {
	.test {
		color: #00f;
	}
}
.test {
	background: white;
}

Complex Media Query

Input CSS:

.responsive {
	width: if(
		media((width >= 768px) and (width <= 1024px)): 50%; else: 100%
	);
}

Expected Output:

.responsive {
	width: 100%;
}
@media (width >= 768px) and (width <= 1024px) {
	.responsive {
		width: 50%;
	}
}

CSS with Comments Preserved

Input CSS:

/* Header styles */
.header {
	background: #00f;
}

.conditional {
	color: if(media(width <= 768px): red; else: #00f);
}

/* Footer styles */
.footer {
	background: gray;
}

Expected Output:

/* Header styles */
.header {
	background: #00f;
}
.conditional {
	color: #00f;
}
@media (width <= 768px) {
	.conditional {
		color: red;
	}
}
/* Footer styles */
.footer {
	background: gray;
}

CSS Without if() Functions

Input CSS:

.normal {
	color: red;
	font-size: 1rem;
}

Expected Output:

.normal {
	color: red;
	font-size: 1rem;
}

---

Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory.

To regenerate this documentation, run:

pnpm run build:docs