optimize-css-mq
Optimize CSS media queries by combining them together and injecting at end of base styles.
Install
# npm $ npm install optimize-css-mq --dev # yarn $ yarn add optimize-css-mq -D
Example
Input
{} {}
Output
{}
Usage
PostCSS Plugin
#!/usr/bin/env node const fs = ;const postcss = ;
Node.js Module
#!/usr/bin/env node const fs = ;const optmizemq = ; console;
Webpack Plugin
; input: output: ;
CLI
This package also installs a command line interface.
$ node ./node_modules/.bin/optmizemq --helpUsage: optmizemq [options] INPUT [OUTPUT] Description: Pack same CSS media query rules into one using PostCSS Options: -s, --sort Sort “min-width” queries. --sourcemap Create source map file. -h, --help Show this message. --version Print version information. Use a single dash
--sort
option does not currently support a custom function.
Options
sort
By default, CSS optmizemq pack and order media queries as they are defined ([the
“first win” algorithm][1]). If you want to sort media queries automatically,
pass sort: true
to this module.
;
Currently, this option only supports min-width
queries with specific units
(ch
, em
, ex
, px
, and rem
). If you want to do more, you need to create
your own sorting function and pass it to this module like this:
;
In this example, all your media queries will sort by A-Z order.
This sorting function is directly passed to Array#sort()
method of an array of
all your media queries.
API
.pack(css, [options])
Packs media queries in css
.
The second argument is optional. The options
are:
- [options][2] mentioned above
- the second argument of [PostCSS’s
process()
method][3]
You can specify both at the same time.
const fs = ;const optmizemq = ; const result = optmizemq;fs;fs;
Licnse
MIT