Plugin for Metalsmith to inline CSS files.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
tests
.gitignore
.jscsrc
.jshintrc
.npmignore
.travis.yml
LICENSE
Makefile
README.md
index.js
package-lock.json
package.json

README.md

Build Status Coverage Status

metalsmith-inline-css

This is a Metalsmith plugin to inline CSS files. It is compatible with CSS preprocessor plugins (e.g. metalsmith-sass).

Usage

Install the package:

npm install metalsmith-inline-css

Add the plugin to your Metalsmith build chain:

const metalsmith = require('metalsmith');
const inlineCss = require('metalsmith-inline-css');

metalsmith(__dirname)
    .source('./src')
    .destination('./public')
    .use(inlineCss());
    .build(function (err) {
        if (err) {
            throw err;
        }

        console.log('Build complete');
    });

This plugin avoids the complexity of parsing the HTML tree by instead using simple RegEx search and replace.

The downside is that you must format your <link> tag in one of the following two ways, or the plugin will not inline your CSS file:

<link rel="stylesheet" href="/css/style.css" inline>
- OR -
<link rel=stylesheet href=/css/style.css inline>

(Replace /css/style.css with the path to your CSS file relative to the output directory.)

Example

To build the example page run:

make example

Inspect files in example/ for more information.

Debug Logging

Set the DEBUG variable to see what the plugin is doing.

DEBUG=metalsmith-inline-css:* node build.js