Add tests for ignoreSelectors, fs issue

lib/index.js

@@ -108,13 +108,17 @@ let append = false;
 
 /**
  * Instance of Bottleneck for rate-limiting file writes
- *
- * @param {number} fsWriteRate minimum time between file writes
  */
 
 
 let limiter;
 
+/**
+ * Create or get a "singleton" instance of Bottleneck
+ *
+ * @param {number} fsWriteRate minimum time between file writes
+ * @return {Bottleneck} instnance of Bottleneck
+ */
 function createOrGetLimiter(fsWriteRate) {
   if (!limiter) {
     limiter = new _bottleneck2.default({
@@ -209,7 +213,9 @@ function doDryRun(css) {
             preserve = args.preserve,
             minify = args.minify,
             outputPath = args.outputPath,
-            outputDest = args.outputDest;
+            outputDest = args.outputDest,
+            ignoreSelectors = args.ignoreSelectors,
+            fsWriteRate = args.fsWriteRate;
 
       const criticalOutput = (0, _getCriticalRules.getCriticalRules)(css, outputDest);
       let result = {};
@@ -226,7 +232,7 @@ function doDryRun(css) {
           const filePath = _path2.default.join(outputPath, outputFile);
           criticalOutput[outputFile].each(function (rule) {
             // Check if we should remove this selector from output
-            const shouldIgnore = rule.selector && args.ignoreSelectors.some(function (ignore) {
+            const shouldIgnore = rule.selector && ignoreSelectors.some(function (ignore) {
               return rule.selector.includes(ignore);
             });
             if (shouldIgnore) {
@@ -236,7 +242,7 @@ function doDryRun(css) {
             return criticalCSS.append(rule.clone());
           });
           result = yield (0, _postcss2.default)(minify ? [_cssnano2.default] : []).process(criticalCSS, { from: undefined });
-          yield dryRunOrWriteFile(dryRun, filePath, result, args.fsWriteRate);
+          yield dryRunOrWriteFile(dryRun, filePath, result, fsWriteRate);
           clean(css, preserve);
         }
       } catch (err) {

src/index.js

@@ -194,7 +194,15 @@ function buildCritical (options: Object = {}): Function {
   append = false
 
   return async (css: Object): Object => {
-    const { dryRun, preserve, minify, outputPath, outputDest } = args
+    const {
+      dryRun,
+      preserve,
+      minify,
+      outputPath,
+      outputDest,
+      ignoreSelectors,
+      fsWriteRate
+    } = args
     const criticalOutput = getCriticalRules(css, outputDest)
     let result = {}
 
@@ -203,7 +211,7 @@ function buildCritical (options: Object = {}): Function {
       const filePath = path.join(outputPath, outputFile)
       criticalOutput[outputFile].each((rule: Object): any => {
         // Check if we should remove this selector from output
-        const shouldIgnore = rule.selector && args.ignoreSelectors
+        const shouldIgnore = rule.selector && ignoreSelectors
           .some((ignore: string): boolean => rule.selector.includes(ignore))
         if (shouldIgnore) {
           return
@@ -213,7 +221,7 @@ function buildCritical (options: Object = {}): Function {
       })
       result = await postcss(minify ? [cssnano] : [])
         .process(criticalCSS, { from: undefined })
-      await dryRunOrWriteFile(dryRun, filePath, result, args.fsWriteRate)
+      await dryRunOrWriteFile(dryRun, filePath, result, fsWriteRate)
       clean(css, preserve)
     }
 

test/fixtures/fs/1.css

@@ -0,0 +1,9 @@
+@critical;
+
+.foo .bar {
+  color: green;
+}
+
+.foo {
+  color: orange;
+}

test/fixtures/fs/2.css

@@ -0,0 +1,11 @@
+@critical;
+
+header.top {
+  background: red;
+}
+
+@media screen and (max-width: 400px) {
+  header.top {
+    width: 100%;
+  }
+}

test/fixtures/fs/3.css

@@ -0,0 +1,6 @@
+@critical;
+
+.bar-baz {
+  color: blue;
+  font-style: italic;
+}

test/fixtures/fs/4.css

@@ -0,0 +1,19 @@
+@media screen and (min-width: 1024px) {
+  .foo {
+    critical-selector: this;
+    display: flex;
+    width: calc(100% - 200px);
+  }
+
+  .bar {
+    border: 10px solid gold;
+    critical-selector: this;
+    height: 100%;
+  }
+
+  .baz::before {
+    content: 'test';
+    critical-selector: this;
+    position: fixed;
+  }
+}

test/fixtures/fs/5.css

@@ -0,0 +1,6 @@
+@critical;
+
+.fs-test-five {
+  color: blue;
+  font-family: Times;
+}

test/fixtures/fs/6.css

@@ -0,0 +1,6 @@
+@critical;
+
+.fs-test-six {
+  color: blue;
+  font-family: Helvetica;
+}

test/fixtures/fs/7.css

@@ -0,0 +1,11 @@
+@critical;
+
+.foo {
+  display: flex;
+  width: calc(100% - 200px);
+}
+
+.bar {
+  border: 10px solid gold;
+  height: 100%;
+}

test/fixtures/fs/8.css

@@ -0,0 +1,12 @@
+.foo {
+  color: gold;
+  height: 100px;
+}
+
+@critical {
+
+  .bar {
+    color: tomato;
+    height: 200px;
+  }
+}

test/fixtures/fs/fs.critical.actual.css

@@ -0,0 +1,68 @@
+
+
+.foo .bar {
+  color: green;
+}
+
+.foo {
+  color: orange;
+}
+
+header.top {
+  background: red;
+}
+
+@media screen and (max-width: 400px) {
+  header.top {
+    width: 100%;
+  }
+}
+
+.bar-baz {
+  color: blue;
+  font-style: italic;
+}@media screen and (min-width: 1024px) {
+  .foo {
+    display: flex;
+    width: calc(100% - 200px);
+  }
+}
+@media screen and (min-width: 1024px) {
+
+  .bar {
+    border: 10px solid gold;
+    height: 100%;
+  }
+}
+@media screen and (min-width: 1024px) {
+
+  .baz::before {
+    content: 'test';
+    position: fixed;
+  }
+}
+
+.fs-test-five {
+  color: blue;
+  font-family: Times;
+}
+
+.fs-test-six {
+  color: blue;
+  font-family: Helvetica;
+}
+
+.foo {
+  display: flex;
+  width: calc(100% - 200px);
+}
+
+.bar {
+  border: 10px solid gold;
+  height: 100%;
+}
+
+  .bar {
+    color: tomato;
+    height: 200px;
+  }

test/fixtures/fs/fs.critical.expected.css

@@ -0,0 +1,68 @@
+
+
+.foo .bar {
+  color: green;
+}
+
+.foo {
+  color: orange;
+}
+
+header.top {
+  background: red;
+}
+
+@media screen and (max-width: 400px) {
+  header.top {
+    width: 100%;
+  }
+}
+
+.bar-baz {
+  color: blue;
+  font-style: italic;
+}@media screen and (min-width: 1024px) {
+  .foo {
+    display: flex;
+    width: calc(100% - 200px);
+  }
+}
+@media screen and (min-width: 1024px) {
+
+  .bar {
+    border: 10px solid gold;
+    height: 100%;
+  }
+}
+@media screen and (min-width: 1024px) {
+
+  .baz::before {
+    content: 'test';
+    position: fixed;
+  }
+}
+
+.fs-test-five {
+  color: blue;
+  font-family: Times;
+}
+
+.fs-test-six {
+  color: blue;
+  font-family: Helvetica;
+}
+
+.foo {
+  display: flex;
+  width: calc(100% - 200px);
+}
+
+.bar {
+  border: 10px solid gold;
+  height: 100%;
+}
+
+  .bar {
+    color: tomato;
+    height: 200px;
+  }

test/fixtures/options/critical.css

@@ -0,0 +1 @@
+.test-output-dest{color:blue;font-family:Times}

test/fixtures/options/ignore-selectors.critical.actual.css

@@ -0,0 +1 @@
+.baz{color:green;text-decoration:underline}

test/fixtures/options/ignore-selectors.critical.expected.css

@@ -0,0 +1 @@
+.baz{color:green;text-decoration:underline}

test/fixtures/options/ignore-selectors.css

@@ -0,0 +1,16 @@
+@critical ignore-selectors.critical.actual.css;
+
+.foo {
+	color: blue;
+	font-style: italic;
+}
+
+.bar {
+	color: tomato;
+	display: flex;
+}
+
+.baz {
+	color: green;
+	text-decoration: underline;
+}

test/fixtures/options/ignore-selectors.non-critical.actual.css

@@ -0,0 +1,14 @@
+.foo {
+	color: blue;
+	font-style: italic;
+}
+
+.bar {
+	color: tomato;
+	display: flex;
+}
+
+.baz {
+	color: green;
+	text-decoration: underline;
+}

test/fs.spec.js

@@ -0,0 +1,27 @@
+const fs = require('fs-extra');
+const path = require('path');
+const postcss = require('postcss');
+const compareCritical = require('./compareCritical');
+const { normalizeOpts } = require('./utils');
+const postcssCriticalCSS = require('..')
+
+describe('tests for file writing functionality', () => {
+  it('should be capable of copying critical CSS from multiple sources into a single file without overwrites', async () => {
+    const fixturePath = path.join(__dirname, 'fixtures/fs');
+    const pluginOpts = normalizeOpts({
+      outputPath: fixturePath,
+      outputDest: 'fs.critical.actual.css',
+      minify: false
+    });
+    const files = await fs.readdir(fixturePath)
+    const processor = postcss()
+      .use(postcssCriticalCSS(pluginOpts))
+
+    for (let file of files) {
+      const css = await fs.readFile(path.join(fixturePath, file), 'utf8');
+      await processor.process(css, { from: file })
+    }
+
+    compareCritical(pluginOpts, 'fs')
+  })
+})