Registry / devops / metalsmith-css-packer

metalsmith-css-packer

JSON →
library0.5.0jsnpmunverified

Metalsmith plugin that bundles, minifies, and optimizes CSS from HTML files. It scans generated HTML for <link> and <style> tags, merges external and inline stylesheets by media query, and outputs either a single linked .min.css file per media type or inline <style> blocks. Version 0.5.0 wraps the csso minimizer. Use it when you need to process multiple CSS sources after HTML generation. Supports data-packer="exclude" attribute to skip certain elements. The plugin expects HTML files already built by Metalsmith; it does not handle SASS/SCSS compilation natively.

devops
npm install metalsmith-css-packer
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · METALSMITH-CSS-PAC
M
metalsmith-css-packer
devopsjavascriptv0.5.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

default
✓ const cssPacker = require('metalsmith-css-packer');
✗ const cssPacker = require('metalsmith-css-packer').default;
CommonJS default export; no named exports available.
default (ESM)
✓ import cssPacker from 'metalsmith-css-packer';
✗ import { cssPacker } from 'metalsmith-css-packer';
ESM default import; package does not export named symbols.
type import
✓ import type { MetalsmithCSSPackerOptions } from 'metalsmith-css-packer';
✗ import { MetalsmithCSSPackerOptions } from 'metalsmith-css-packer'; (not a value export)
Types may be exported; check package for exact type names.

Shows a complete Metalsmith build with CSS packer configured to inline styles and disable CSS restructure.

const metalsmith = require('metalsmith'); const cssPacker = require('metalsmith-css-packer'); metalsmith(__dirname) .source('./src') .use(cssPacker({ inline: true, siteRootPath: '/', csso: true, cssoOptions: { restructure: false }, removeLocalSrc: false })) .build(function(err) { if (err) throw err; console.log('Build complete!'); });
Debug
Known issues
gotchaPlugin processes only .html files; non-HTML files are ignored silently.
fix
Ensure your Metalsmith pipeline generates HTML before this plugin runs.
affects: >=0.1.0
gotchaExternal URLs (e.g., //cdn.example.com) are downloaded and inlined; ensure network access at build time.
fix
Use data-packer="exclude" on external links you do not want fetched.
affects: >=0.1.0
gotchaThe plugin overrides the 'stylesheets' directory in the build output; existing files may be deleted.
fix
Set a unique outputPath option to avoid conflicts.
affects: >=0.1.0
deprecatedOption 'assetsSource' is undocumented but may be used internally; avoid reliance.
fix
Use only documented options listed in the README.
affects: >=0.3.0
Errors
Common errors & fixes
TypeError: metalsmith(...).use(...).build is not a function
Metalsmith 2.x+ no longer returns a function from .build(); it expects a callback.
fix
Use .build(function(err) { ... }) instead of chaining .build().
Error: ENOENT: no such file or directory, open '...'
The plugin expects source files to exist in the build directory; they may be missing if earlier plugins didn't run.
fix
Ensure the HTML files are already built before this plugin.
SyntaxError: Unexpected token ... in JSON at position ...
The plugin may attempt to parse a .json file as HTML; occurs if your source contains JSON files.
fix
Use a Metalsmith plugin pattern to process only .html files before this plugin.
Upgrade
Version history
0.5.0latest on npm
Audit
Dependencies
cssorequiredCSS minification engine; used when `csso` option is true
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/stafyniaksacha/metalsmith-css-packer ↗
packagemetalsmith-css-packer ↗
homepagehttps://github.com/stafyniaksacha/metalsmith-css-packer#readme ↗
metalsmith-css-packer — npm install metalsmith-css-packer · libregistry