Grunt PostCSS compilation very slow

Question

I'm giving postCSS a go by pure curiosity but I'm having a compilation time around ~2sec already.

I'm only using 3 plugins : autoprefixer, postcss-import and postcss-nested

I've got app.css that imports 2 files :

@import "_base/_base.css";

@import "_common/_common.css";

then I have _base.css :

.title {
    display: flex;
    color: white;
}

and _common.css :

header {
    background: red;

    h1 {
        background: black;
    }
}

My watcher is only watching /postCSS :

    ...
    watch: {
        postcss: {
            files: grunt.settings.devDir + 'postCSS/{,**/}*.css',
            tasks: ['postcss:dev']
        }
    },
    ...

postcss:dev task:

        dev: {
            options: {
                map: false,
                processors: [
                    require('autoprefixer')({browsers: 'last 1 versions'}),
                    require('postcss-import')(),
                    require('postcss-nested')()
                ]
            },
            files: [{
                expand: true,
                cwd: grunt.settings.devDir + 'postCSS/',
                src: ['app.css'],
                dest: grunt.settings.devDir + 'css/'
            }]
        },

So my question is, how can I already get 2 seconds to compile 3 small css files ? Am I missing something ?

Thanks!

Answer 1

Now, PostCSS has this problem, it's too slow.

In this article, the author replicates the workflow with PostCSS and without PostCSS. The final results give you the idea of PostCSS has lot of potential, but you should change your working tasks with the CSSNext version.