diff --git a/README.md b/README.md index 7956812..1bcd530 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,89 @@ -# PostCSS Demq [![Build Status][ci-img]][ci] +# PostCSS demq [![Build Status][ci-img]][ci] -[PostCSS] plugin De-media querify your CSS. +[PostCSS](https://github.com/postcss/postcss) plugin to filter media queries in your CSS. -[PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.org/jonaswalden/postcss-demq.svg -[ci]: https://travis-ci.org/jonaswalden/postcss-demq +Primary use case is transforming a fully responsive stylesheet into a smaller sheet with styles for a specific device. ```css -.foo { - /* Input example */ +.component { content: "generic styles" } + +@media (max-width: 767px) { + .component { content: "mobile styles" } +} + +@media (min-width: 480px) and (max-width: 767px) { + .component { content: "medium / large mobile styles" } +} + +@media (min-width: 768px) and (max-width: 1023px) { + .component { content: "tablet styles" } +} + +@media (min-width: 1024px) { + .component { content: "desktop styles" } } ``` +Processed with options `{maxValue: 767}` will result in + ```css -.foo { - /* Output example */ +.component { content: "generic styles" } + +.component { content: "mobile styles" } + +@media (min-width: 480px) { + .component { content: "medium / large mobile styles" } } ``` +## Features + +Plugin can transform stylesheet following ways: + +- remove entire block - no intersection between mq range and option range +- preserve partial query - partial intersection between mq range and option range +- preserve query - mq range is completely within option range +- collapse query - option range is completely within mq range + +> Only supports media queries based on the `width` CSS media feature + +### At rules + +Supports media queries in both `@media` and `@import` at rules. + +### Media query syntaxes + +Supports syntaxes specified by the Media Query Level 3 and 4 drafts + +- prefixes `min-`, `max-` +- range comparators `<`, `>`, `=` + +#### Caveat + +With the level 4 syntax you may specify two conditions within the same parentheses: + +```(200 < width < 400)``` + +Currently this will be split into two single conditions: + +```(200 < width) and (width < 400)``` + +It was way easier. + ## Usage ```js -postcss([ require('postcss-demq') ]) +postcss([ + require('postcss-demq')(options) +]) ``` See [PostCSS] docs for examples for your environment. + +### Options + +#### `minValue` / `maxValue` +`Number` Specifies the range start and end of the targeted device in pixels + +Defaults to `-Infinity` / `Infinity`. +