metalsmith-with-postcss

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
  • Default value: undefined
  • Description: A custom parser module passed directly to PostCSS.
• stringifier
  • Default value: undefined
  • Description: A custom stringifier module passed directly to PostCSS.
• syntax
  • Default value: undefined
  • Description: A shorthand object for the parser and stringifier passed directly to PostCSS.
• 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.