neutrino-middleware-critical-css v1.0.0

Neutrino Critical CSS Middleware

neutrino-middleware-critical-css is Neutrino middleware for extracting and inlining critical css.

Requirements

• Node.js v6.10+
• Yarn or npm client
• Neutrino v8

Installation

neutrino-middleware-critical-css can be installed via the Yarn or npm clients.

Yarn

❯ yarn add neutrino-middleware-critical-css

npm

❯ npm install --save neutrino-middleware-critical-css

Usage

neutrino-middleware-critical-css can be consumed from the Neutrino API, middleware, or presets. Require this package and plug it into Neutrino:

// Simple example html from @neutrinojs/web
module.exports = {
  use: [
    '@neutrinojs/web',
    'neutrino-middleware-critical-css'
  ],
};

// Example showing specified targets.
module.exports = {
  use: [
    '@neutrinojs/web',
    ['neutrino-middleware-critical-css', {
      targets: {

        // String values will set src and dest to the same value.
        home: 'index.html',

        somepage: {
          src: 'somepage.html',
          dest: 'somepage.html'
        }
      }
    }]
  ],
};

// Server-side app example
module.exports = {
  use: [
    ['@neutrinojs/web', {
      html: false
    }],
    ['neutrino-middleware-critical-css', {
      targets: {
        home: {
          src: 'http://localhost:8089',
          dest: 'critical-home.css'
        },
        somepage: {
          src: 'http://localhost:8089/somepage',
          dest: 'critical-somepage.css'
        }
      }
    }]
  ],
};

Without specifying src, html, or targets options, the middleware will automatically look for any html generated by @neutrinojs/web and automatically inline it to your template.

Options

Options are passed to Critical.

For all other options, see Critical's options.

By specifying targets, you can invoke Critical on multiple targets. Specified options will be merged with root level options and passed on to Critical.