postcss-split-mq - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/lib/container.js

@@ -20,10 +20,14 @@ 'use strict';
 
-const createUpdaterFn = exports.createUpdaterFn = containers => rule => {
+const createUpdaterFn = exports.createUpdaterFn = containers => atRule => {
+  const killRules = [];
   containers.forEach(container => {
     container.match.forEach(regex => {
-      if (regex.test(rule.params)) {
-        container.result.append(rule.remove());
+      const previouslyFound = false;
+      if (!previouslyFound && regex.test(atRule.params)) {
+        container.result.append(atRule.clone());
+        killRules.push(atRule);
       }
     });
   });
+  killRules.forEach(rule => rule.remove());
 };

dist/main.js

@@ -52,4 +52,2 @@ 'use strict';
       }));
-
-      return RESULT;
     });
@@ -56,0 +54,0 @@

package.json

 {
   "name": "postcss-split-mq",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Postcss plugin to split media queries into separate files",
@@ -25,2 +25,3 @@ "repository": {
   "keywords": [
+    "postcss-plugin",
     "postcss",
@@ -44,3 +45,4 @@ "plugin",
     "babel-register": "^6.26.0",
-    "shelljs": "^0.7.8"
+    "shelljs": "^0.7.8",
+    "tempy": "^0.2.1"
   },
@@ -47,0 +49,0 @@ "dependencies": {

src/lib/container.js

@@ -7,10 +7,14 @@ import postcss from 'postcss';
 
-export const createUpdaterFn = containers => rule => {
+export const createUpdaterFn = containers => atRule => {
+  const killRules = [];
   containers.forEach(container => {
     container.match.forEach(regex => {
-      if (regex.test(rule.params)) {
-        container.result.append(rule.remove());
+      const previouslyFound = false;
+      if (!previouslyFound && regex.test(atRule.params)) {
+        container.result.append(atRule.clone());
+        killRules.push(atRule);
       }
     });
   });
+  killRules.forEach(rule => rule.remove());
 };

src/main.js

@@ -29,7 +29,5 @@ require('babel-polyfill');
     );
-
-    return RESULT;
-  };
+  }
 });
 
 export default plugin;

test/options-test.js

 import test from 'ava';
+import tempy from 'tempy';
 import { processOptions } from '../src/lib/options';
@@ -6,5 +7,5 @@
   const options = processOptions({
-    outpath: './test/build',
+    outpath: tempy.directory(),
     files: {
-      name: 'one.css',
+      name: 'some.css',
       match: [
@@ -21,5 +22,5 @@ /some-regex/,
   const options = processOptions({
-    outpath: './test/build',
+    outpath: tempy.directory(),
     files: [{
-      name: 'one.css',
+      name: 'some.css',
       match: /some-regex/
@@ -26,0 +27,0 @@ }]

test/plugin-test.js

 import test from 'ava';
 import postcss from 'postcss';
-import postcssSplitMq from '../src/main';
+import tempy from 'tempy';
+import splitMQ from '../src/main';
+import { existsSync as fileExists } from 'fs';
 import { exec } from 'shelljs';
 import { read, write } from '../src/lib/io';
 
-const OPTS = {
-  outpath: './test/build',
-  files: [{
-    name: '300.css',
-    match: /min-width:\s*300px/
-  }]
-}
-
 let CSS;
@@ -21,8 +15,4 @@
 
-test.afterEach(() => {
-  exec('rm ./test/build/*', { silent: true });
-});
-
 test('it returns a css string', async t => {
-  const { css } = await postcss([postcssSplitMq]).process(CSS);
+  const { css } = await postcss([splitMQ]).process(CSS);
   t.is(typeof css, 'string');
@@ -32,3 +22,10 @@ });
 test('it strips media queries', async t => {
-  const { css } = await postcss([postcssSplitMq(OPTS)]).process(CSS);
+  const opts = {
+    outpath: tempy.directory(),
+    files: [{
+      name: '300.css',
+      match: /min-width:\s*300px/
+    }]
+  };
+  const { css } = await postcss([splitMQ(opts)]).process(CSS);
   t.false(css.includes('min-width: 300px'));
@@ -39,3 +36,3 @@ });
   const opts = {
-    outpath: './test/build',
+    outpath: tempy.directory(),
     files: [{
@@ -49,3 +46,3 @@ name: '300-600.css',
   };
-  const { css } = await postcss([postcssSplitMq(opts)]).process(CSS);
+  const { css } = await postcss([splitMQ(opts)]).process(CSS);
   t.false(
@@ -56,1 +53,56 @@ css.includes('min-width: 300px') &&
 });
+
+test('it creates the specified files', async t => {
+  const dir = tempy.directory();
+  const opts = {
+    outpath: dir,
+    files: [{
+      name: 'this-will-exist.css',
+      match: /min-width:\s*300px/
+    }]
+  };
+  await postcss([splitMQ(opts)]).process(CSS);
+
+  t.true(fileExists(`${dir}/this-will-exist.css`));
+});
+
+test('it places found media queries in the specified files', async t => {
+  const dir = tempy.directory();
+  const opts = {
+    outpath: dir,
+    files: [{
+      name: '300.css',
+      match: /min-width:\s*300px/
+    }]
+  };
+  await postcss([splitMQ(opts)]).process(CSS);
+
+  const output = await read(`${dir}/300.css`);
+
+  t.true(output.includes('min-width: 300px'));
+});
+
+test('it will repeat a found media query in multiple files', async t => {
+  const dir = tempy.directory();
+  const opts = {
+    outpath: dir,
+    files: [{
+      name: 'file1.css',
+      match: /min-width:\s*300px/
+    },{
+      name: 'file2.css',
+      match: /min-width:\s*300px/
+    }]
+  };
+  await postcss([splitMQ(opts)]).process(CSS);
+
+  const [ file1, file2 ] = await Promise.all([
+    read(`${dir}/file1.css`),
+    read(`${dir}/file2.css`)
+  ]);
+
+  t.true(
+    file1.includes('min-width: 300px') &&
+    file2.includes('min-width: 300px')
+  );
+});

No alert changes

Improved metrics

Total package byte prevSize

17909

10.65%

Number of package files

21

5%

Lines of code

396

15.45%

Worsened metrics

Dev dependency count

9

12.5%

Number of low supply chain risk alerts

3

50%

No dependency changes