metalsmith-minify-css-attributes v1.0.0

metalsmith-minify-css-attributes

A metalsmith plugin for minifying CSS in HTML files and CSS source files by converting classes and IDs into mangled CSS attribute selectors.

This plugin minifies CSS by converting all class and id attributes and selectors in the document and style sheets into mangled CSS attribute selectors. For example, the tag <p class="hello">world</p> will be minified into <p a>world</p>, and all of the .hello selectors in the style sheets will be converted to [a].

Installation

npm install metalsmith-minify-css-attributes

Usage

To use this plugin, simply add it to the existing plugins in your Metalsmith source file or include it in the Metalsmith JSON file:

JavaScript

const Metalsmith = require('metalsmith');
const minifyCssAttributes = require('metalsmith-minify-css-attributes');

Metalsmith(__dirname)
  .use(minifyCssAttributes())
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "plugins": {
    "metalsmith-minify-css-attributes": {}
  }
}

Options

You can pass options to metalsmith-minify-css-attributes with the Javascript API or CLI. The options are:

• htmlPattern: optional. Only HTML files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.html.
• cssPattern: optional. Only CSS files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.css.

htmlPattern

Only HTML files that match this pattern will be processed. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyCssAttributes = require('metalsmith-minify-css-attributes');

Metalsmith(__dirname)
  .use(minifyCssAttributes({
    htmlPattern: 'blog/**/*.html',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-css-attributes": {
      "htmlPattern": "blog/**/*.html"
    }
  }
}

Would only process HTML files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

cssPattern

Only CSS files that match this pattern will be processed. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyCssAttributes = require('metalsmith-minify-css-attributes');

Metalsmith(__dirname)
  .use(minifyCssAttributes({
    cssPattern: 'blog/**/*.css',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-css-attributes": {
      "cssPattern": "blog/**/*.css"
    }
  }
}

Would only process CSS files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

License

AGPLv3