- Notifications
You must be signed in to change notification settings - Fork5
madeleineostoja/poststylus
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
PostStylus is aPostCSS adapter for Stylus. It allows you to use any PostCSS plugin as a transparent Stylus plugin, and do custom post-processing of Stylus output.
It loads PostCSS processors into Stylus just before the output CSS is compiled to file.
Inspired byautoprefixer-stylus
$ npm install --save-dev poststylus
Usepoststylus as a regular stylus plugin and pass it an array of PostCSS plugins you have installed, either as strings or functions.
stylus(css).use(poststylus(['autoprefixer','rucksack-css']))
vargulp=require('gulp'),stylus=require('gulp-stylus'),poststylus=require('poststylus'),autoprefixer=require('autoprefixer'),rucksack=require('rucksack-css');gulp.task('stylus',function(){gulp.src('style.styl').pipe(stylus({use:[poststylus([autoprefixer,rucksack])]})).pipe(gulp.dest('.'))});gulp.task('default',['stylus']);
grunt-contrib-stylus doesn't support passing arguments to plugins, so you have to wrap PostStylus in a function and return it
varpostcss=function(){returnrequire('poststylus')(['autoprefixer','rucksack-css']);}module.exports=function(grunt){grunt.initConfig({stylus:{compile:{options:{use:[postcss]},files:{'style.css':'style.styl'}}}});grunt.loadNpmTasks('grunt-contrib-stylus');};
Usestylus-loader with PostStylus as a plugin in your webpack.conf.js
var poststylus = require('poststylus'), webpack = require('webpack');module: { loaders: [ { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } ]},stylus: { use: [ poststylus([ 'autoprefixer', 'rucksack-css' ]) ]}If you are using webpack 2, useLoaderOptionsPlugin to set options
module: {...},plugins: [ new webpack.LoaderOptionsPlugin({ options: { stylus: { use: [poststylus([ 'autoprefixer', 'rucksack-css' ])] } } })]To use PostStylus on the Stylus CLI, passpoststylus to--use, and PostCSS plugins to--with:
$ stylus --use ./node_modules/poststylus --with"['autoprefixer']" --out test.css< test.styl
If you need to pass arguments to a PostCSS pluginrequire() it and pass that function to PostStylus
varautoprefixer=require('autoprefixer');stylus(css).use([poststylus([autoprefixer({browsers:['ie 8']})])])
To pass arguments to PostCSS plugins on the CLI, you'll need to prefixrequire() with$PWD, since thestylus executable runs globally, while your plugins are (probably) installed locally:
stylus --use ./node_modules/poststylus --with"[require('${PWD}/node_modules/autoprefixer')({ browsers: ['ie 8'] })]" --out test.css< test.styl
Do custom post-processing of Stylus output by declaring an on-the-fly PostCSS plugin
varmyPostcss=postcss.plugin('custom',function(){returnfunction(css){// PostCSS processing here};});// Pipe it into poststylusstylus(css).use(poststylus([myPostcss()]));
Refer to the [PostCSS Docs][postcss-link] for more on writing plugins.
By default, if any of your PostCSS plugins raise a warning it will be displayed usingconsole.error. You can override this behaviour by passing a function as the second argument to PostStylus.
stylus(css).use(poststylus(['autoprefixer','rucksack-css'],function(message){console.info(message);}));
Unfortunately the Stylusend event that PostStylus uses to pass back post-processed CSS doesn't accept a callback, so untilthis bug is patched upstream PostStylus cannot work with asynchronous PostCSS processing.
MIT ©Sean King
About
PostCSS adapter for Stylus
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.