Drupal Critical

Automated generation of Critical CSS for Drupal sites.

Note Drupal module will be released shortly, in the meantime you can use this by manually configuring which pages to proces (see example below)

Install

$ npm install --save drupalcritical

Usage

Example:

var critical = require('drupalcritical');

var settings = {
    inline: false,
    local: true,
    dest: 'dest/',
    extract: true,
    ignore: [
      '@font-face',
      /url\(/,
      /print/,
      /animation/g,
      /interpolation/g,
      /-webkit/g,
      /-moz/g,
      /-ms/g,
      /speak/g,
      /list-style-image/g,
      /list-style-type/g
    ],
    ignoreOptions: {
      matchSelectors: true,
      matchTypes: true,
      matchDeclarationProperties: true,
      matchDeclarationValues: true,
      matchMedia: true
    },
    dimensions: [{
      height: 200,
      width: 500
    }, {
      height: 900,
      width: 1200
    }]
  };


var pages = require('./critical.json');
critical.generate(settings, pages);

Critical.json

{
  "base": "http://www.example.com",
  "pages": [
    {
      "path": "/",
      "filename": "critical-home.css"
    },
    {
      "path": "/demo",
      "filename": "critical-demo.css"
    }
  ]
}

Options

note: Not all critical options are available, the list below includes all options

| Name | Type | Default | Description | | ---------------- | ------------------ | ------------- |------------- | | css | array | [] | An array of paths to css files, or an array of Vinyl file objects. | dest | string | ./ | Location of where to save the output of an operation (will be relative to base if no absolute path is set) |
| local | string | false | Use local (development) url to generate Critical CSS, if false it uses the given base |
| width | integer | 900 | Width of the target viewport | | height | integer | 1300 | Height of the target viewport | | dimensions | array | [] | An array of objects containing height and width. Takes precedence over width and height if set | minify | boolean | false | Enable minification of generated critical-path CSS | | extract | boolean | false | Remove the inlined styles from any stylesheets referenced in the HTML. It generates new references based on extracted content so it's safe to use for multiple HTML files referencing the same stylesheet. Use with caution. Removing the critical CSS per page results in a unique async loaded CSS file for every page. Meaning you can't rely on cache across multiple pages | | inlineImages | boolean | false | Inline images | assetPaths | array | [] | List of directories/urls where the inliner should start looking for assets | maxImageFileSize | integer | 10240| Sets a max file size (in bytes) for base64 inlined images | timeout | integer | 30000| Sets a maximum timeout for the operation | pathPrefix | string | / | Path to prepend CSS assets with. You must make this path absolute if you are going to be using critical in multiple target files in disparate directory depths. (eg. targeting both /index.html and /admin/index.html would require this path to start with / or it wouldn't work.) | include | array | [] | Force include CSS rules. See penthouse#usage. | ignore | array | [] | Ignore CSS rules. See filter-css for usage examples. | ignoreOptions | object | {} | Ignore options. See filter-css#options. | penthouse | object | {} | Configuration options for penthouse.

Changelog

v1.1.0 - 2017-11-24

• renamed url to path
• changed fixed filenaming to variable