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

name	default	description
`inline`	`false`	if `true`, write packed content in a inline style tag instead of a local linked stylesheets
`siteRootPath`	`/`	Use if your site root path is not `/`
`outputPath`	`assets/stylesheets/`	Customize output location of packed stylesheets
`csso`	`true`	Enable/disable css optimizer
`cssoOptions`	`{}`	Options passed to csso
`removeLocalSrc`	`false`	If set to `true` local source files are not copied in build directory
`assetsSource`	`source` from metalsmith config	Where 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`
`hashContent`	`false`	If 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

Keywords

FAQs

What is metalsmith-css-packer?

Is metalsmith-css-packer well maintained?

Last updated on 25 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install