npm install @csstools/postcss-container-rule-prelude-list --save-devPostCSS 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;
}
}Add PostCSS Container Rule Prelude List to your project:
npm install postcss @csstools/postcss-container-rule-prelude-list --save-devUse 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 */);PostCSS Container Rule Prelude List runs in all Node environments, with special instructions for:
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;
}
}