Gathering detailed insights and metrics for postcss-merge-at-rules
Installations
npm install postcss-merge-at-rulesDeveloper Guide
BETA
Typescript
No
Module System
N/A
Min. Node Version
>=14.0.0
Node Version
16.19.0
NPM Version
7.24.2
Score
70.7
Supply Chain
99.3
Quality
78
Maintenance
100
Vulnerability
100
License
Releases
5
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
vis97c
Download Statistics
Total Downloads
3,594
Last Day
55
Last Week
160
Last Month
1,126
Last Year
3,127
GitHub Statistics
MIT License
3 Stars
6 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Jan 09, 2025
Bundle Size
3.49 kB
Minified
1.41 kB
Minified + Gzipped
Package Meta Information
Latest Version
1.2.0
Package Id
postcss-merge-at-rules@1.2.0
Unpacked Size
28.69 kB
Size
8.27 kB
File Count
11
NPM Version
7.24.2
Node Version
16.19.0
Published on
Jun 22, 2024
Total Downloads
Cumulative downloads
Total Downloads
3,594
Last Day
685.7%
55
Compared to previous day
Last Week
-4.2%
160
Compared to previous week
Last Month
220.8%
1,126
Compared to previous month
Last Year
569.6%
3,127
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
26
@commitlint/cli@commitlint/config-conventional@semantic-release/changelog@semantic-release/git@types/jestautoprefixereslinteslint-config-prettiereslint-plugin-jesteslint-plugin-jsdoceslint-plugin-prettiergulpgulp-postcssgulp-renamehuskyjestjest-cijest-clilint-stagedpostcsspostcss-cliprettiersemantic-releasestylelintstylelint-config-standard-scssstylelint-prettier
PostCSS Merge At Rules
PostCSS plugin for merging and nesting CSS at rules.
Refer to postcss-sort-media-queries for sorting
Table of Contents
Example
before
1@media screen and (width < 640px) { 2 .header { 3 color: #cdcdcd; 4 } 5 @layer defaults { 6 .header { 7 color: #1c1c1c; 8 } 9 } 10} 11@layer reset { 12 @media screen { 13 .picture { 14 display: block; 15 } 16 } 17} 18@media screen and (min-width: 760px) { 19 .button { 20 color: #cdcdcd; 21 } 22} 23@media screen and (width < 640px) { 24 .main { 25 color: #cdcdcd; 26 } 27 @layer defaults { 28 .main { 29 color: #1c1c1c; 30 } 31 } 32} 33@media screen and (min-width: 1280px) { 34 .button { 35 color: #cdcdcd; 36 } 37} 38@media screen and (max-width: 760px) { 39 .footer { 40 color: #cdcdcd; 41 } 42} 43@media screen and (max-width: 640px) { 44 .footer { 45 color: #cdcdcd; 46 } 47}
after
1@media screen and (max-width: 760px) { 2 .footer { 3 color: #cdcdcd; 4 } 5} 6@media screen { 7 @layer reset { 8 .picture { 9 display: block; 10 } 11 } 12} 13@media screen and (width < 640px) { 14 /* combined */ 15 .header { 16 color: #cdcdcd; 17 } 18 @layer defaults { 19 .header { 20 color: #1c1c1c; 21 } 22 .main { 23 color: #1c1c1c; 24 } 25 } 26 .main { 27 color: #cdcdcd; 28 } 29 .footer { 30 color: #cdcdcd; 31 } 32} 33@media screen and (min-width: 760px) { 34 .button { 35 color: #cdcdcd; 36 } 37} 38@media screen and (min-width: 1280px) { 39 .button { 40 color: #cdcdcd; 41 } 42}
Install
First thing's, install the module:
npm install postcss postcss-merge-at-rules --save-dev
Usage
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:
1module.exports = { 2 plugins: [ 3+ require('postcss-merge-at-rules')({ 4+ nest: true, 5+ }), 6 require('autoprefixer') 7 ] 8}
or with custom at rule matching
1module.exports = { 2 plugins: [ 3+ require('postcss-merge-at-rules')({ 4+ atRulePattern: 'layer' 5+ }), 6 require('autoprefixer') 7 ] 8}
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Options
At Rule Pattern
String or regex expresion to math CSS at rules
1require("postcss")([ 2 require("postcss-merge-at-rules")({ 3 atRulePattern: /(media|layer|supports)/im, // default value 4 }), 5]).process(css);
Flatten
Flatten (without sorting) any valid CSS at rule. media at rules take precedence
1require("postcss")([ 2 require("postcss-merge-at-rules")({ 3 flatten: true, // default value 4 }), 5]).process(css);
Merge
Merge (without sorting) any valid CSS at rule.
1require("postcss")([ 2 require("postcss-merge-at-rules")({ 3 merge: true, // default value 4 }), 5]).process(css);
Nest
Nest compatible CSS at rules (media, container) within each other when possible.
1require("postcss")([ 2 require("postcss-merge-at-rules")({ 3 nest: true, // false by default 4 }), 5]).process(css);
Changelog
See Releases history
License
Thanks
- Yunus Gaziyev @yunusga
- Oleh Dutchenko @dutchenkoOleg
No vulnerabilities found.
No security vulnerabilities found.