Thanks to visit codestin.com
Credit goes to github.com

Skip to content

css.eachDecl in examples doesn't work. css.walkDecls have to be used instead. #139

@KulaGGin

Description

@KulaGGin

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions