-
Notifications
You must be signed in to change notification settings - Fork 64
Description
I am new to web development processes. I was setting gulp, postcss and everything. So I decided to test if it worked. Tried gulp-autoprefixer - it worked, then tried to use postcss with autoprefixer passed as parameter - it worked as well. I was reading through articles on the internet and decided to test a custom processor:
var opacity = function(css) {
css.eachDecl(function(decl, i) {
if (decl.prop === 'opacity') {
decl.parent.insertAfter(i, {
prop: '-ms-filter',
value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"'
});
}
});
};
gulp.task('styles', function() {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(autoprefixer({browsers: ['last 3 versions']}))
.pipe(postcss([opacity]))
.pipe(gulp.dest('dist/styles'));
});
It started throwing all kinds of errors. At the start I thought I am being retarded and there is a mistake somewhere on the website I am reading, or maybe I made some mistake.
So I started reading this postcss github and found same example with opacity processor. Well, I tried example from this github and it continued to throw errors.
After ~2 hours of reading articles and trying to find a solution for this problem I randomly found out that there are no eachDecl
function in postcss' API but I found walkDecls
function there.
So I thought that this one might work because they updated API but forgot to update examples. And walkDecls
did work.
Might be a good idea to update wiki to not send people on a wild-goose chase.