@csstools/postcss-container-rule-prelude-list

PostCSS Container Rule Prelude List

npm install @csstools/postcss-container-rule-prelude-list --save-dev

PostCSS Container Rule Prelude List lets you declare a list of container queries in a single @container rule following the CSS Conditional 5 Specification.

@container card (inline-size > 30em), style(--responsive: true) {
	a {
		color: red;
	}
}

/* becomes */

@container card (inline-size > 30em) {
	a {
		color: red;
	}
}
@container style(--responsive: true) {
	a {
		color: red;
	}
}

Usage

Add PostCSS Container Rule Prelude List to your project:

npm install postcss @csstools/postcss-container-rule-prelude-list --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssContainerRulePreludeList = require('@csstools/postcss-container-rule-prelude-list');

postcss([
	postcssContainerRulePreludeList(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssContainerRulePreludeList({ preserve: true })

@container card (inline-size > 30em), style(--responsive: true) {
	a {
		color: red;
	}
}

/* becomes */

@container card (inline-size > 30em) {
	a {
		color: red;
	}
}
@container style(--responsive: true) {
	a {
		color: red;
	}
}
@container card (inline-size > 30em), style(--responsive: true) {
	a {
		color: red;
	}
}