zgreen

postcss-critical-css

var _postcss2 = _interopRequireDefault(_postcss);

var _cssnano2 = _interopRequireDefault(_cssnano);

var _fsExtra2 = _interopRequireDefault(_fsExtra);

var _path2 = _interopRequireDefault(_path);

var _getCriticalRules = require('./getCriticalRules');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

 * Append to an existing critical CSS file?

 * Clean the original root node passed to the plugin, removing custom atrules,

 * properties. Will additionally delete nodes as appropriate if

 * @param {Object} root The root PostCSS object.

 * @param {boolean} preserve Preserve identified critical CSS in the root?

  root.walkAtRules('critical', function (atRule) {

      if (atRule.nodes && atRule.nodes.length) {

        atRule.replaceWith(atRule.nodes);

  // @TODO `scope` Makes this kind of gnarly. This could be cleaned up a bit.

  root.walkDecls(/critical-(selector|filename)/, function (decl) {

          if (node.selector && node.selector.indexOf(decl.parent.selector) === 0) {

            if (node.parent && hasNoOtherChildNodes(node.parent.nodes, node)) {

      // If the wrapper has no valid child nodes, remove it entirely.

      if (wrapper && hasNoOtherChildNodes(wrapper.nodes, decl)) {

  (0, _chalk.green)('Critical CSS result is: ' + (0, _chalk.yellow)(css)));

 * @param {string} filePath Path to write file to.

 * @param {Object} result PostCSS root object.

 * @return {Promise} Resolves with writeCriticalFile or doDryRun function call.

function dryRunOrWriteFile(dryRun, filePath, result) {

  return new Promise(function (resolve) {

    return resolve(dryRun ? doDryRun(css) : writeCriticalFile(filePath, css));

 * Confirm a node has no child nodes other than a specific node.

 * @param {array} nodes Nodes array to check.

function writeCriticalFile(filePath, css) {

  _fs2.default.writeFile(filePath, css, { flag: append ? 'a' : 'w' }, function (err) {

  _fsExtra2.default.outputFile(filePath, css, { flag: append ? 'a' : 'w' }, function (err) {

 * @param {object} options Object of function args.

 * @return {function} function for PostCSS plugin.

  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var filteredOptions = Object.keys(options).reduce(function (acc, key) {

    return typeof options[key] !== 'undefined' ? _extends({}, acc, _defineProperty({}, key, options[key])) : acc;

    var criticalOutput = (0, _getCriticalRules.getCriticalRules)(css, outputDest);

    return Object.keys(criticalOutput).reduce(function (init, cur) {

      var criticalCSS = _postcss2.default.root();

      var filePath = _path2.default.join(outputPath, cur);

      criticalOutput[cur].each(function (rule) {

        return criticalCSS.append(rule.clone());

      return (0, _postcss2.default)(minify ? [_cssnano2.default] : [])

      }).then(dryRunOrWriteFile.bind(null, dryRun, filePath)).then(clean.bind(null, css, preserve));

module.exports = _postcss2.default.plugin('postcss-critical', buildCritical);

  "description": "Generate critical CSS using PostCSS",

    "url": "https://github.com/zgreen/postcss-critical-css"

    "babel-plugin-transform-flow-strip-types": "^6.8.0",

    "babel-plugin-transform-object-rest-spread": "^6.26.0",

    "build": "eslint src/** && npm run flow && babel src --out-dir lib",

    "example": "./node_modules/.bin/babel-node example/example.js",

    "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-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",

    "test-default": "npm run pretest && tape test",

    "test-no-preserve": "npm run pretest -- --fixtures-dir=fixtures-no-preserve --preserve=false && tape test --fixtures-dir=fixtures-no-preserve --preserve=false",

    "test-output-path": "npm run pretest -- --outputPath='test/fixtures-output-path' && tape test --outputPath='test/fixtures-output-path' --test=default"

import { getCriticalRules } from './getCriticalRules'

function clean (root: Object, preserve: boolean) {

  root.walkAtRules('critical', (atRule: Object) => {

  root.walkDecls(/critical-(selector|filename)/, (decl: Object) => {

            node.selector.indexOf(decl.parent.selector) === 0

    green(`Critical CSS result is: ${yellow(css)}`)

      resolve(dryRun ? doDryRun(css) : writeCriticalFile(filePath, css))

  return new Promise((resolve: Function): void =>

    resolve(dryRun ? doDryRun(css) : writeCriticalFile(filePath, css))

 * @return {boolean} Whether or not the node has no other children.

  return nodes.filter((child: Object): boolean => child !== node).length === 0

 * @param {string} css CSS to write to file.

function writeCriticalFile (filePath: string, css: string) {

function buildCritical (options: Object = {}): Function {

  const filteredOptions = Object.keys(options).reduce(

    (acc: Object, key: string): Object =>

      typeof options[key] !== 'undefined'

        ? { ...acc, [key]: options[key] }

    const { dryRun, preserve, minify, outputPath, outputDest } = args

    const criticalOutput = getCriticalRules(css, outputDest)

    return Object.keys(criticalOutput).reduce(

      (init: Object, cur: string): Function => {

        const criticalCSS = postcss.root()

        const filePath = path.join(outputPath, cur)

          (rule: Object): Function => criticalCSS.append(rule.clone())

        criticalOutput[cur].each((rule: Object): Function =>

          criticalCSS.append(rule.clone())

          postcss(minify ? [cssnano] : [])

            // @TODO Use from/to correctly.

            .then(dryRunOrWriteFile.bind(null, dryRun, filePath))

            .then(clean.bind(null, css, preserve))

module.exports = postcss.plugin('postcss-critical', buildCritical)

		@@ -15,5 +15,5 @@ 'use strict';

		var _fs = require('fs');
		var _fsExtra = require('fs-extra');

		var _fs2 = _interopRequireDefault(_fs);
		var _fsExtra2 = _interopRequireDefault(_fsExtra);

		@@ -138,3 +138,3 @@ var _path = require('path');
		function writeCriticalFile(filePath, css) {
		_fs2.default.writeFile(filePath, css, { flag: append ? 'a' : 'w' }, function (err) {
		_fsExtra2.default.outputFile(filePath, css, { flag: append ? 'a' : 'w' }, function (err) {
		append = true;
		@@ -141,0 +141,0 @@ if (err) {

		{
		"name": "postcss-critical-css",
		"version": "3.0.4",
		"version": "3.0.5",
		"description": "Generate critical CSS using PostCSS",
		@@ -30,3 +30,3 @@ "main": "index.js",
		"eslint-plugin-flowtype": "^2.50.3",
		"eslint-plugin-import": "^2.17.3",
		"eslint-plugin-import": "^2.18.2",
		"eslint-plugin-node": "^4.2.3",
		@@ -37,3 +37,3 @@ "eslint-plugin-promise": "^3.8.0",
		"minimist": "^1.2.0",
		"tape": "^4.10.2"
		"tape": "^4.11.0"
		},
		@@ -58,4 +58,5 @@ "scripts": {
		"cssnano": "^4.1.10",
		"postcss": "^7.0.17"
		"fs-extra": "^8.1.0",
		"postcss": "^7.0.18"
		}
		}

New alerts

Improved metrics

Worsened metrics

Dependency changes

		@@ -6,3 +6,3 @@ // @flow
		import cssnano from 'cssnano'
		import fs from 'fs'
		import fs from 'fs-extra'
		import path from 'path'
		@@ -98,5 +98,4 @@ import { getCriticalRules } from './getCriticalRules'
		const { css } = result
		return new Promise(
		(resolve: Function): void =>
		resolve(dryRun ? doDryRun(css) : writeCriticalFile(filePath, css))
		return new Promise((resolve: Function): void =>
		resolve(dryRun ? doDryRun(css) : writeCriticalFile(filePath, css))
		)
		@@ -126,3 +125,3 @@ }
		function writeCriticalFile (filePath: string, css: string) {
		fs.writeFile(
		fs.outputFile(
		filePath,
		@@ -171,4 +170,4 @@ css,
		const filePath = path.join(outputPath, cur)
		criticalOutput[cur].each(
		(rule: Object): Function => criticalCSS.append(rule.clone())
		criticalOutput[cur].each((rule: Object): Function =>
		criticalCSS.append(rule.clone())
		)
		@@ -175,0 +174,0 @@ return (