2createStudio/postcss-sprites

why "postcss.decl is not a function"

kang-lyk opened this issue · 1 comments

`var gulp = require('gulp'),
fileinclude = require('gulp-file-include'),
requireDir = require('require-dir');
var updateRule = require('postcss-sprites/lib/core').updateRule;
var baseUrl = 'http://static.eelly.com/';
gulp.task('css', function () {

var postcss    = require('gulp-postcss'),
    postcssArr = [
        require('autoprefixer')({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: false, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认:true 
        }),
        require('precss'),
        require('postcss-sprites')({
            stylesheetPath:'./src/css/',
            spritePath:'./src/images/',
            basePath:baseUrl,
            relativeTo: 'rule',
            spritesmith:{
                padding:10
            },
            filterBy: function(image) {
                // Allow only png files
                if (!/icon\-/.test(image.url)) {
                    return Promise.reject();
                }
                return Promise.resolve();
            },
            hooks: {
                onUpdateRule: function(rule, token, image) {
                    // Use built-in logic for background-image & background-position
                    updateRule(rule, token, image);

                    ['width', 'height'].forEach(function(prop) {
                        rule.insertAfter(rule.last, postcss.decl({
                            prop: prop,
                            value: image.coords[prop] + 'px'
                        }));
                    });
                }
            }
        }),
        require('postcss-assets')({
            loadPaths: ['./src/images/','../images'],
            baseUrl: baseUrl,
            cachebuster: true
        })
    ];
return gulp.src(['src/**/*.css','!src/**/_*.css'])
    .pipe( postcss(postcssArr))
    .pipe( gulp.dest('dist/'));

});`

It's not a function because you use gulp-postcss instead of postcss. Please use the code block below.

var gulpPostcss = require('gulp-postcss');
var postcss = require('postcss');