lightningcss-plugin-if-function

A Lightning CSS plugin for transforming CSS if() functions into native CSS @media and @supports rules at build time.

This plugin is part of the css-if-polyfill project and provides build-time transformation of conditional CSS, eliminating the need for runtime JavaScript processing when using only media() and supports() functions.

Input CSS:

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

Expected Output:

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

Installation

npm install lightningcss-plugin-if-function lightningcss

Usage

import { transform } from "lightningcss-plugin-if-function";
import { readFileSync } from "node:fs";

const css = readFileSync("style.css");

const result = transform({
	filename: "style.css",
	code: css
});

console.log(result.code.toString());

Limitations

• Style Functions Not Supported: This plugin only transforms media() and supports() functions. For style() functions (which depend on runtime DOM state), use the css-if-polyfill runtime (browser) library
• Static Analysis Only: The plugin performs static analysis and cannot handle dynamically generated CSS
• Lightning CSS Compatibility: Requires Lightning CSS 1.0.0 or higher

Contributing

See the main Contributing Guide for details on how to contribute to this project.

License

MIT © Maximilian Franzke

Related

• css-if-polyfill - Runtime polyfill for CSS if() functions
• Lightning CSS - A new CSS parser, transformer, and minifier written in Rust.