From 1395cd7d348b129fb76d1f0004154a1c467edbae Mon Sep 17 00:00:00 2001 From: Owen Stowe Date: Wed, 13 Jun 2018 13:56:26 -0400 Subject: [PATCH] Add tests for ignoreSelectors, fs issue --- lib/index.js | 16 +++-- src/index.js | 14 +++- test/fixtures/fs/1.css | 9 +++ test/fixtures/fs/2.css | 11 +++ test/fixtures/fs/3.css | 6 ++ test/fixtures/fs/4.css | 19 ++++++ test/fixtures/fs/5.css | 6 ++ test/fixtures/fs/6.css | 6 ++ test/fixtures/fs/7.css | 11 +++ test/fixtures/fs/8.css | 12 ++++ test/fixtures/fs/fs.critical.actual.css | 68 +++++++++++++++++++ test/fixtures/fs/fs.critical.expected.css | 68 +++++++++++++++++++ test/fixtures/options/critical.css | 1 + .../ignore-selectors.critical.actual.css | 1 + .../ignore-selectors.critical.expected.css | 1 + test/fixtures/options/ignore-selectors.css | 16 +++++ .../ignore-selectors.non-critical.actual.css | 14 ++++ test/fs.spec.js | 27 ++++++++ test/options.spec.js | 18 ++++- 19 files changed, 313 insertions(+), 11 deletions(-) create mode 100644 test/fixtures/fs/1.css create mode 100644 test/fixtures/fs/2.css create mode 100644 test/fixtures/fs/3.css create mode 100644 test/fixtures/fs/4.css create mode 100644 test/fixtures/fs/5.css create mode 100644 test/fixtures/fs/6.css create mode 100644 test/fixtures/fs/7.css create mode 100644 test/fixtures/fs/8.css create mode 100644 test/fixtures/fs/fs.critical.actual.css create mode 100644 test/fixtures/fs/fs.critical.expected.css create mode 100644 test/fixtures/options/critical.css create mode 100644 test/fixtures/options/ignore-selectors.critical.actual.css create mode 100644 test/fixtures/options/ignore-selectors.critical.expected.css create mode 100644 test/fixtures/options/ignore-selectors.css create mode 100644 test/fixtures/options/ignore-selectors.non-critical.actual.css create mode 100644 test/fs.spec.js diff --git a/lib/index.js b/lib/index.js index 5787464..6118926 100755 --- a/lib/index.js +++ b/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) { diff --git a/src/index.js b/src/index.js index ceb2df8..930f747 100755 --- a/src/index.js +++ b/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) } diff --git a/test/fixtures/fs/1.css b/test/fixtures/fs/1.css new file mode 100644 index 0000000..cb59066 --- /dev/null +++ b/test/fixtures/fs/1.css @@ -0,0 +1,9 @@ +@critical; + +.foo .bar { + color: green; +} + +.foo { + color: orange; +} diff --git a/test/fixtures/fs/2.css b/test/fixtures/fs/2.css new file mode 100644 index 0000000..e843714 --- /dev/null +++ b/test/fixtures/fs/2.css @@ -0,0 +1,11 @@ +@critical; + +header.top { + background: red; +} + +@media screen and (max-width: 400px) { + header.top { + width: 100%; + } +} diff --git a/test/fixtures/fs/3.css b/test/fixtures/fs/3.css new file mode 100644 index 0000000..d1ee1c1 --- /dev/null +++ b/test/fixtures/fs/3.css @@ -0,0 +1,6 @@ +@critical; + +.bar-baz { + color: blue; + font-style: italic; +} diff --git a/test/fixtures/fs/4.css b/test/fixtures/fs/4.css new file mode 100644 index 0000000..8c006fc --- /dev/null +++ b/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; + } +} diff --git a/test/fixtures/fs/5.css b/test/fixtures/fs/5.css new file mode 100644 index 0000000..3531f00 --- /dev/null +++ b/test/fixtures/fs/5.css @@ -0,0 +1,6 @@ +@critical; + +.fs-test-five { + color: blue; + font-family: Times; +} diff --git a/test/fixtures/fs/6.css b/test/fixtures/fs/6.css new file mode 100644 index 0000000..ec68089 --- /dev/null +++ b/test/fixtures/fs/6.css @@ -0,0 +1,6 @@ +@critical; + +.fs-test-six { + color: blue; + font-family: Helvetica; +} diff --git a/test/fixtures/fs/7.css b/test/fixtures/fs/7.css new file mode 100644 index 0000000..2974810 --- /dev/null +++ b/test/fixtures/fs/7.css @@ -0,0 +1,11 @@ +@critical; + +.foo { + display: flex; + width: calc(100% - 200px); +} + +.bar { + border: 10px solid gold; + height: 100%; +} diff --git a/test/fixtures/fs/8.css b/test/fixtures/fs/8.css new file mode 100644 index 0000000..fd0267d --- /dev/null +++ b/test/fixtures/fs/8.css @@ -0,0 +1,12 @@ +.foo { + color: gold; + height: 100px; +} + +@critical { + + .bar { + color: tomato; + height: 200px; + } +} diff --git a/test/fixtures/fs/fs.critical.actual.css b/test/fixtures/fs/fs.critical.actual.css new file mode 100644 index 0000000..cf394ba --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/test/fixtures/fs/fs.critical.expected.css b/test/fixtures/fs/fs.critical.expected.css new file mode 100644 index 0000000..cf394ba --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/test/fixtures/options/critical.css b/test/fixtures/options/critical.css new file mode 100644 index 0000000..acfe5c9 --- /dev/null +++ b/test/fixtures/options/critical.css @@ -0,0 +1 @@ +.test-output-dest{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/options/ignore-selectors.critical.actual.css b/test/fixtures/options/ignore-selectors.critical.actual.css new file mode 100644 index 0000000..22c081a --- /dev/null +++ b/test/fixtures/options/ignore-selectors.critical.actual.css @@ -0,0 +1 @@ +.baz{color:green;text-decoration:underline} \ No newline at end of file diff --git a/test/fixtures/options/ignore-selectors.critical.expected.css b/test/fixtures/options/ignore-selectors.critical.expected.css new file mode 100644 index 0000000..ff4b239 --- /dev/null +++ b/test/fixtures/options/ignore-selectors.critical.expected.css @@ -0,0 +1 @@ +.baz{color:green;text-decoration:underline} diff --git a/test/fixtures/options/ignore-selectors.css b/test/fixtures/options/ignore-selectors.css new file mode 100644 index 0000000..b0db7b9 --- /dev/null +++ b/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; +} diff --git a/test/fixtures/options/ignore-selectors.non-critical.actual.css b/test/fixtures/options/ignore-selectors.non-critical.actual.css new file mode 100644 index 0000000..b97ed90 --- /dev/null +++ b/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; +} diff --git a/test/fs.spec.js b/test/fs.spec.js new file mode 100644 index 0000000..f5c37c4 --- /dev/null +++ b/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') + }) +}) diff --git a/test/options.spec.js b/test/options.spec.js index da06031..311b014 100644 --- a/test/options.spec.js +++ b/test/options.spec.js @@ -1,3 +1,4 @@ +const path = require('path'); const compareCritical = require('./compareCritical'); const { normalizeOpts } = require('./utils'); const preTest = require('./preTest'); @@ -40,12 +41,23 @@ describe('tests for `outputDest` option', () => { }) describe('tests for `outputPath` option', () => { - const opts = normalizeOpts({ outputPath: `${process.cwd()}/test/fixtures/options/outputPath` }); + const opts = normalizeOpts({ outputPath: path.join(__dirname, 'fixtures/options/outputPath') }); beforeAll(async () => { await preTest('options', opts); }); - it('should output critical css to filename configured in `outputDest` option', () => { + it('should output critical css to path configured in `outputPath` option', () => { compareCritical(opts, 'output-path') }) -}) \ No newline at end of file +}) + +describe('tests for `ignoreSelectors` option', () => { + const opts = normalizeOpts({ ignoreSelectors: [ 'foo', 'bar' ] }); + beforeAll(async () => { + await preTest('options', opts); + }); + + it('should remove configured selectors in `ignoreSelectors` option from all critical stylesheets', () => { + compareCritical(opts, 'ignore-selectors') + }) +})