PostCSS plugin for merging and nesting CSS at rules
npm install postcss-merge-at-rules[PostCSS]: https://github.com/postcss/postcss
[MIT]: https://github.com/yunusga/postcss-merge-at-rules/blob/master/LICENSE
[official docs]: https://github.com/postcss/postcss#usage
[Releases history]: https://github.com/vis97c/postcss-merge-at-rules/blob/master/CHANGELOG.md


!license

[PostCSS] plugin for merging and nesting CSS at rules.
> Refer to postcss-sort-media-queries for sorting
- Example
- Install
- Usage
- Options
- At Rule Pattern
- Merge
- Nest
- Changelog
- License
- Other PostCSS plugins
- Thanks 💪
before
``css`
@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
`css`
@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"postcss"
in the project root, section in package.jsonpostcss
or in bundle config.
If you already use PostCSS, add the plugin to plugins list:
`diff`
module.exports = {
plugins: [
+ require('postcss-merge-at-rules')({
+ nest: true,
+ }),
require('autoprefixer')
]
}
or with custom at rule matching
`diff`
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
`js`
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
`js`
require("postcss")([
require("postcss-merge-at-rules")({
flatten: true, // default value
}),
]).process(css);
Merge (without sorting) any valid CSS at rule.
`js`
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.
`js``
require("postcss")([
require("postcss-merge-at-rules")({
nest: true, // false by default
}),
]).process(css);
---
See [Releases history]
[MIT]
- Yunus Gaziyev @yunusga
- Oleh Dutchenko @dutchenkoOleg