postcss-split-mq - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

package.json

 {
   "name": "postcss-split-mq",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Postcss plugin to split media queries into separate files",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

README.md

 # postcss-split-mq
 
-WIP
+PostCSS plugin to split specific media queries into separate files.
+
+## Usage
+
+Assuming a CSS file like this:
+```css
+/* main.css */
+
+body {
+  color: tangerine;
+}
+
+@media (min-width: 1024px) {
+  body {
+    color: pink;
+  }
+}
+```
+
+You can split it like this:
+```js
+const postcss = require('postcss');
+const splitMq = require('postcss-split-mq');
+
+const CSS = readFile('main.css');
+
+const options = {
+  outpath: './',
+  files: [
+    {
+      name: 'wide.css',
+      match: /min-width:\s*1024px/
+    }
+  ]
+};
+
+postcss([splitMq(options)])
+.process(CSS)
+.then(result => {
+  // result will be a postcss container with the remaining CSS
+  // after striping all media queries that match the `files` option
+  writeFile('remaining.css', result.css)
+});
+```
+
+And that will give you:
+```css
+/* remaining.css */
+
+body {
+  color: tangerine;
+}
+```
+
+and:
+```css
+/* wide.css */
+
+@media (min-width: 1024px) {
+  body {
+    color: pink;
+  }
+}
+```
+
+---
+
+You can create multiple `files` with multiple `match` criteria per file. Media queries are captured for a given file if _any_ of its match expressions are found.
+
+e.g.
+```js
+options = {
+  outpath: './',
+  files: [
+    {
+      name: 'medium.css',
+      match: [
+        /min-width:\s*(640px|40r?em)/,
+        /max-width:\s*(800px|50r?em)/
+      ]
+    },
+    {
+      name: 'wide.css',
+      match: /min-width:\s*1024px/
+    }
+  ]
+};
+```
+
+---
+
+This can be improved. Contributions are welcome. Create an issue if you see a problem or to ask a question.

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16083

10.1%

Number of low quality alerts

1

-50%

Number of lines in readme file

95

2275%

No dependency changes