diff --git a/.babelrc b/.babelrc index 7592ae4..cf3af6e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,17 @@ { - "presets": ["es2015"], - "plugins": ["transform-flow-strip-types", "transform-object-rest-spread"] + "presets": [ + ["env", { + "targets": { + "node": "6" + } + }] + ], + "plugins": [ + ["transform-runtime", { + "polyfill": false, + "regenerator": true + }], + "transform-flow-strip-types", + "transform-object-rest-spread" + ] } diff --git a/.flowconfig b/.flowconfig index e69de29..0135137 100644 --- a/.flowconfig +++ b/.flowconfig @@ -0,0 +1,2 @@ +[ignore] +.*/node_modules/.* \ No newline at end of file diff --git a/critical.css b/critical.css deleted file mode 100644 index 9ac01ba..0000000 --- a/critical.css +++ /dev/null @@ -1 +0,0 @@ -.foo{color:#32cd32}.foo:before{content:"Hello, World."} \ No newline at end of file diff --git a/default.critical.expected.css b/default.critical.expected.css deleted file mode 100644 index 46daac6..0000000 --- a/default.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.foo{color:#32cd32}.foo:before{content:"Hello, World."} diff --git a/default.css b/default.css deleted file mode 100644 index ea44c73..0000000 --- a/default.css +++ /dev/null @@ -1,9 +0,0 @@ -@critical; - -.foo { - color: limegreen; -} - -.foo::before { - content: 'Hello, World.' -} diff --git a/default.non-critical.actual.css b/default.non-critical.actual.css deleted file mode 100644 index b4ed413..0000000 --- a/default.non-critical.actual.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: limegreen; -} - -.foo::before { - content: 'Hello, World.' -} diff --git a/default.non-critical.expected.css b/default.non-critical.expected.css deleted file mode 100644 index b4ed413..0000000 --- a/default.non-critical.expected.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: limegreen; -} - -.foo::before { - content: 'Hello, World.' -} diff --git a/lib/getChildRules.js b/lib/getChildRules.js index 9667904..4134602 100644 --- a/lib/getChildRules.js +++ b/lib/getChildRules.js @@ -21,23 +21,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de * @return {array} Array of child rules. */ function getChildRules(css, parent) { - var result = []; - var selectorRegExp = new RegExp(parent.selector); + const result = []; + const selectorRegExp = new RegExp(parent.selector); // Walk all rules to mach child selectors - css.walkRules(selectorRegExp, function (rule) { - var childRule = (0, _matchChild.matchChild)(parent, rule); + css.walkRules(selectorRegExp, rule => { + const childRule = (0, _matchChild.matchChild)(parent, rule); if (childRule) { result.push(rule); } }); // Walk all at-rules to match nested child selectors - css.walkAtRules(function (atRule) { - atRule.walkRules(selectorRegExp, function (rule) { - var childRule = (0, _matchChild.matchChild)(parent, rule); + css.walkAtRules(atRule => { + atRule.walkRules(selectorRegExp, rule => { + const childRule = (0, _matchChild.matchChild)(parent, rule); // Create new at-rule to append only necessary selector to critical - var criticalAtRule = _postcss2.default.atRule({ + const criticalAtRule = _postcss2.default.atRule({ name: atRule.name, params: atRule.params }); @@ -46,7 +46,7 @@ function getChildRules(css, parent) { * aren't identical. */ if ((rule.selector === parent.selector || childRule) && _postcss2.default.parse(rule).toString() !== _postcss2.default.parse(parent).toString()) { - var clone = rule.clone(); + const clone = rule.clone(); criticalAtRule.append(clone); result.push(criticalAtRule); } diff --git a/lib/getCriticalDestination.js b/lib/getCriticalDestination.js index b311634..e5ad1e6 100644 --- a/lib/getCriticalDestination.js +++ b/lib/getCriticalDestination.js @@ -14,7 +14,7 @@ exports.getCriticalDestination = getCriticalDestination; * @return {string} String corresponding to output destination. */ function getCriticalDestination(rule, dest) { - rule.walkDecls('critical-filename', function (decl) { + rule.walkDecls('critical-filename', decl => { dest = decl.value.replace(/['"]*/g, ''); decl.remove(); }); diff --git a/lib/getCriticalRules.js b/lib/getCriticalRules.js index 5888ff8..75e073b 100644 --- a/lib/getCriticalRules.js +++ b/lib/getCriticalRules.js @@ -24,14 +24,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de * @param {string} test Declaration string. Default `critical-selector` * @return {Object} clone Cloned, cleaned root node. */ -function clean(root) { - var test = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'critical-selector'; - - var clone = root.clone(); +function clean(root, test = 'critical-selector') { + const clone = root.clone(); if (clone.type === 'decl') { clone.remove(); } else { - clone.walkDecls(test, function (decl) { + clone.walkDecls(test, decl => { decl.remove(); }); } @@ -45,12 +43,12 @@ function clean(root) { * @return {Object} sortedRoot Root with nodes sorted by source order. */ function correctSourceOrder(root) { - var sortedRoot = _postcss2.default.root(); - var clone = root.clone(); - clone.walkRules(function (rule) { - var start = rule.source.start.line; + const sortedRoot = _postcss2.default.root(); + const clone = root.clone(); + clone.walkRules(rule => { + let start = rule.source.start.line; if (rule.parent.type === 'atrule') { - var child = rule; + const child = rule; rule = _postcss2.default.atRule({ name: rule.parent.name, params: rule.parent.params @@ -91,11 +89,11 @@ function establishContainer(node) { * @return {Object} clonedRoot Root object. */ function updateCritical(root, update) { - var clonedRoot = root.clone(); + const clonedRoot = root.clone(); if (update.type === 'rule') { clonedRoot.append(clean(update.clone())); } else { - update.clone().each(function (rule) { + update.clone().each(rule => { clonedRoot.append(clean(rule.root())); }); } @@ -111,21 +109,21 @@ function updateCritical(root, update) { * @return {object} Object containing critical rules, organized by output destination */ function getCriticalRules(css, defaultDest) { - var critical = (0, _atRule.getCriticalFromAtRule)({ css: css, defaultDest: defaultDest }); - css.walkDecls('critical-selector', function (decl) { - var parent = decl.parent, - value = decl.value; - - var dest = (0, _getCriticalDestination.getCriticalDestination)(parent, defaultDest); - var container = establishContainer(parent); - var childRules = value === 'scope' ? (0, _getChildRules.getChildRules)(css, parent) : []; + const critical = (0, _atRule.getCriticalFromAtRule)({ css, defaultDest }); + css.walkDecls('critical-selector', decl => { + const parent = decl.parent, + value = decl.value; + + const dest = (0, _getCriticalDestination.getCriticalDestination)(parent, defaultDest); + const container = establishContainer(parent); + const childRules = value === 'scope' ? (0, _getChildRules.getChildRules)(css, parent) : []; // Sanity check, make sure we've got a root node critical[dest] = critical[dest] || _postcss2.default.root(); switch (value) { case 'scope': // Add all child rules - var criticalRoot = childRules.reduce(function (acc, rule) { + const criticalRoot = childRules.reduce((acc, rule) => { return acc.append(rule.clone()); }, critical[dest].append(container)); diff --git a/lib/matchChild.js b/lib/matchChild.js index b14796d..0127059 100644 --- a/lib/matchChild.js +++ b/lib/matchChild.js @@ -13,6 +13,6 @@ exports.matchChild = matchChild; * @return {object} Parent rule for which children should be included */ function matchChild(parent, rule) { - var childRegExp = new RegExp("(, )?(" + parent.selector + " [^,s]*),?.*"); // eslint-disable-line no-useless-escape + const childRegExp = new RegExp(`(, )?(${parent.selector} [^,\s]*),?.*`); // eslint-disable-line no-useless-escape return rule.selector !== parent.selector && rule.selector.match(childRegExp) !== null; } \ No newline at end of file diff --git a/package.json b/package.json index 4572722..9365bcf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-critical-css", - "version": "3.0.2", + "version": "3.0.1", "description": "Generate critical CSS using PostCSS", "main": "index.js", "repository": { @@ -23,7 +23,10 @@ "babel-eslint": "^7.2.3", "babel-plugin-transform-flow-strip-types": "^6.8.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-plugin-transform-runtime": "^6.23.0", + "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.13.2", + "babel-runtime": "^6.26.0", "eslint": "^3.3.1", "eslint-config-standard": "^10.2.1", "eslint-plugin-flowtype": "^2.41.0", @@ -32,6 +35,7 @@ "eslint-plugin-promise": "^3.6.0", "eslint-plugin-standard": "^3.0.1", "flow-bin": "^0.48.0", + "jest": "^23.1.0", "minimist": "^1.2.0", "tape": "^4.8.0" }, @@ -41,8 +45,7 @@ "flow": "flow; test $? -eq 0 -o $? -eq 2", "eslint": "eslint test/**/*.js && eslint src/**", "start": "eslint src/** && npm run flow && babel src --out-dir lib --watch", - "pretest": "./node_modules/.bin/babel-node test/preTest.js", - "test": "npm run build && npm run test-default && npm run test-no-preserve && npm run test-output-path && npm run test-output-dest && npm run test-no-args && npm run test-no-minify", + "test": "jest --verbose", "test-no-args": "npm run pretest -- --noArgs && tape test --noArgs --test=default", "test-no-minify": "npm run pretest -- --minify=false --fixtures-dir=fixtures-no-minify && tape test --fixtures-dir=fixtures-no-minify --test=default,this", "test-output-dest": "npm run pretest -- --outputDest='custom.css' --fixtures-dir=fixtures-output-dest && tape test --outputDest='custom.css' --fixtures-dir=fixtures-output-dest --test=default", @@ -52,7 +55,8 @@ }, "dependencies": { "chalk": "^1.1.3", - "cssnano": "^4.0.0", - "postcss": "^7.0.0" + "cssnano": "^3.7.4", + "fs-extra": "^6.0.1", + "postcss": "^6.0.16" } } diff --git a/test/atRule.spec.js b/test/atRule.spec.js new file mode 100644 index 0000000..a2bf056 --- /dev/null +++ b/test/atRule.spec.js @@ -0,0 +1,29 @@ +const compareCritical = require('./compareCritical'); +const { fsTimeout, normalizeOpts } = require('./utils'); +const preTest = require('./preTest'); + +const opts = normalizeOpts(); +beforeAll(async () => { + preTest('atRule', opts); + await fsTimeout(); +}); + +describe('tests for @critical rule', () => { + it('should move all selectors in a file to critical css if @critical at-rule is used without wrapping anything', () => { + compareCritical(opts, 'standalone') + }) + + it('should remove @critical at-rule from non-critical css', () => { + compareCritical(opts, 'standalone', true) + }) +}) + +describe('tests for @critical at-rule wrapping specific selectors', () => { + it('should move all selectors in a file to critical css if @critical rule is used without wrapping anything', () => { + compareCritical(opts, 'wrapping') + }) + + it('should remove @critical at-rule from non-critical css', () => { + compareCritical(opts, 'wrapping', true) + }) +}) diff --git a/test/compareCritical.js b/test/compareCritical.js new file mode 100644 index 0000000..f474773 --- /dev/null +++ b/test/compareCritical.js @@ -0,0 +1,25 @@ +const fs = require('fs-extra'); + +module.exports = function compareCritical(opts, name, testNonCritical) { + let basePath = opts.outputPath || `${process.cwd()}/test/fixtures` + let actual = opts.outputDest || 'critical.css' + + if (opts.noArgs) { + basePath = process.cwd() + } + + const expected = testNonCritical + ? `${name}.non-critical.expected.css` + : `${name}.critical.expected.css` + if ( + (name !== 'default' || testNonCritical) && + ! opts.outputDest + ) { + actual = testNonCritical + ? `${name}.non-critical.actual.css` + : `${name}.critical.actual.css` + } + + expect(fs.readFileSync(`${basePath}/${actual}`, 'utf8').trim()) + .toEqual(fs.readFileSync(`${basePath}/${expected}`, 'utf8').trim()) +} diff --git a/test/default.spec.js b/test/default.spec.js new file mode 100644 index 0000000..c03aa46 --- /dev/null +++ b/test/default.spec.js @@ -0,0 +1,71 @@ +const compareCritical = require('./compareCritical'); +const { fsTimeout, normalizeOpts } = require('./utils'); +const preTest = require('./preTest'); + +describe('default tests', () => { + const opts = normalizeOpts(); + beforeAll(async () => { + preTest('default', opts); + await fsTimeout(); + }); + + it('should move styles into critical stylesheet if @critical at-rule is used', () => { + compareCritical(opts, 'default') + }) + + it('should not modify non-critical stylesheet', () => { + compareCritical(opts, 'default', true) + }) +}) + +describe('tests for `minify` option', () => { + const opts = normalizeOpts({ minify: false }); + beforeAll(async () => { + preTest('options', opts); + await fsTimeout(); + }); + + it('should not minify critical CSS styles if `minify` option is set to `false`', () => { + compareCritical(opts, 'minify-false') + }) +}) + +describe('tests for `preserve` option', () => { + const opts = normalizeOpts({ preserve: false }); + beforeAll(async () => { + preTest('options', opts); + await fsTimeout(); + }); + + it('should move selectors specified with `@critical` or `critical-selector` to critical css file', () => { + compareCritical(opts, 'preserve') + }) + + it('should remove selectors specified with `@critical` or `critical-selector` from non-critical stylesheet', () => { + compareCritical(opts, 'preserve', true) + }) +}) + +describe('tests for `outputDest` option', () => { + const opts = normalizeOpts({ outputDest: 'test-output-dest.critical.actual.css' }); + beforeAll(async () => { + preTest('options', opts); + await fsTimeout(); + }); + + it('should output critical css to filename configured in `outputDest` option', () => { + compareCritical(opts, 'output-dest') + }) +}) + +describe('tests for `outputPath` option', () => { + const opts = normalizeOpts({ outputPath: `${process.cwd()}/test/fixtures/options/outputPath` }); + beforeAll(async () => { + preTest('options', opts); + await fsTimeout(); + }); + + it('should output critical css to filename configured in `outputDest` option', () => { + compareCritical(opts, 'output-path') + }) +}) diff --git a/test/fixtures-no-minify/critical.css b/test/fixtures-no-minify/critical.css deleted file mode 100644 index a7e47af..0000000 --- a/test/fixtures-no-minify/critical.css +++ /dev/null @@ -1,8 +0,0 @@ - - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} \ No newline at end of file diff --git a/test/fixtures-no-minify/default.critical.expected.css b/test/fixtures-no-minify/default.critical.expected.css deleted file mode 100644 index 1aeeec8..0000000 --- a/test/fixtures-no-minify/default.critical.expected.css +++ /dev/null @@ -1,8 +0,0 @@ - - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-minify/this.critical.actual.css b/test/fixtures-no-minify/this.critical.actual.css deleted file mode 100644 index f525fe0..0000000 --- a/test/fixtures-no-minify/this.critical.actual.css +++ /dev/null @@ -1,6 +0,0 @@ -.testing-this { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} \ No newline at end of file diff --git a/test/fixtures-no-minify/this.critical.expected.css b/test/fixtures-no-minify/this.critical.expected.css deleted file mode 100644 index e142924..0000000 --- a/test/fixtures-no-minify/this.critical.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -.testing-this { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-minify/this.css b/test/fixtures-no-minify/this.css deleted file mode 100644 index e7a6cd6..0000000 --- a/test/fixtures-no-minify/this.css +++ /dev/null @@ -1,8 +0,0 @@ -.testing-this { - critical-filename: this.critical.actual.css; - critical-selector: this; - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-minify/this.non-critical.actual.css b/test/fixtures-no-minify/this.non-critical.actual.css deleted file mode 100644 index e142924..0000000 --- a/test/fixtures-no-minify/this.non-critical.actual.css +++ /dev/null @@ -1,6 +0,0 @@ -.testing-this { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-minify/this.non-critical.expected.css b/test/fixtures-no-minify/this.non-critical.expected.css deleted file mode 100644 index e142924..0000000 --- a/test/fixtures-no-minify/this.non-critical.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -.testing-this { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-preserve/atRule-wrapping.css b/test/fixtures-no-preserve/atRule-wrapping.css deleted file mode 100644 index 324b359..0000000 --- a/test/fixtures-no-preserve/atRule-wrapping.css +++ /dev/null @@ -1,11 +0,0 @@ -.foo { - color: gold; - height: 100px; -} - -@critical atRule-wrapping.critical.actual.css { - .bar { - color: tomato; - height: 200px; - } -} diff --git a/test/fixtures-no-preserve/atRule-wrapping.non-critical.actual.css b/test/fixtures-no-preserve/atRule-wrapping.non-critical.actual.css deleted file mode 100644 index baa5561..0000000 --- a/test/fixtures-no-preserve/atRule-wrapping.non-critical.actual.css +++ /dev/null @@ -1,4 +0,0 @@ -.foo { - color: gold; - height: 100px; -} diff --git a/test/fixtures-no-preserve/atRule-wrapping.non-critical.expected.css b/test/fixtures-no-preserve/atRule-wrapping.non-critical.expected.css deleted file mode 100644 index baa5561..0000000 --- a/test/fixtures-no-preserve/atRule-wrapping.non-critical.expected.css +++ /dev/null @@ -1,4 +0,0 @@ -.foo { - color: gold; - height: 100px; -} diff --git a/test/fixtures-no-preserve/atRule.css b/test/fixtures-no-preserve/atRule.css deleted file mode 100644 index d2d84e8..0000000 --- a/test/fixtures-no-preserve/atRule.css +++ /dev/null @@ -1,11 +0,0 @@ -@critical atRule.critical.actual.css; - -.foo { - display: flex; - width: calc(100% - 200px); -} - -.bar { - border: 10px solid gold; - height: 100%; -} diff --git a/test/fixtures-no-preserve/atRule.non-critical.actual.css b/test/fixtures-no-preserve/atRule.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/atRule.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/atRule.non-critical.expected.css b/test/fixtures-no-preserve/atRule.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-no-preserve/default.critical.expected.css b/test/fixtures-no-preserve/default.critical.expected.css deleted file mode 100644 index 24dc7a1..0000000 --- a/test/fixtures-no-preserve/default.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} \ No newline at end of file diff --git a/test/fixtures-no-preserve/default.css b/test/fixtures-no-preserve/default.css deleted file mode 100644 index a755513..0000000 --- a/test/fixtures-no-preserve/default.css +++ /dev/null @@ -1,8 +0,0 @@ -@critical; - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-preserve/default.non-critical.actual.css b/test/fixtures-no-preserve/default.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/default.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/default.non-critical.expected.css b/test/fixtures-no-preserve/default.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-no-preserve/media-scope.css b/test/fixtures-no-preserve/media-scope.css deleted file mode 100644 index 103afd9..0000000 --- a/test/fixtures-no-preserve/media-scope.css +++ /dev/null @@ -1,10 +0,0 @@ -header.top { - critical-filename: media-scope.critical.actual.css; - critical-selector: scope; - background: red; -} -@media screen and (max-width: 400px) { - header.top { - width: 100%; - } -} diff --git a/test/fixtures-no-preserve/media-scope.non-critical.actual.css b/test/fixtures-no-preserve/media-scope.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/media-scope.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/media-scope.non-critical.expected.css b/test/fixtures-no-preserve/media-scope.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-no-preserve/media-this.css b/test/fixtures-no-preserve/media-this.css deleted file mode 100644 index a95d6ab..0000000 --- a/test/fixtures-no-preserve/media-this.css +++ /dev/null @@ -1,18 +0,0 @@ -@media screen and (min-width: 1024px) { - .foo { - critical-selector: this; - critical-filename: media-this.critical.actual.css; - display: flex; - width: calc(100% - 200px); - } - - .bar { - border: 10px solid gold; - height: 100%; - } - - .baz::before { - content: 'test'; - position: fixed; - } -} diff --git a/test/fixtures-no-preserve/media-this.non-critical.actual.css b/test/fixtures-no-preserve/media-this.non-critical.actual.css deleted file mode 100644 index f18683e..0000000 --- a/test/fixtures-no-preserve/media-this.non-critical.actual.css +++ /dev/null @@ -1,12 +0,0 @@ -@media screen and (min-width: 1024px) { - - .bar { - border: 10px solid gold; - height: 100%; - } - - .baz::before { - content: 'test'; - position: fixed; - } -} diff --git a/test/fixtures-no-preserve/media-this.non-critical.expected.css b/test/fixtures-no-preserve/media-this.non-critical.expected.css deleted file mode 100644 index f18683e..0000000 --- a/test/fixtures-no-preserve/media-this.non-critical.expected.css +++ /dev/null @@ -1,12 +0,0 @@ -@media screen and (min-width: 1024px) { - - .bar { - border: 10px solid gold; - height: 100%; - } - - .baz::before { - content: 'test'; - position: fixed; - } -} diff --git a/test/fixtures-no-preserve/media.non-critical.actual.css b/test/fixtures-no-preserve/media.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/media.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/media.non-critical.expected.css b/test/fixtures-no-preserve/media.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-no-preserve/scope.css b/test/fixtures-no-preserve/scope.css deleted file mode 100644 index 68a87be..0000000 --- a/test/fixtures-no-preserve/scope.css +++ /dev/null @@ -1,9 +0,0 @@ -.foo .bar { - color: green; -} - -.foo { - color: orange; - critical-selector: scope; - critical-filename: scope.critical.actual.css; -} diff --git a/test/fixtures-no-preserve/scope.non-critical.actual.css b/test/fixtures-no-preserve/scope.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/scope.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/scope.non-critical.expected.css b/test/fixtures-no-preserve/scope.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-no-preserve/this.non-critical.actual.css b/test/fixtures-no-preserve/this.non-critical.actual.css deleted file mode 100644 index 8b13789..0000000 --- a/test/fixtures-no-preserve/this.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/fixtures-no-preserve/this.non-critical.expected.css b/test/fixtures-no-preserve/this.non-critical.expected.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures-output-dest/custom.css b/test/fixtures-output-dest/custom.css deleted file mode 100644 index 24dc7a1..0000000 --- a/test/fixtures-output-dest/custom.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} \ No newline at end of file diff --git a/test/fixtures-output-dest/custom.non-critical.actual.css b/test/fixtures-output-dest/custom.non-critical.actual.css deleted file mode 100644 index 24dc7a1..0000000 --- a/test/fixtures-output-dest/custom.non-critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} \ No newline at end of file diff --git a/test/fixtures-output-dest/default.css b/test/fixtures-output-dest/default.css deleted file mode 100644 index a755513..0000000 --- a/test/fixtures-output-dest/default.css +++ /dev/null @@ -1,8 +0,0 @@ -@critical; - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-output-dest/default.non-critical.actual.css b/test/fixtures-output-dest/default.non-critical.actual.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures-output-dest/default.non-critical.actual.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-output-dest/default.non-critical.expected.css b/test/fixtures-output-dest/default.non-critical.expected.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures-output-dest/default.non-critical.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-output-path/critical.css b/test/fixtures-output-path/critical.css deleted file mode 100644 index 24dc7a1..0000000 --- a/test/fixtures-output-path/critical.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} \ No newline at end of file diff --git a/test/fixtures-output-path/default.critical.expected.css b/test/fixtures-output-path/default.critical.expected.css deleted file mode 100644 index 51c6065..0000000 --- a/test/fixtures-output-path/default.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} diff --git a/test/fixtures-output-path/default.css b/test/fixtures-output-path/default.css deleted file mode 100644 index a755513..0000000 --- a/test/fixtures-output-path/default.css +++ /dev/null @@ -1,8 +0,0 @@ -@critical; - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-output-path/default.non-critical.actual.css b/test/fixtures-output-path/default.non-critical.actual.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures-output-path/default.non-critical.actual.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-output-path/default.non-critical.expected.css b/test/fixtures-output-path/default.non-critical.expected.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures-output-path/default.non-critical.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures/atRule-wrapping.critical.actual.css b/test/fixtures/atRule-wrapping.critical.actual.css deleted file mode 100644 index 5baa7fc..0000000 --- a/test/fixtures/atRule-wrapping.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -.bar{color:tomato;height:200px} \ No newline at end of file diff --git a/test/fixtures/atRule-wrapping.critical.expected.css b/test/fixtures/atRule-wrapping.critical.expected.css deleted file mode 100644 index 17c0170..0000000 --- a/test/fixtures/atRule-wrapping.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.bar{color:tomato;height:200px} diff --git a/test/fixtures/atRule.critical.actual.css b/test/fixtures/atRule.critical.actual.css deleted file mode 100644 index ef3a245..0000000 --- a/test/fixtures/atRule.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -.foo{display:flex;width:calc(100% - 200px)}.bar{border:10px solid gold;height:100%} \ No newline at end of file diff --git a/test/fixtures/atRule.expected.css b/test/fixtures/atRule.expected.css deleted file mode 100644 index 8a820d7..0000000 --- a/test/fixtures/atRule.expected.css +++ /dev/null @@ -1 +0,0 @@ -.foo{display:flex;width:calc(100% - 200px)}.bar{border:10px solid gold;height:100%} diff --git a/test/fixtures-no-preserve/atRule.critical.actual.css b/test/fixtures/atRule/standalone.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/atRule.critical.actual.css rename to test/fixtures/atRule/standalone.critical.actual.css diff --git a/test/fixtures-no-preserve/atRule.critical.expected.css b/test/fixtures/atRule/standalone.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/atRule.critical.expected.css rename to test/fixtures/atRule/standalone.critical.expected.css diff --git a/test/fixtures/atRule.css b/test/fixtures/atRule/standalone.css similarity index 72% rename from test/fixtures/atRule.css rename to test/fixtures/atRule/standalone.css index d2d84e8..dc79bd8 100644 --- a/test/fixtures/atRule.css +++ b/test/fixtures/atRule/standalone.css @@ -1,4 +1,4 @@ -@critical atRule.critical.actual.css; +@critical standalone.critical.actual.css; .foo { display: flex; diff --git a/test/fixtures/atRule.critical.expected.css b/test/fixtures/atRule/standalone.expected.css similarity index 100% rename from test/fixtures/atRule.critical.expected.css rename to test/fixtures/atRule/standalone.expected.css diff --git a/test/fixtures/atRule.non-critical.actual.css b/test/fixtures/atRule/standalone.non-critical.actual.css similarity index 100% rename from test/fixtures/atRule.non-critical.actual.css rename to test/fixtures/atRule/standalone.non-critical.actual.css diff --git a/test/fixtures/atRule.non-critical.expected.css b/test/fixtures/atRule/standalone.non-critical.expected.css similarity index 100% rename from test/fixtures/atRule.non-critical.expected.css rename to test/fixtures/atRule/standalone.non-critical.expected.css diff --git a/test/fixtures-no-preserve/atRule-wrapping.critical.actual.css b/test/fixtures/atRule/wrapping.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/atRule-wrapping.critical.actual.css rename to test/fixtures/atRule/wrapping.critical.actual.css diff --git a/test/fixtures-no-preserve/atRule-wrapping.critical.expected.css b/test/fixtures/atRule/wrapping.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/atRule-wrapping.critical.expected.css rename to test/fixtures/atRule/wrapping.critical.expected.css diff --git a/test/fixtures/atRule-wrapping.css b/test/fixtures/atRule/wrapping.css similarity index 66% rename from test/fixtures/atRule-wrapping.css rename to test/fixtures/atRule/wrapping.css index 324b359..b7c9f00 100644 --- a/test/fixtures/atRule-wrapping.css +++ b/test/fixtures/atRule/wrapping.css @@ -3,7 +3,7 @@ height: 100px; } -@critical atRule-wrapping.critical.actual.css { +@critical wrapping.critical.actual.css { .bar { color: tomato; height: 200px; diff --git a/test/fixtures/atRule-wrapping.non-critical.actual.css b/test/fixtures/atRule/wrapping.non-critical.actual.css similarity index 100% rename from test/fixtures/atRule-wrapping.non-critical.actual.css rename to test/fixtures/atRule/wrapping.non-critical.actual.css diff --git a/test/fixtures/atRule-wrapping.non-critical.expected.css b/test/fixtures/atRule/wrapping.non-critical.expected.css similarity index 100% rename from test/fixtures/atRule-wrapping.non-critical.expected.css rename to test/fixtures/atRule/wrapping.non-critical.expected.css diff --git a/test/fixtures/critical.css b/test/fixtures/critical.css deleted file mode 100644 index 24dc7a1..0000000 --- a/test/fixtures/critical.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} \ No newline at end of file diff --git a/test/fixtures/default.critical.expected.css b/test/fixtures/default.critical.expected.css deleted file mode 100644 index 51c6065..0000000 --- a/test/fixtures/default.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.default{color:orange;float:left;margin-right:1em;width:100%} diff --git a/test/fixtures/default.css b/test/fixtures/default.css deleted file mode 100644 index a755513..0000000 --- a/test/fixtures/default.css +++ /dev/null @@ -1,8 +0,0 @@ -@critical; - -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures/default.non-critical.actual.css b/test/fixtures/default.non-critical.actual.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures/default.non-critical.actual.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures/default.non-critical.expected.css b/test/fixtures/default.non-critical.expected.css deleted file mode 100644 index 351a862..0000000 --- a/test/fixtures/default.non-critical.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -.default { - color: orange; - float: left; - margin-right: 1em; - width: 100%; -} diff --git a/test/fixtures-no-preserve/critical.css b/test/fixtures/default/critical.css similarity index 100% rename from test/fixtures-no-preserve/critical.css rename to test/fixtures/default/critical.css diff --git a/test/fixtures-output-dest/default.critical.expected.css b/test/fixtures/default/default.critical.expected.css similarity index 100% rename from test/fixtures-output-dest/default.critical.expected.css rename to test/fixtures/default/default.critical.expected.css diff --git a/test/fixtures-no-minify/default.css b/test/fixtures/default/default.css similarity index 100% rename from test/fixtures-no-minify/default.css rename to test/fixtures/default/default.css diff --git a/test/fixtures-no-minify/default.non-critical.actual.css b/test/fixtures/default/default.non-critical.actual.css similarity index 100% rename from test/fixtures-no-minify/default.non-critical.actual.css rename to test/fixtures/default/default.non-critical.actual.css diff --git a/test/fixtures-no-minify/default.non-critical.expected.css b/test/fixtures/default/default.non-critical.expected.css similarity index 100% rename from test/fixtures-no-minify/default.non-critical.expected.css rename to test/fixtures/default/default.non-critical.expected.css diff --git a/test/fixtures/media-scope.critical.actual.css b/test/fixtures/media-scope.critical.actual.css deleted file mode 100644 index 76b1947..0000000 --- a/test/fixtures/media-scope.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -header.top{background:red}@media screen and (max-width:400px){header.top{width:100%}} \ No newline at end of file diff --git a/test/fixtures/media-scope.critical.expected.css b/test/fixtures/media-scope.critical.expected.css deleted file mode 100644 index 34f7882..0000000 --- a/test/fixtures/media-scope.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -header.top{background:red}@media screen and (max-width:400px){header.top{width:100%}} diff --git a/test/fixtures/media-this.critical.actual.css b/test/fixtures/media-this.critical.actual.css deleted file mode 100644 index 2771cea..0000000 --- a/test/fixtures/media-this.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -@media screen and (min-width:1024px){.foo{display:flex;width:calc(100% - 200px)}} \ No newline at end of file diff --git a/test/fixtures/media-this.critical.expected.css b/test/fixtures/media-this.critical.expected.css deleted file mode 100644 index cb80f92..0000000 --- a/test/fixtures/media-this.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -@media screen and (min-width:1024px){.foo{display:flex;width:calc(100% - 200px)}} diff --git a/test/fixtures/media.critical.actual.css b/test/fixtures/media.critical.actual.css deleted file mode 100644 index 2e15cc8..0000000 --- a/test/fixtures/media.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -@media (min-width:700px){.foo{color:red;width:100%}} \ No newline at end of file diff --git a/test/fixtures/media.critical.expected.css b/test/fixtures/media.critical.expected.css deleted file mode 100644 index 3eec687..0000000 --- a/test/fixtures/media.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -@media (min-width:700px){.foo{color:red;width:100%}} diff --git a/test/fixtures/media.css b/test/fixtures/media.css deleted file mode 100644 index 4980df2..0000000 --- a/test/fixtures/media.css +++ /dev/null @@ -1,8 +0,0 @@ -@media (min-width: 700px) { - .foo { - color: red; - critical-selector: this; - width: 100%; - critical-filename: 'media.critical.actual.css'; - } -} diff --git a/test/fixtures/options/minify-false.critical.actual.css b/test/fixtures/options/minify-false.critical.actual.css new file mode 100644 index 0000000..30ab5f4 --- /dev/null +++ b/test/fixtures/options/minify-false.critical.actual.css @@ -0,0 +1 @@ +.test-minify{color:blue;font-style:italic} \ No newline at end of file diff --git a/test/fixtures/options/minify-false.critical.expected.css b/test/fixtures/options/minify-false.critical.expected.css new file mode 100644 index 0000000..60f6306 --- /dev/null +++ b/test/fixtures/options/minify-false.critical.expected.css @@ -0,0 +1,4 @@ +.test-minify { + color: blue; + font-style: italic; +} diff --git a/test/fixtures/options/minify-false.css b/test/fixtures/options/minify-false.css new file mode 100644 index 0000000..1c5e6b0 --- /dev/null +++ b/test/fixtures/options/minify-false.css @@ -0,0 +1,6 @@ +.test-minify { + color: blue; + critical-selector: this; + critical-filename: minify-false.critical.actual.css; + font-style: italic; +} diff --git a/test/fixtures/options/minify-false.non-critical.actual.css b/test/fixtures/options/minify-false.non-critical.actual.css new file mode 100644 index 0000000..60f6306 --- /dev/null +++ b/test/fixtures/options/minify-false.non-critical.actual.css @@ -0,0 +1,4 @@ +.test-minify { + color: blue; + font-style: italic; +} diff --git a/test/fixtures/options/output-dest.critical.expected.css b/test/fixtures/options/output-dest.critical.expected.css new file mode 100644 index 0000000..acfe5c9 --- /dev/null +++ b/test/fixtures/options/output-dest.critical.expected.css @@ -0,0 +1 @@ +.test-output-dest{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/options/output-dest.css b/test/fixtures/options/output-dest.css new file mode 100644 index 0000000..5e2ed8c --- /dev/null +++ b/test/fixtures/options/output-dest.css @@ -0,0 +1,5 @@ +.test-output-dest { + color: blue; + critical-selector: this; + font-family: Times; +} \ No newline at end of file diff --git a/test/fixtures/options/output-dest.non-critical.actual.css b/test/fixtures/options/output-dest.non-critical.actual.css new file mode 100644 index 0000000..3b10b3a --- /dev/null +++ b/test/fixtures/options/output-dest.non-critical.actual.css @@ -0,0 +1,4 @@ +.test-output-dest { + color: blue; + font-family: Times; +} \ No newline at end of file diff --git a/test/fixtures/options/output-path.critical.actual.css b/test/fixtures/options/output-path.critical.actual.css new file mode 100644 index 0000000..5123843 --- /dev/null +++ b/test/fixtures/options/output-path.critical.actual.css @@ -0,0 +1 @@ +.test-output-path{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/options/output-path.css b/test/fixtures/options/output-path.css new file mode 100644 index 0000000..af3037b --- /dev/null +++ b/test/fixtures/options/output-path.css @@ -0,0 +1,6 @@ +.test-output-path { + color: blue; + critical-selector: this; + critical-filename: output-path.critical.actual.css; + font-family: Times; +} diff --git a/test/fixtures/options/output-path.non-critical.actual.css b/test/fixtures/options/output-path.non-critical.actual.css new file mode 100644 index 0000000..14a55bd --- /dev/null +++ b/test/fixtures/options/output-path.non-critical.actual.css @@ -0,0 +1,4 @@ +.test-output-path { + color: blue; + font-family: Times; +} diff --git a/test/fixtures/options/outputPath/output-path.critical.actual.css b/test/fixtures/options/outputPath/output-path.critical.actual.css new file mode 100644 index 0000000..5123843 --- /dev/null +++ b/test/fixtures/options/outputPath/output-path.critical.actual.css @@ -0,0 +1 @@ +.test-output-path{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/options/outputPath/output-path.critical.expected.css b/test/fixtures/options/outputPath/output-path.critical.expected.css new file mode 100644 index 0000000..5123843 --- /dev/null +++ b/test/fixtures/options/outputPath/output-path.critical.expected.css @@ -0,0 +1 @@ +.test-output-path{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/options/preserve.critical.actual.css b/test/fixtures/options/preserve.critical.actual.css new file mode 100644 index 0000000..9342de8 --- /dev/null +++ b/test/fixtures/options/preserve.critical.actual.css @@ -0,0 +1 @@ +.another-selector{background-color:#000;color:#fff}.test-preserve{color:red;display:block} \ No newline at end of file diff --git a/test/fixtures/options/preserve.critical.expected.css b/test/fixtures/options/preserve.critical.expected.css new file mode 100644 index 0000000..9342de8 --- /dev/null +++ b/test/fixtures/options/preserve.critical.expected.css @@ -0,0 +1 @@ +.another-selector{background-color:#000;color:#fff}.test-preserve{color:red;display:block} \ No newline at end of file diff --git a/test/fixtures/options/preserve.css b/test/fixtures/options/preserve.css new file mode 100644 index 0000000..ed34a32 --- /dev/null +++ b/test/fixtures/options/preserve.css @@ -0,0 +1,18 @@ +.test-preserve { + color: red; + critical-selector: this; + critical-filename: preserve.critical.actual.css; + display: block; +} + +@critical preserve.critical.actual.css { + .another-selector { + background-color: black; + color: white; + } +} + +.this-selector-stays { + display: flex; + justify-content: center; +} diff --git a/test/fixtures/options/preserve.non-critical.actual.css b/test/fixtures/options/preserve.non-critical.actual.css new file mode 100644 index 0000000..fa087d3 --- /dev/null +++ b/test/fixtures/options/preserve.non-critical.actual.css @@ -0,0 +1,14 @@ +.test-preserve { + color: red; + display: block; +} + +.another-selector { + background-color: black; + color: white; + } + +.this-selector-stays { + display: flex; + justify-content: center; +} diff --git a/test/fixtures/options/preserve.non-critical.expected.css b/test/fixtures/options/preserve.non-critical.expected.css new file mode 100644 index 0000000..812a828 --- /dev/null +++ b/test/fixtures/options/preserve.non-critical.expected.css @@ -0,0 +1,4 @@ +.this-selector-stays { + display: flex; + justify-content: center; +} diff --git a/test/fixtures/options/test-output-dest.critical.actual.css b/test/fixtures/options/test-output-dest.critical.actual.css new file mode 100644 index 0000000..acfe5c9 --- /dev/null +++ b/test/fixtures/options/test-output-dest.critical.actual.css @@ -0,0 +1 @@ +.test-output-dest{color:blue;font-family:Times} \ No newline at end of file diff --git a/test/fixtures/scope.critical.actual.css b/test/fixtures/scope.critical.actual.css deleted file mode 100644 index 1c02631..0000000 --- a/test/fixtures/scope.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -.foo .bar{color:green}.foo{color:orange} \ No newline at end of file diff --git a/test/fixtures/scope.critical.expected.css b/test/fixtures/scope.critical.expected.css deleted file mode 100644 index bbba33b..0000000 --- a/test/fixtures/scope.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.foo .bar{color:green}.foo{color:orange} diff --git a/test/fixtures-no-preserve/scope.critical.actual.css b/test/fixtures/scope/at-root.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/scope.critical.actual.css rename to test/fixtures/scope/at-root.critical.actual.css diff --git a/test/fixtures-no-preserve/scope.critical.expected.css b/test/fixtures/scope/at-root.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/scope.critical.expected.css rename to test/fixtures/scope/at-root.critical.expected.css diff --git a/test/fixtures/scope.css b/test/fixtures/scope/at-root.css similarity index 62% rename from test/fixtures/scope.css rename to test/fixtures/scope/at-root.css index 68a87be..f51492c 100644 --- a/test/fixtures/scope.css +++ b/test/fixtures/scope/at-root.css @@ -5,5 +5,5 @@ .foo { color: orange; critical-selector: scope; - critical-filename: scope.critical.actual.css; + critical-filename: at-root.critical.actual.css; } diff --git a/test/fixtures/scope.non-critical.actual.css b/test/fixtures/scope/at-root.non-critical.actual.css similarity index 100% rename from test/fixtures/scope.non-critical.actual.css rename to test/fixtures/scope/at-root.non-critical.actual.css diff --git a/test/fixtures/scope.non-critical.expected.css b/test/fixtures/scope/at-root.non-critical.expected.css similarity index 100% rename from test/fixtures/scope.non-critical.expected.css rename to test/fixtures/scope/at-root.non-critical.expected.css diff --git a/test/fixtures-no-preserve/media-scope.critical.actual.css b/test/fixtures/scope/media.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/media-scope.critical.actual.css rename to test/fixtures/scope/media.critical.actual.css diff --git a/test/fixtures-no-preserve/media-scope.critical.expected.css b/test/fixtures/scope/media.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/media-scope.critical.expected.css rename to test/fixtures/scope/media.critical.expected.css diff --git a/test/fixtures/media-scope.css b/test/fixtures/scope/media.css similarity index 72% rename from test/fixtures/media-scope.css rename to test/fixtures/scope/media.css index 103afd9..099cb9c 100644 --- a/test/fixtures/media-scope.css +++ b/test/fixtures/scope/media.css @@ -1,5 +1,5 @@ header.top { - critical-filename: media-scope.critical.actual.css; + critical-filename: media.critical.actual.css; critical-selector: scope; background: red; } diff --git a/test/fixtures/media-scope.non-critical.actual.css b/test/fixtures/scope/media.non-critical.actual.css similarity index 100% rename from test/fixtures/media-scope.non-critical.actual.css rename to test/fixtures/scope/media.non-critical.actual.css diff --git a/test/fixtures/media-scope.non-critical.expected.css b/test/fixtures/scope/media.non-critical.expected.css similarity index 100% rename from test/fixtures/media-scope.non-critical.expected.css rename to test/fixtures/scope/media.non-critical.expected.css diff --git a/test/fixtures/this.critical.actual.css b/test/fixtures/this.critical.actual.css deleted file mode 100644 index d0f08b0..0000000 --- a/test/fixtures/this.critical.actual.css +++ /dev/null @@ -1 +0,0 @@ -.foo{color:red;width:100%} \ No newline at end of file diff --git a/test/fixtures/this.critical.expected.css b/test/fixtures/this.critical.expected.css deleted file mode 100644 index 16e95c1..0000000 --- a/test/fixtures/this.critical.expected.css +++ /dev/null @@ -1 +0,0 @@ -.foo{color:red;width:100%} diff --git a/test/fixtures/this.css b/test/fixtures/this.css deleted file mode 100644 index 8193c4a..0000000 --- a/test/fixtures/this.css +++ /dev/null @@ -1,6 +0,0 @@ -.foo { - color: red; - critical-selector: this; - width: 100%; - critical-filename: 'this.critical.actual.css'; -} diff --git a/test/fixtures-no-preserve/this.critical.actual.css b/test/fixtures/this/at-root.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/this.critical.actual.css rename to test/fixtures/this/at-root.critical.actual.css diff --git a/test/fixtures-no-preserve/this.critical.expected.css b/test/fixtures/this/at-root.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/this.critical.expected.css rename to test/fixtures/this/at-root.critical.expected.css diff --git a/test/fixtures-no-preserve/this.css b/test/fixtures/this/at-root.css similarity index 55% rename from test/fixtures-no-preserve/this.css rename to test/fixtures/this/at-root.css index 8193c4a..6fc2438 100644 --- a/test/fixtures-no-preserve/this.css +++ b/test/fixtures/this/at-root.css @@ -2,5 +2,5 @@ color: red; critical-selector: this; width: 100%; - critical-filename: 'this.critical.actual.css'; + critical-filename: 'at-root.critical.actual.css'; } diff --git a/test/fixtures/this.non-critical.actual.css b/test/fixtures/this/at-root.non-critical.actual.css similarity index 100% rename from test/fixtures/this.non-critical.actual.css rename to test/fixtures/this/at-root.non-critical.actual.css diff --git a/test/fixtures/this.non-critical.expected.css b/test/fixtures/this/at-root.non-critical.expected.css similarity index 100% rename from test/fixtures/this.non-critical.expected.css rename to test/fixtures/this/at-root.non-critical.expected.css diff --git a/test/fixtures-no-preserve/media.critical.actual.css b/test/fixtures/this/media.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/media.critical.actual.css rename to test/fixtures/this/media.critical.actual.css diff --git a/test/fixtures-no-preserve/media.critical.expected.css b/test/fixtures/this/media.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/media.critical.expected.css rename to test/fixtures/this/media.critical.expected.css diff --git a/test/fixtures-no-preserve/media.css b/test/fixtures/this/media.css similarity index 100% rename from test/fixtures-no-preserve/media.css rename to test/fixtures/this/media.css diff --git a/test/fixtures/media.non-critical.actual.css b/test/fixtures/this/media.non-critical.actual.css similarity index 100% rename from test/fixtures/media.non-critical.actual.css rename to test/fixtures/this/media.non-critical.actual.css diff --git a/test/fixtures/media.non-critical.expected.css b/test/fixtures/this/media.non-critical.expected.css similarity index 100% rename from test/fixtures/media.non-critical.expected.css rename to test/fixtures/this/media.non-critical.expected.css diff --git a/test/fixtures-no-preserve/media-this.critical.actual.css b/test/fixtures/this/multiple.critical.actual.css similarity index 100% rename from test/fixtures-no-preserve/media-this.critical.actual.css rename to test/fixtures/this/multiple.critical.actual.css diff --git a/test/fixtures-no-preserve/media-this.critical.expected.css b/test/fixtures/this/multiple.critical.expected.css similarity index 100% rename from test/fixtures-no-preserve/media-this.critical.expected.css rename to test/fixtures/this/multiple.critical.expected.css diff --git a/test/fixtures/media-this.css b/test/fixtures/this/multiple.css similarity index 81% rename from test/fixtures/media-this.css rename to test/fixtures/this/multiple.css index a95d6ab..7a1c262 100644 --- a/test/fixtures/media-this.css +++ b/test/fixtures/this/multiple.css @@ -1,7 +1,7 @@ @media screen and (min-width: 1024px) { .foo { critical-selector: this; - critical-filename: media-this.critical.actual.css; + critical-filename: multiple.critical.actual.css; display: flex; width: calc(100% - 200px); } diff --git a/test/fixtures/media-this.non-critical.actual.css b/test/fixtures/this/multiple.non-critical.actual.css similarity index 100% rename from test/fixtures/media-this.non-critical.actual.css rename to test/fixtures/this/multiple.non-critical.actual.css diff --git a/test/fixtures/media-this.non-critical.expected.css b/test/fixtures/this/multiple.non-critical.expected.css similarity index 100% rename from test/fixtures/media-this.non-critical.expected.css rename to test/fixtures/this/multiple.non-critical.expected.css diff --git a/test/index.js b/test/index.js deleted file mode 100644 index 8251e7a..0000000 --- a/test/index.js +++ /dev/null @@ -1,156 +0,0 @@ -#!/usr/bin/env node - -const fs = require('fs') -const test = require('tape') -const chalk = require('chalk') -const cliArgs = require('minimist')(process.argv.slice(2), { - boolean: ['preserve'], - default: { preserve: true } -}) -const fixturesDir = cliArgs['fixtures-dir'] || 'fixtures' -let basePath = cliArgs.outputPath || `${process.cwd()}/test/${fixturesDir}` -if (cliArgs.noArgs) { - basePath = process.cwd() -} - -function compareCritical (t, name, testNonCritical) { - let actual = cliArgs.outputDest || 'critical.css' - const expected = testNonCritical - ? `${name}.non-critical.expected.css` - : `${name}.critical.expected.css` - if (name !== 'default' || testNonCritical) { - actual = testNonCritical - ? `${name}.non-critical.actual.css` - : `${name}.critical.actual.css` - } - console.log(`Comparing: ${expected} and ${actual}`) - t.equal( - fs.readFileSync(`${basePath}/${actual}`, 'utf8').trim(), - fs.readFileSync(`${basePath}/${expected}`, 'utf8').trim(), - `Expect ${chalk.bold(name)} should be equal to actual output` - ) - t.end() -} - -function initTests (key) { - const tests = { - default: () => { - test('Testing default critical result', t => { - compareCritical(t, 'default') - }) - - test('Testing default non-critical result', t => { - compareCritical(t, 'default', true) - }) - }, - - this: () => { - test('Testing "this" critical result', t => { - compareCritical(t, 'this') - }) - - test('Testing "this" non-critical result', t => { - compareCritical(t, 'this', true) - }) - }, - - atRule: () => { - test('Testing "atRule" critical result', t => { - compareCritical(t, 'atRule') - }) - - test('Testing "atRule" non-critical result', t => { - compareCritical(t, 'atRule', true) - }) - }, - - atRuleWrapping: () => { - test( - chalk.yellow( - `Testing ${chalk.bold('atRule.wrapping')} critical result` - ), - t => { - compareCritical(t, 'atRule-wrapping') - } - ) - - test( - chalk.yellow( - `Testing ${chalk.bold('atRule.wrapping')} non-critical result` - ), - t => { - compareCritical(t, 'atRule-wrapping', true) - } - ) - }, - - media: () => { - test('Testing "media" critical result', t => { - compareCritical(t, 'media') - }) - - test('Testing "media" non-critical result', t => { - compareCritical(t, 'media', true) - }) - }, - - scope: () => { - test( - chalk.yellow(`Testing ${chalk.bold('scope')} critical result`), - t => { - compareCritical(t, 'scope') - } - ) - - test( - chalk.yellow(`Testing ${chalk.bold('scope')} non-critical result`), - t => { - compareCritical(t, 'scope', true) - } - ) - }, - - mediaScope: () => { - test( - chalk.yellow(`Testing ${chalk.bold('media-scope')} critical result`), - t => { - compareCritical(t, 'media-scope') - } - ) - - test( - chalk.yellow( - `Testing ${chalk.bold('media-scope')} non-critical result` - ), - t => { - compareCritical(t, 'media-scope', true) - } - ) - }, - - mediaThis: () => { - test( - chalk.yellow(`Testing ${chalk.bold('media-this')} critical result`), - t => { - compareCritical(t, 'media-this') - } - ) - - test( - chalk.yellow(`Testing ${chalk.bold('media-this')} non-critical result`), - t => { - compareCritical(t, 'media-this', true) - } - ) - } - } - - if (key) { - const keys = key.split(',') - keys.forEach(k => tests[k]()) - } else { - Object.keys(tests).forEach(key => tests[key]()) - } -} - -initTests(cliArgs.test) diff --git a/test/preTest.js b/test/preTest.js index 4a118f2..4f3b7b6 100644 --- a/test/preTest.js +++ b/test/preTest.js @@ -2,89 +2,76 @@ const fs = require('fs') const { bold, red } = require('chalk') const postcssCriticalCSS = require('..') -const cliArgs = require('minimist')(process.argv.slice(2), { - boolean: ['minify', 'preserve'], - default: { minify: true, preserve: true } -}) -const fixturesDir = cliArgs['fixtures-dir'] || 'fixtures' -let basePath = cliArgs.outputPath || `${process.cwd()}/test/${fixturesDir}` -let pluginOpts = Object.assign( - {}, - { - minify: cliArgs.minify, - outputDest: cliArgs.outputDest, - outputPath: basePath, - preserve: typeof cliArgs.preserve !== 'undefined' ? cliArgs.preserve : true - } -) -if (cliArgs.noArgs) { - basePath = process.cwd() - pluginOpts = {} -} +const { normalizeOpts } = require('./utils'); +const postcss = require('postcss') + +function useFileData (data, file, opts) { + const pluginOpts = normalizeOpts(opts) -function useFileData (data, file) { - postcssCriticalCSS - .process(data, {}, pluginOpts) + postcss() + .use(postcssCriticalCSS(pluginOpts)) + .process(data, { from: file }) .catch(err => { console.error(bold.red('Error: '), err) process.exit(1) }) - .then(result => { - fs.writeFile( - `${basePath}/${file.split('.')[0]}.non-critical.actual.css`, - result.css, - 'utf8', - err => { - if (err) { - throw new Error(err) - } - } - ) + .then((result) => { + try { + fs.writeFileSync( + `${opts.outputPath}/${file.split('.')[0]}.non-critical.actual.css`, + result.css, + 'utf8' + ) + } catch(err) { + throw new Error(err) + } }) } -function deleteOldFixtures (files) { - let totalProcessed = 0 - files.forEach(file => { - if (file.indexOf('.actual') !== -1 || file === 'critical.css') { - fs.unlink(`${basePath}/${file}`, err => { - if (err) { - throw new Error(err) - } - totalProcessed++ - writeNewFixtures(totalProcessed, files) - }) - } else { - totalProcessed++ - writeNewFixtures(totalProcessed, files) +function deleteOldFixtures (files, filter, opts) { + files.forEach((file) => { + if ( + (file.includes('.actual') && file.includes(filter)) || + file === 'critical.css' + ) { + try { + fs.unlinkSync(`${opts.outputPath}/${file}`) + } catch(err) { + throw new Error(err) + } } }) } -function writeNewFixtures (totalProcessed, files) { - if (totalProcessed !== files.length) { - return - } - files.forEach(file => { +function writeNewFixtures (files, name, opts) { + files.forEach((file) => { if ( - file.indexOf('.css') !== -1 && - file.indexOf('.expected') === -1 && - file.indexOf('.actual') === -1 && + file.includes('.css') && + ! file.includes('.expected') && + ! file.includes('.actual') && file !== 'critical.css' ) { - fs.readFile(`${basePath}/${file}`, 'utf8', (err, data) => { - if (err) { - throw new Error(err) - } - useFileData(data, file) - }) + try { + const data = fs.readFileSync(`${opts.outputPath}/${file}`, 'utf8') + useFileData(data, file, opts) + } catch(err) { + throw new Error(err) + } } }) } -fs.readdir(basePath, 'utf8', (err, files) => { - if (err) { +module.exports = function preTest(name, opts) { + opts.outputPath = opts.outputPath || `${process.cwd()}/test/fixtures/${name}` + if (opts.noArgs) { + opts.outputPath = process.cwd() + } + + try { + const files = fs.readdirSync(opts.outputPath, 'utf8') + deleteOldFixtures(files, name, opts) + writeNewFixtures(files, name, opts) + } catch(err) { throw new Error(err) } - deleteOldFixtures(files) -}) +} diff --git a/test/scope.spec.js b/test/scope.spec.js new file mode 100644 index 0000000..d9dc5a9 --- /dev/null +++ b/test/scope.spec.js @@ -0,0 +1,29 @@ +const compareCritical = require('./compareCritical'); +const { fsTimeout, normalizeOpts } = require('./utils'); +const preTest = require('./preTest'); + +const opts = normalizeOpts(); +beforeAll(async () => { + preTest('scope', opts); + await fsTimeout(); +}); + +describe('tests for `critical-selector: scope`', () => { + it('should move selectors containing `critical-selector: scope` and their children to critical css', () => { + compareCritical(opts, 'at-root') + }) + + it('should remove critical-selector declaration from non-critical css', () => { + compareCritical(opts, 'at-root', true) + }) +}) + +describe('tests for selector containing `critical-selector: scope` nested under @media at-rule', () => { + it('should move selectors containing `critical-selector: scope` and their children to critical css, maintaing @media at-rule', () => { + compareCritical(opts, 'media') + }) + + it('should remove critical-selector declaration from non-critical css', () => { + compareCritical(opts, 'media', true) + }) +}) diff --git a/test/this.spec.js b/test/this.spec.js new file mode 100644 index 0000000..3ca1f22 --- /dev/null +++ b/test/this.spec.js @@ -0,0 +1,39 @@ +const compareCritical = require('./compareCritical'); +const { fsTimeout, normalizeOpts } = require('./utils'); +const preTest = require('./preTest'); + +const opts = normalizeOpts(); +beforeAll(async () => { + preTest('this', opts); + await fsTimeout(); +}); + +describe('tests for `critical-selector: this`', () => { + it('should move selector to critical css if `critical-selector: this` is declared', () => { + compareCritical(opts, 'at-root') + }) + + it('should remove critical-selector declarations from non-critical css and leave it otherwise unmodified', () => { + compareCritical(opts, 'at-root', true) + }) +}) + +describe('tests for a selector containing `critical-selector: this` within a @media at-rule', () => { + it('should move a selector within a media at-rule into critical css, maintaing @media at-rule', () => { + compareCritical(opts, 'media') + }) + + it('should remove critical declarations from non-critical css', () => { + compareCritical(opts, 'media', true) + }) +}) + +describe('tests for a selector containing `critical-selector: this`, adjacent to multiple other selectors, within a @media at-rule', () => { + it('should move only the selector contianing `critical-selector: this` to critical CSS, maintaing @media at-rule', () => { + compareCritical(opts, 'multiple') + }) + + it('should remove critical declarations from non-critical css', () => { + compareCritical(opts, 'multiple', true) + }) +}) diff --git a/test/utils.js b/test/utils.js new file mode 100644 index 0000000..221e26c --- /dev/null +++ b/test/utils.js @@ -0,0 +1,16 @@ +module.exports.normalizeOpts = (opts = {}) => { + if (opts.noArgs) { + return {}; + } + + return Object.assign({ + minify: true, + preserve: typeof opts.preserve !== 'undefined' ? opts.preserve : true + }, opts); +} + +module.exports.fsTimeout = async () => { + return new Promise( + resolve => setTimeout(resolve, 250) + ) +}