Processing imported files

[lmartins]

This is probably a misunderstanding on my part of how this works, but im having a few issues, where the modifications made by postcss to my files stop working once I put that code into an import file.

For example, im using postcss-map to create maps, and have this on my main css file:

header{
    background: map(colors, header, bg);
}

However once I pull that code into a partial file than I later import it stops working, and the text is outputted without any modification, meaning it won't replace that map call by the corresponding value.

My gulp file looks like this:

var gulp         = require('gulp');
var plumber      = require('gulp-plumber');
var browserSync  = require('browser-sync');
var postcss      = require('gulp-postcss');
var nestedcss    = require('postcss-nested');
var simplevars   = require('postcss-simple-vars');
var map          = require('postcss-map');
var atImport     = require('postcss-import');
var autoprefixer = require('autoprefixer');
var sourcemaps   = require('gulp-sourcemaps');
var config       = require('../config').markup;


var opts = {
    basePath: 'src/settings/',
    maps: [ 'colors.yml', 'typography.yml' ]
};

gulp.task('css', function () {
    var processors = [
        autoprefixer({browsers: ['last 1 version', 'ie 10']}),
        map(opts),
        nestedcss,
        simplevars,
        atImport
    ];
    return gulp.src('./src/css/main.css')
        .pipe( plumber() )
        .pipe( sourcemaps.init() )
        .pipe( postcss(processors) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') )
        .pipe( browserSync.stream({match: "**/*.css"}) );
});

Any tips?

[jednano]

If you want the map plugin to run on imported files you need to either add it to the plugins option or run it after the import plugin.

[lmartins]

Thanks for the suggestion @jedmao
I was suspecting that would be the case, although im not sure how those examples translate into a Gulp configuration as shown above.

[jednano]

Your processors need to be like this...

var processors = [
    atImport,
    // more plugins...
];

[lmartins]

Oh... awesome :)
Didn't occur to me it could just a matter of sorting those values.

Many thanks man!