Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

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.

install

npm i metalsmith-with-postcss

Downloadsweekly downloads

2

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability