wecui
Version:
一款基于Vue2.x版本的移动端web组件
75 lines (48 loc) • 1.5 kB
Markdown
//github.com/postcss/postcss) plugin to transform [W3C CSS Custom Media Queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq) syntax to more compatible CSS.
```console
$ npm install postcss-custom-media
```
```js
// dependencies
var postcss = require("postcss")
var customMedia = require("postcss-custom-media")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css using postcss-custom-media
var out = postcss()
.use(customMedia())
.process(css)
.css
```
Using this `input.css`:
```css
@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport) {
/* styles for small viewport */
}
```
you will get:
```css
@media (max-width: 30em) {
/* styles for small viewport */
}
```
Checkout [tests](test) for more examples.
(default: `{}`)
Allows you to pass an object to define the `<media-query-list>` for each
`<extension-name>`. These definitions will override any that exist in the CSS.
(default: `false`)
Allows you to preserve custom media query definitions in output.
(default: `false`)
**This option only works if `preserve` is truthy**.
Allows you to append your extensions at end of your CSS.
---
> [PostCSS](https: