https://github.com/arccoza/metalsmith-with-postcss
A Metalsmith plugin for PostCSS.
https://github.com/arccoza/metalsmith-with-postcss
metalsmith postcss
Last synced: 6 months ago
JSON representation
A Metalsmith plugin for PostCSS.
- Host: GitHub
- URL: https://github.com/arccoza/metalsmith-with-postcss
- Owner: arccoza
- License: mit
- Created: 2016-04-04T07:56:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-25T03:01:47.000Z (over 6 years ago)
- Last Synced: 2025-04-07T01:50:39.451Z (6 months ago)
- Topics: metalsmith, postcss
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 8
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Metalsmith with PostCSS
A Metalsmith plugin for [PostCSS](https://github.com/postcss/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:
```js
{
"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:
```js
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
| Option | Default Value | Description |
| -----: | ------------- | ----------- |
| `pattern` | `['**/*.css', '!**/_*/*', '!**/_*']` | Only process files that match this pattern, can be an array of multiple patterns, following [multimatch](https://github.com/sindresorhus/multimatch) rules. The default patterns exclude any files or folders prefixed with an underscore. |
| `parser` | `undefined` | A [custom parser module](http://api.postcss.org/global.html#processOptions) passed directly to PostCSS. |
| `stringifier` | `undefined` | A [custom stringifier module](http://api.postcss.org/global.html#processOptions) passed directly to PostCSS. |
| `syntax` | `undefined` | A [shorthand object for the parser and stringifier](http://api.postcss.org/global.html#processOptions) passed directly to PostCSS. |
| `plugins` | `{}` | A collection of plugin module names as keys and any options for them as values. |
| `map` | `{inline: true}` | [Source mapping](https://github.com/postcss/postcss/blob/master/docs/source-maps.md) options passed directly to PostCSS. |
| `removeExcluded` | `false` | If `true`, remove the files from metalsmith that were excluded by the `pattern`, so they won't appear in your build directory. | If `true`, remove the files from metalsmith that were excluded by the `pattern`, so they won't appear in your build directory.