metalsmith-with-postcss

1.1.0 • Public • Published

Metalsmith with PostCSS

A Metalsmith plugin for PostCSS.

Explanation

Use PostCSS and PostCSS plugins with Metalsmith.

You mustn't forget to install the PostCSS plugins with npm install first.

Install

npm install metalsmith-with-postcss --save

Example

metalsmith.json config example:

{
  "plugins": {
    "metalsmith-with-postcss": {
      pattern: ['**/*.css', '!**/_*/*', '!**/_*'], //This is the default.
      plugins: {
        'postcss-import': {},
        'postcss-if-media': {},
        'postcss-custom-media': {},
        'postcss-media-minmax': {},
        'postcss-layout': {},
        'postcss-aspect-ratio': {},
        'autoprefixer': {}
      }
    }
  }
}

Build script example:

var metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var postcss = require('metalsmith-with-postcss');
var sugarss = require('sugarss');
var rename = require('metalsmith-rename';
 
 
metalsmith(__dirname)
  .source('src')
  .destination('pub')
  .use(postcss({
    pattern: ['**/*.sss', '!**/_*/*', '!**/_*'], //For SugarSS,
    parser: sugarss,
    plugins: {
      'postcss-import': {},
      'postcss-if-media': {},
      'postcss-custom-media': {},
      'postcss-media-minmax': {},
      'postcss-layout': {},
      'postcss-aspect-ratio': {},
      'autoprefixer': {}
    }
  }))
  .use(rename([[/\.sss$/, '.css']])) //Renames processed files to CSS
  .use(markdown({
    gfm: true,
    tables: true
  }))
  .build(function (err) {
    if (err) {
      throw err;
    }
  });
  

Options

  • pattern
    • Default value: ['**/*.css', '!**/_*/*', '!**/_*']
    • Description: Only process files that match this pattern, can be an array of multiple patterns, following multimatch rules. The default patterns exclude any files or folders prefixed with an underscore.
  • parser
  • stringifier
  • syntax
  • plugins
    • Default value: {}
    • Description: A collection of plugin module names as keys and any options for them as values.
  • map
    • Default value: {inline: true}
    • Description: Source mapping options passed directly to PostCSS.
  • removeExcluded
    • Default value: false
    • Description: If true remove the files from metalsmith that were excluded by the pattern, so they won't appear in your build directory.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.0
    15
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.1.0
    15
  • 1.0.0
    0

Package Sidebar

Install

npm i metalsmith-with-postcss

Weekly Downloads

15

Version

1.1.0

License

MIT

Last publish

Collaborators

  • arccoza