zgreen

postcss-critical-css

const basePath = `${process.cwd()}/example`

    postcss([postcssCriticalCSS({ outputPath: basePath })])

      .process(data, { from: undefined, to: undefined })

      .process(data, { from: undefined })

          `${basePath}/${file.split('.')[0]}.non-critical.css`,

              console.error(`ERROR: `, err)

      fs.readFile(`${basePath}/${file}`, 'utf8', (err, data) => {

fs.readdir(basePath, 'utf8', (err, files) => {

var _postcss2 = _interopRequireDefault(_postcss);

var _cssnano2 = _interopRequireDefault(_cssnano);

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)));

      }).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)}`)

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

 * @param {Object} result PostCSS root object.

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

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

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

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

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

		{
		"name": "postcss-critical-css",
		"version": "3.0.2",
		"version": "3.0.3",
		"description": "Generate critical CSS using PostCSS",
		@@ -5,0 +5,0 @@ "main": "index.js",

		@@ -11,3 +11,3 @@ #!/usr/bin/env node
		postcss([postcssCriticalCSS({ outputPath: basePath })])
		.process(data, { from: undefined, to: undefined })
		.process(data, { from: undefined })
		.then(result => {
		@@ -14,0 +14,0 @@ fs.writeFile(

		@@ -183,4 +183,3 @@ 'use strict';
		.process(criticalCSS, {
		from: undefined,
		to: undefined
		from: undefined
		}).then(dryRunOrWriteFile.bind(null, dryRun, filePath)).then(clean.bind(null, css, preserve));
		@@ -187,0 +186,0 @@ }, {});

		@@ -175,4 +175,3 @@ // @flow
		.process(criticalCSS, {
		from: undefined,
		to: undefined
		from: undefined
		})
		@@ -179,0 +178,0 @@ .then(dryRunOrWriteFile.bind(null, dryRun, filePath))

Worsened metrics