PostCSS Plugins not work

[justgook]

i have add postbuild script to mimify/autoprefix my css
based on README there is possibility add those plugins in "--after" argument - but looks like it don't work
or maybe im doing something wrong?

...
    "prebuild": "mkdir -p public && cp src/index.html public && browserify -r morearty -r react -r react-dom > public/vendor.js",
    "build": "NODE_ENV=production browserify -p [css-modulesify  --after cssnano -o public/main.css] src/index.coffee --exclude morearty --exclude react --exclude react-dom --extension=.cjsx --extension=.coffee -o public/index.js -v",
    "postbuild": "cssnano ./public/main.css ./public/main.min.css ",
...

https://github.com/justgook/sokoban-react

[tinchoz49]

same problem here! in version 0.13.0 works. Tested with my async postcss plugin postcss-copy.

I think that the commit f9a2ea2 broke the loader of postcss plugin.

[justgook]

revert / reimplement ?

[joshwnj]

Oh, you're right about that commit breaking it sorry - looks like we're now creating the loader before the plugins list has been fully populated.

Will submit a patch today, is anyone able to help with writing a test case along the lines of "extra postcss plugins are applied"?

[joshwnj]

@tinchoz49 / @justgook can you please check #67 to see whether this fixes the issue in your case?

[tinchoz49]

hi @joshwnj ! with your change the postcss plugins like autoprefixer works great 👍 , but it seems that the async plugins not.

I made an example of one async plugin and the process of css-modulesify never finish.

function asyncPlugin() {
    return postcss.plugin('async-plugin', function (opts) {
        return function (css, result) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve();
                }, 2000);
            });
        };
    });
}

var bundler = browserify({
        entries: [sourceFile]
    })
    .plugin(watchify)
    .plugin(cssModulesify, {
        rootDir: __dirname,
        output: path.join(destFolder, cssDestFile),
        postcssAfter: [
            autoprefixer,
            asyncPlugin
        ]
    });

[tinchoz49]

if you want i can upload tomorrow my example repository where i'm testing this things ;)

Because my idea is to show how you can use css-modulesify with my postcss-copy plugin. It's a great combination to manage assets.

[joshwnj]

Thanks @tinchoz49 - an example repo would be great. I think if #67 solves part of the issue I'll go ahead and merge it tomorrow, and we can create a new issue for async plugins.

postcss-copy looks cool btw! I'll try it out in my next project.

[justgook]

+1

[joshwnj]

@tinchoz49 I've created #68 to track a solution to the issue you mentioned with async plugins