From 44c0cd38dd48fe2d995bf75252f4893c672e56ad Mon Sep 17 00:00:00 2001 From: bezoerb Date: Wed, 19 Dec 2018 22:32:55 +0100 Subject: [PATCH] feature: compare/check already inlined styles --- index.js | 66 +++-- package-lock.json | 288 +++++++++++++++---- package.json | 2 + test/expected/cartoon-absolute-expected.html | 70 ++--- test/expected/cartoon-expected.html | 70 ++--- test/expected/external-expected.html | 62 ++-- test/expected/external-extract-expected.html | 70 ++--- test/expected/external-ignore-expected.html | 62 ++-- test/expected/index-inlined-absolute.html | 62 ++-- test/expected/index-inlined-async-final.html | 62 ++-- test/expected/index-inlined.html | 104 +++++++ test/fixtures/index-inlined.html | 99 +++++++ test/index.test.js | 23 +- yarn.lock | 24 ++ 14 files changed, 706 insertions(+), 358 deletions(-) create mode 100644 test/expected/index-inlined.html create mode 100644 test/fixtures/index-inlined.html diff --git a/index.js b/index.js index 75bcb76..60ca4f8 100644 --- a/index.js +++ b/index.js @@ -23,6 +23,7 @@ const slash = require('slash'); const normalizeNewline = require('normalize-newline'); const resolve = require('resolve'); const detectIndent = require('detect-indent'); +const prettier = require('prettier'); /** * Get loadcss + cssrelpreload script @@ -81,11 +82,13 @@ function minifyCSS(styles) { return new CleanCSS().minify(styles).styles; // eslint-disable-line prefer-destructuring } -function extract(css, critical, minify = false) { - if (minify) { - css = minifyCSS(css); - critical = minifyCSS(critical); - } +function prettifyCSS(styles) { + return prettier.format(styles, {parser: 'css'}); +} + +function extract(css, critical) { + css = minifyCSS(css); + critical = minifyCSS(critical); return normalizeNewline(postcss(discard({css: critical})).process(css).css); } @@ -120,16 +123,6 @@ function inline(html, styles, options) { html = String(html); } - const $ = cheerio.load(html, { - decodeEntities: false, - }); - - const allLinks = $('link[rel="stylesheet"], link[rel="preload"][as="style"]').filter(function() { - return !$(this).parents('noscript').length; - }); - - let links = allLinks.filter('[rel="stylesheet"]'); - const o = _.assign( { minify: true, @@ -137,6 +130,29 @@ function inline(html, styles, options) { options || {} ); + const $ = cheerio.load(html, { + decodeEntities: false, + }); + + // Fetch styles already inlined + const inlineStyles = $('head style') + .map((i, el) => $(el).html()) + .get() + .join('\n'); + + // Only missing styles + let missing = extract(styles, inlineStyles); + if (!o.minify) { + missing = prettifyCSS(missing); + } + + const inlined = `${inlineStyles}\n${missing}`; + const allLinks = $('link[rel="stylesheet"], link[rel="preload"][as="style"]').filter(function() { + return !$(this).parents('noscript').length; + }); + + let links = allLinks.filter('[rel="stylesheet"]'); + const target = o.selector || allLinks.get(0) || $('head script').get(0); const {indent} = detectIndent(html); const targetIndent = getIndent(html, target); @@ -157,15 +173,14 @@ function inline(html, styles, options) { }); } - // Minify if minify option is set - if (o.minify) { - styles = minifyCSS(styles); - } - - if (styles) { + if (missing) { const elements = [ '', '', ] @@ -196,7 +211,12 @@ function inline(html, styles, options) { const file = path.resolve(path.join(o.basePath, href)); if (fs.existsSync(file)) { const orig = fs.readFileSync(file); - const diff = extract(orig, styles, o.minify); + let diff = extract(orig, inlined); + + if (!o.minify) { + diff = prettifyCSS(diff); + } + const filename = reaver.rev(file, diff); fs.writeFileSync(filename, diff); diff --git a/package-lock.json b/package-lock.json index 5a44456..7a4bdc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -256,7 +256,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -1038,29 +1037,6 @@ "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", "dev": true }, - "cave": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cave/-/cave-2.0.0.tgz", - "integrity": "sha1-DFd66oWSgBXQKgK2GIgG2VvrJiY=", - "requires": { - "css": "^2.1.0", - "get-stdin": "^3.0.0", - "lodash": "^2.4.1", - "minimist": "^1.1.0" - }, - "dependencies": { - "get-stdin": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-3.0.2.tgz", - "integrity": "sha1-wc7SS5A5s43thb3xYeV3E7bdSr4=" - }, - "lodash": { - "version": "2.4.2", - "resolved": "http://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz", - "integrity": "sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4=" - } - } - }, "chai": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz", @@ -1079,7 +1055,6 @@ "version": "2.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -1225,7 +1200,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -1233,8 +1207,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "combined-stream": { "version": "1.0.7", @@ -1250,6 +1223,11 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==" }, + "common-tags": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz", + "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==" + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", @@ -1729,6 +1707,15 @@ "safer-buffer": "^2.1.0" } }, + "end-of-stream": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", + "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==", + "dev": true, + "requires": { + "once": "^1.4.0" + } + }, "enhance-visitors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/enhance-visitors/-/enhance-visitors-1.0.0.tgz", @@ -1753,6 +1740,7 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, "requires": { "is-arrayish": "^0.2.1" } @@ -1784,8 +1772,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.11.0", @@ -2223,13 +2210,12 @@ } }, "eslint-plugin-prettier": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz", - "integrity": "sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.0.tgz", + "integrity": "sha512-4g11opzhqq/8+AMmo5Vc2Gn7z9alZ4JqrbZ+D4i8KlSyxeQhZHlmIrY8U9Akf514MoEhogPa87Jgkq87aZ2Ohw==", "dev": true, "requires": { - "fast-diff": "^1.1.1", - "jest-docblock": "^21.0.0" + "prettier-linter-helpers": "^1.0.0" } }, "eslint-plugin-promise": { @@ -2348,18 +2334,42 @@ } }, "execa": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", - "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { - "cross-spawn": "^5.0.1", - "get-stream": "^3.0.0", + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", "is-stream": "^1.1.0", "npm-run-path": "^2.0.0", "p-finally": "^1.0.0", "signal-exit": "^3.0.0", "strip-eof": "^1.0.0" + }, + "dependencies": { + "cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "dev": true, + "requires": { + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + } + }, + "get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "dev": true, + "requires": { + "pump": "^3.0.0" + } + } } }, "exit": { @@ -2689,6 +2699,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "dev": true, "requires": { "locate-path": "^2.0.0" } @@ -3553,8 +3564,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -3785,7 +3795,8 @@ "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", + "dev": true }, "is-buffer": { "version": "1.1.6", @@ -5260,7 +5271,8 @@ "json-parse-better-errors": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", - "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==" + "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", + "dev": true }, "json-schema": { "version": "0.2.3", @@ -5380,6 +5392,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "dev": true, "requires": { "graceful-fs": "^4.1.2", "parse-json": "^4.0.0", @@ -5391,6 +5404,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "dev": true, "requires": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" @@ -5627,7 +5641,6 @@ "loud-rejection": "^1.0.0", "minimist-options": "^3.0.1", "normalize-package-data": "^2.3.4", - "read-pkg-up": "^3.0.0", "redent": "^2.0.0", "trim-newlines": "^2.0.0", "yargs-parser": "^10.0.0" @@ -7273,6 +7286,23 @@ "execa": "^0.7.0", "lcid": "^1.0.0", "mem": "^1.1.0" + }, + "dependencies": { + "execa": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "dev": true, + "requires": { + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + } + } } }, "os-tmpdir": { @@ -7291,6 +7321,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", + "dev": true, "requires": { "p-try": "^1.0.0" } @@ -7299,6 +7330,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", + "dev": true, "requires": { "p-limit": "^1.1.0" } @@ -7306,7 +7338,8 @@ "p-try": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", + "dev": true }, "package-json": { "version": "4.0.1", @@ -7353,6 +7386,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "dev": true, "requires": { "error-ex": "^1.3.1", "json-parse-better-errors": "^1.0.1" @@ -7379,7 +7413,8 @@ "path-exists": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", + "dev": true }, "path-is-absolute": { "version": "1.0.1", @@ -7408,6 +7443,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", + "dev": true, "requires": { "pify": "^3.0.0" } @@ -7427,7 +7463,8 @@ "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true }, "pinkie": { "version": "2.0.4", @@ -7520,6 +7557,37 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, + "postcss": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.7.tgz", + "integrity": "sha512-HThWSJEPkupqew2fnuQMEI2YcTj/8gMV3n80cMdJsKxfIh5tHf7nM5JigNX6LxVMqo6zkgQNAI88hyFvBk41Pg==", + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.5.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss-discard": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/postcss-discard/-/postcss-discard-0.3.0.tgz", + "integrity": "sha512-nqxrNxXl0VY1hLscuFl7NmZV6m4fCBRICfAW42zBe0uzUryLnE3G7X3eymZNyGNpET68qAM0+lvZ//ORIdraww==", + "requires": { + "clean-css": "^4.2.1", + "common-tags": "^1.7.2", + "lodash": "^4.17.11", + "postcss": "^7.0.6" + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -7539,10 +7607,18 @@ "dev": true }, "prettier": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.2.tgz", - "integrity": "sha512-YgPLFFA0CdKL4Eg2IHtUSjzj/BWgszDHiNQAe0VAIBse34148whfdzLagRL+QiKS+YfK5ftB6X4v/MBw8yCoug==", - "dev": true + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.3.tgz", + "integrity": "sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==" + }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } }, "pretty-format": { "version": "23.6.0", @@ -7608,6 +7684,16 @@ "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==", "dev": true }, + "pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -7681,6 +7767,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "dev": true, "requires": { "load-json-file": "^4.0.0", "normalize-package-data": "^2.3.2", @@ -7688,12 +7775,58 @@ } }, "read-pkg-up": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz", - "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz", + "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==", + "dev": true, "requires": { - "find-up": "^2.0.0", + "find-up": "^3.0.0", "read-pkg": "^3.0.0" + }, + "dependencies": { + "find-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", + "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "dev": true, + "requires": { + "locate-path": "^3.0.0" + } + }, + "locate-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", + "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "dev": true, + "requires": { + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" + } + }, + "p-limit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz", + "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", + "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "dev": true, + "requires": { + "p-limit": "^2.0.0" + } + }, + "p-try": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz", + "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==", + "dev": true + } } }, "readable-stream": { @@ -8425,7 +8558,8 @@ "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=" + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "dev": true }, "strip-eof": { "version": "1.0.0", @@ -8448,7 +8582,6 @@ "version": "5.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -8511,6 +8644,23 @@ "dev": true, "requires": { "execa": "^0.7.0" + }, + "dependencies": { + "execa": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "dev": true, + "requires": { + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + } + } } }, "test-exclude": { @@ -9341,6 +9491,18 @@ "slash": "^2.0.0", "update-notifier": "^2.3.0", "xo-init": "^0.7.0" + }, + "dependencies": { + "eslint-plugin-prettier": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz", + "integrity": "sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==", + "dev": true, + "requires": { + "fast-diff": "^1.1.1", + "jest-docblock": "^21.0.0" + } + } } }, "xo-init": { @@ -9373,6 +9535,16 @@ "signal-exit": "^3.0.0", "strip-eof": "^1.0.0" } + }, + "read-pkg-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz", + "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", + "dev": true, + "requires": { + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" + } } } }, diff --git a/package.json b/package.json index e0db9a5..2aa2c75 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "normalize-newline": "3.0.0", "postcss": "^7.0.7", "postcss-discard": "^0.3.0", + "prettier": "^1.15.3", "reaver": "2.0.0", "resolve": "^1.8.1", "slash": "^2.0.0", @@ -51,6 +52,7 @@ "chai": "^4.0.2", "concat-stream": "^1.6.2", "coveralls": "^3.0.2", + "eslint-plugin-prettier": "^3.0.0", "execa": "^1.0.0", "jest": "^23.6.0", "mocha": "^5.2.0", diff --git a/test/expected/cartoon-absolute-expected.html b/test/expected/cartoon-absolute-expected.html index 14b1ac4..54a6615 100644 --- a/test/expected/cartoon-absolute-expected.html +++ b/test/expected/cartoon-absolute-expected.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,29 +258,29 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { float: right !important; } - - - - + + + + diff --git a/test/expected/cartoon-expected.html b/test/expected/cartoon-expected.html index d57e117..7b756e4 100644 --- a/test/expected/cartoon-expected.html +++ b/test/expected/cartoon-expected.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,29 +258,29 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { float: right !important; } - - - - + + + + diff --git a/test/expected/external-expected.html b/test/expected/external-expected.html index 9af486e..3b4be53 100644 --- a/test/expected/external-expected.html +++ b/test/expected/external-expected.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,19 +258,19 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { diff --git a/test/expected/external-extract-expected.html b/test/expected/external-extract-expected.html index 7adaf0d..9dc3732 100644 --- a/test/expected/external-extract-expected.html +++ b/test/expected/external-extract-expected.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,29 +258,29 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { float: right !important; } - - - - + + + + diff --git a/test/expected/external-ignore-expected.html b/test/expected/external-ignore-expected.html index d6b4569..63a7298 100644 --- a/test/expected/external-ignore-expected.html +++ b/test/expected/external-ignore-expected.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,19 +258,19 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { diff --git a/test/expected/index-inlined-absolute.html b/test/expected/index-inlined-absolute.html index db6be03..6223500 100644 --- a/test/expected/index-inlined-absolute.html +++ b/test/expected/index-inlined-absolute.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,19 +258,19 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { diff --git a/test/expected/index-inlined-async-final.html b/test/expected/index-inlined-async-final.html index 384ac28..c346ca6 100644 --- a/test/expected/index-inlined-async-final.html +++ b/test/expected/index-inlined-async-final.html @@ -13,52 +13,42 @@ padding-top: 20px; padding-bottom: 20px; } - - .header{ + .header { padding-left: 15px; padding-right: 15px; } - .header { border-bottom: 1px solid #e5e5e5; } - .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; padding-bottom: 19px; } - .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } - .jumbotron .btn { font-size: 21px; padding: 14px 24px; } - @media screen and (min-width: 768px) { .container { max-width: 730px; } - - .header{ + .header { padding-left: 0; padding-right: 0; } - .header { margin-bottom: 30px; } - .jumbotron { border-bottom: 0; } } - html { font-family: sans-serif; -webkit-text-size-adjust: 100%; @@ -68,20 +58,20 @@ margin: 0; } a { - background: transparent; + background: 0 0; } h1 { - margin: .67em 0; + margin: 0.67em 0; font-size: 2em; } @media print { * { color: #000 !important; text-shadow: none !important; - background: transparent !important; + background: 0 0 !important; box-shadow: none !important; } - a{ + a { text-decoration: underline; } a[href]:after { @@ -90,8 +80,8 @@ a[href^="#"]:after { content: ""; } - p, - h3 { + h3, + p { orphans: 3; widows: 3; } @@ -104,16 +94,15 @@ -moz-box-sizing: border-box; box-sizing: border-box; } - *:before, - *:after { + :after, + :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -127,21 +116,21 @@ text-decoration: none; } h1, - h3{ + h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1, - h3{ + h3 { margin-top: 20px; margin-bottom: 10px; } - h1{ + h1 { font-size: 36px; } - h3{ + h3 { font-size: 24px; } p { @@ -161,7 +150,7 @@ .text-muted { color: #999; } - ul{ + ul { margin-top: 0; margin-bottom: 10px; } @@ -191,7 +180,7 @@ padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: normal; + font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; @@ -210,13 +199,12 @@ background-color: #5cb85c; border-color: #4cae4c; } - .btn-lg{ + .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } - .nav { padding-left: 0; margin-bottom: 0; @@ -240,7 +228,7 @@ .nav-pills > li + li { margin-left: 2px; } - .nav-pills > li.active > a{ + .nav-pills > li.active > a { color: #fff; background-color: #428bca; } @@ -250,7 +238,7 @@ color: inherit; background-color: #eee; } - .jumbotron h1{ + .jumbotron h1 { color: inherit; } .jumbotron p { @@ -270,19 +258,19 @@ padding-right: 60px; padding-left: 60px; } - .jumbotron h1{ + .jumbotron h1 { font-size: 63px; } } - .container:before, .container:after, - .nav:before, - .nav:after{ + .container:before, + .nav:after, + .nav:before { display: table; content: " "; } .container:after, - .nav:after{ + .nav:after { clear: both; } .pull-right { diff --git a/test/expected/index-inlined.html b/test/expected/index-inlined.html new file mode 100644 index 0000000..336f412 --- /dev/null +++ b/test/expected/index-inlined.html @@ -0,0 +1,104 @@ + + + + + critical css test + + + + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+ +

Always a pleasure scaffolding your apps.

+ +

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+ +

+ HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or + sites. +

+ +

Bootstrap

+ +

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +

♥ from the Yeoman team

+
+ + diff --git a/test/fixtures/index-inlined.html b/test/fixtures/index-inlined.html new file mode 100644 index 0000000..e3d4794 --- /dev/null +++ b/test/fixtures/index-inlined.html @@ -0,0 +1,99 @@ + + + + + critical css test + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+ +

Always a pleasure scaffolding your apps.

+ +

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+ +

+ HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or + sites. +

+ +

Bootstrap

+ +

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +

♥ from the Yeoman team

+
+ + diff --git a/test/index.test.js b/test/index.test.js index 1d278f4..b28822a 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -5,6 +5,7 @@ const postcss = require('postcss'); const discard = require('postcss-discard'); const normalizeNewline = require('normalize-newline'); const CleanCSS = require('clean-css'); +const prettier = require('prettier'); const inline = require('..'); const {read, checkAndDelete, strip} = require('./helper'); @@ -14,11 +15,14 @@ function minifyCSS(styles) { } const extract = (css, critical, minify = false) => { + css = minifyCSS(css); + critical = minifyCSS(critical); + const result = normalizeNewline(postcss(discard({css: critical})).process(css).css); if (minify) { - css = minifyCSS(css); - critical = minifyCSS(critical); + return result; } - return normalizeNewline(postcss(discard({css: critical})).process(css).css); + + return prettier.format(result, {parser: 'css'}); }; jest.setTimeout(20000); @@ -28,7 +32,6 @@ test('Inline css', async () => { const css = await read('fixtures/critical.css'); const expected = await read('expected/index-inlined-async-final.html'); const out = inline(html, css, {minify: false}); - expect(strip(out.toString())).toBe(strip(expected)); }); @@ -170,7 +173,6 @@ test('should not keep external urls', async () => { const expected = await read('expected/external-expected.html'); const css = await read('fixtures/critical.css'); const out = inline(html, css, {minify: false}); - expect(strip2(out.toString('utf-8'))).toBe(strip2(expected)); }); @@ -194,7 +196,6 @@ test('should not extract on external urls', async () => { extract: true, basePath: 'test/fixtures', }); - expect(out.toString('utf8')).toMatch(path.basename(reved[0])); expect(out.toString('utf8')).toMatch(path.basename(reved[1])); expect(checkAndDelete(reved[0])).toBe(true); @@ -288,3 +289,13 @@ test("should skip loadcss if it's already present and used for all existing link expect(strip(out.toString('utf-8'))).toBe(strip(expected)); }); + +test('consider existing style tags', async () => { + const html = await read('fixtures/index-inlined.html'); + const css = await read('fixtures/critical.css'); + + const expected = await read('expected/index-inlined.html'); + const out = inline(html, css); + + expect(out.toString('utf-8')).toBe(expected); +}); diff --git a/yarn.lock b/yarn.lock index 6c26d5c..f00fdf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1442,6 +1442,13 @@ eslint-plugin-prettier@^2.6.0: fast-diff "^1.1.1" jest-docblock "^21.0.0" +eslint-plugin-prettier@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.0.tgz#f6b823e065f8c36529918cdb766d7a0e975ec30c" + integrity sha512-4g11opzhqq/8+AMmo5Vc2Gn7z9alZ4JqrbZ+D4i8KlSyxeQhZHlmIrY8U9Akf514MoEhogPa87Jgkq87aZ2Ohw== + dependencies: + prettier-linter-helpers "^1.0.0" + eslint-plugin-promise@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.0.1.tgz#2d074b653f35a23d1ba89d8e976a985117d1c6a2" @@ -1716,6 +1723,11 @@ fast-diff@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154" +fast-diff@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" + integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== + fast-glob@^2.0.2: version "2.2.2" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf" @@ -4188,10 +4200,22 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks= +prettier-linter-helpers@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" + integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== + dependencies: + fast-diff "^1.1.2" + prettier@^1.12.1: version "1.13.5" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.5.tgz#7ae2076998c8edce79d63834e9b7b09fead6bfd0" +prettier@^1.15.3: + version "1.15.3" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a" + integrity sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg== + pretty-format@^23.6.0: version "23.6.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"