Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including metalsmith-css-packer with all npm packages installed. Try it out:

var metalsmithCssPacker = require("metalsmith-css-packer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

metalsmith-css-packer v0.3.0

CSS packer/minifier/optimizer for metalsmith

metalsmith-css-packer

CSS packer/minifier/optimizer for metalsmith"

This plugin is a CSS optimizer: it will pass on generated HTML, look for styles/links tags (external, internal, inline) and bundle all stylesheets in one place.

You can chose to pack your stylesheets in one file, as this, packed stylesheets can be reused through multiple pages. Or you can directly insert packed stylesheets as inline style tag.

If this plugin doesn't fit your needs, please don't hesitate to ask for feature requests.

Installation

npm install --save metalsmith-css-packer

Usage

Javascript API

The example bellow show the minimum code needed to pack your files.

const metalsmith = require('metalsmith');
const cssPacker = require('metalsmith-css-packer');

metalsmith(__dirname)
  .source('./src')
  .use(cssPacker())
  .build();

Examples

Here is an example with generated HTML output file

HTML Input

<html>
  <head>
    <title>My awesome page !</title>

    <link rel="stylesheets" href="//cdn.example.com/bootstrap.css" />
    <link rel="stylesheets" href="//cdn.example.com/font-awesome.css" />
    <link rel="stylesheets" href="/assets/stylesheets/screen.scss" />
    <link rel="stylesheets" media="<custom media rules>" href="/assets/stylesheets/print.scss" />
  </head>
  <body>

    <!-- let's imagine we have an awesome website here -->

    <style>
      body {
        // make the Internet great again
        background: pink;
      }
    </style>
  </body>
</html>

HTML Output

<html>
  <head>
    <title>My awesome page !</title>
    <link rel="stylesheets" media="screen" href="/assets/stylesheets/e6791aa54bf763f10700a88b38d578282663be53.min.css" />
    <link rel="stylesheets" media="<custom media rules>" href="/assets/stylesheets/0cex1a4bquf764r4ge1relmb3v2ba3s8o6k3wetj.min.css" />
  </head>
  <body>

    <!-- let's imagine we have an awesome website here -->

  </body>
</html>

Here we can see, all script tags are packed/optimized in one file per media

Exclude element from packing

To blacklist element from packing, simply add data-packer="exclude" attribute to elements you want to exclude

HTML Input

<html>
  <head>
    <title>My awesome page !</title>

    <link rel="stylesheets" href="//cdn.example.com/bootstrap.css" />
    <link rel="stylesheets" href="//cdn.example.com/font-awesome.css" data-packer="exclude" />
    <link rel="stylesheets" href="/assets/stylesheets/screen.scss" />
    <link rel="stylesheets" media="<custom media rules>" href="/assets/stylesheets/print.scss" />
  </head>
  <body>

    <!-- let's imagine we have an awesome website here -->

    <style>
      body {
        // make the Internet great again
        background: pink;
      }
    </style>
  </body>
</html>

HTML Output

<html>
  <head>
    <title>My awesome page !</title>
    <link rel="stylesheets" href="//cdn.example.com/font-awesome.css" />
    <link rel="stylesheets" media="screen" href="/assets/stylesheets/e6791aa54bf763f10700a88b38d578282663be53.min.css" />
    <link rel="stylesheets" media="<custom media rules>" href="/assets/stylesheets/0cex1a4bquf764r4ge1relmb3v2ba3s8o6k3wetj.min.css" />
  </head>
  <body>

    <!-- let's imagine we have an awesome website here -->

  </body>
</html>

Options reference

namedefaultdescription
inlinefalseif true, write packed content in a inline style tag instead of a local linked stylesheets
siteRootPath/Use if your site root path is not /
outputPathassets/stylesheets/Customize output location of packed stylesheets
cssotrueEnable/disable css optimizer
cssoOptions{}Options passed to csso
removeLocalSrcfalseIf set to true local source files are not copied in build directory
assetsSourcesource from metalsmith configWhere to find your css files - this comes before the css file paths that are set in your .html file. If not set, it goes with default metalsmith source path metalsmith._source
hashContentfalseIf set to false, output file name are a hash of all input style names. If set to true, output file names are a hash of the resulting style contents. Useful for serving stylesheets with an efficient cache policy.

hint: metalsmith-css-packer use debug

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free