PostCSS plugin for merging and nesting CSS at rules.
Refer to postcss-sort-media-queries for sorting
before
@media screen and (width < 640px) {
.header {
color: #cdcdcd;
}
@layer defaults {
.header {
color: #1c1c1c;
}
}
}
@layer reset {
@media screen {
.picture {
display: block;
}
}
}
@media screen and (min-width: 760px) {
.button {
color: #cdcdcd;
}
}
@media screen and (width < 640px) {
.main {
color: #cdcdcd;
}
@layer defaults {
.main {
color: #1c1c1c;
}
}
}
@media screen and (min-width: 1280px) {
.button {
color: #cdcdcd;
}
}
@media screen and (max-width: 760px) {
.footer {
color: #cdcdcd;
}
}
@media screen and (max-width: 640px) {
.footer {
color: #cdcdcd;
}
}after
@media screen and (max-width: 760px) {
.footer {
color: #cdcdcd;
}
}
@media screen {
@layer reset {
.picture {
display: block;
}
}
}
@media screen and (width < 640px) {
/* combined */
.header {
color: #cdcdcd;
}
@layer defaults {
.header {
color: #1c1c1c;
}
.main {
color: #1c1c1c;
}
}
.main {
color: #cdcdcd;
}
.footer {
color: #cdcdcd;
}
}
@media screen and (min-width: 760px) {
.button {
color: #cdcdcd;
}
}
@media screen and (min-width: 1280px) {
.button {
color: #cdcdcd;
}
}First thing's, install the module:
npm install postcss postcss-merge-at-rules --save-dev
Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss" section in package.json
or postcss in bundle config.
If you already use PostCSS, add the plugin to plugins list:
module.exports = {
plugins: [
+ require('postcss-merge-at-rules')({
+ nest: true,
+ }),
require('autoprefixer')
]
}or with custom at rule matching
module.exports = {
plugins: [
+ require('postcss-merge-at-rules')({
+ atRulePattern: 'layer'
+ }),
require('autoprefixer')
]
}If you do not use PostCSS, add it according to official docs and set this plugin in settings.
String or regex expresion to math CSS at rules
require("postcss")([
require("postcss-merge-at-rules")({
atRulePattern: /(media|layer|supports)/im, // default value
}),
]).process(css);Flatten (without sorting) any valid CSS at rule. media at rules take precedence
require("postcss")([
require("postcss-merge-at-rules")({
flatten: true, // default value
}),
]).process(css);Merge (without sorting) any valid CSS at rule.
require("postcss")([
require("postcss-merge-at-rules")({
merge: true, // default value
}),
]).process(css);Nest compatible CSS at rules (media, container) within each other when possible.
require("postcss")([
require("postcss-merge-at-rules")({
nest: true, // false by default
}),
]).process(css);See Releases history
- Yunus Gaziyev @yunusga
- Oleh Dutchenko @dutchenkoOleg