import file with variables

[qasimalyas]

I have question about using the postcss-import plugin with combination with simple vars plugin.

I have a set of files which I want to import to a main file. Here's an example structure.

• main.css
  • variables.css
  • fileone.css
  • filetwo.css

// variables.css
$blue: #056ef0;
$foo: #ff00ff;

// fileone.css
address {
    color: $foo;
}

//filetwo.css
p {
    color: $blue;
}

I was expecting the output to parse the variables in fileone.css and filetwo.css and generate the end file like:

address {
    color: #ff00ff;
}
p {
    color: #056ef0;
}

but what i get in the end is:

address {
    color: $foo;
}
p {
    color: $blue;
}

So my variables are being ignore. My gulpfile looks like this:

var postcss = require('gulp-postcss'),
    gulp = require('gulp'),
    autoprefixer = require('autoprefixer-core'),
    mqpacker = require('css-mqpacker'),
    csswring = require('csswring'),
    atImport = require('postcss-import'),
    mixins = require('postcss-mixins'),
    vars = require('postcss-simple-vars'),
    nested = require('postcss-nested');

gulp.task('css', function () {
    var processors = [
        mixins,
        vars,
        nested,
        atImport,
        autoprefixer({browsers: ['last 4 version']}),
        mqpacker,
        // csswring
    ];
    return gulp.src('./assets/src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./assets/dest'));
});

gulp.task('default', [
    'css'
]);

Can anyone point me to the right direction as to how to get my variables to be picked up and parsed by the import plugin? Any examples would be appreciated.

[jednano]

Exact same problem as #80. You need to run the import plugin before the vars plugin. Everything that runs before the import plugin will only process the CSS before the imported files are inserted into those documents.

[MoOx]

I think PostCSS doc should tell people to be careful about plugins order until they found a "magic" solution. poke @ai
I will add a note in the README.

[qasimalyas]

Many thanks @MoOx and @jedmao. It's now working as expected!