How to use cssnano plugin?

[huan086]

In index.js line 121, the array of postcssAfter plugins is compared with function

  plugins = plugins.map(function requirePlugin (name) {
    // assume functions are already required plugins
    if (typeof name === 'function') {
      return name;
    }

However, cssnano returns postcss() rather than function, and thus modulesify tries to call require on it, causing error. What's the correct way to use the cssnano plugin?

My current config

    var b = browserify(entryFiles, assign({}, watchify.args, {
        plugin: [
            [cssModulesify, {
                output: jsToCssPath(outputPath), // we need to specify output when using multiple browserify instance
                generateScopedName: cssModulesify.generateShortName,
                postcssAfter: [
                    autoprefixer({ browsers: ['> 1%', 'IE 9', 'IE 10', 'IE 11'], remove: false }),
                    cssnano() // adding this causes error
                ]
            }],
            collapseRequire,
            [factorBundle, factorOptions],
            [watchify, { poll: false }]] // We need to poll for ex-FAT.
    }));

[huan086]

As of 2016-03-10, the plugins.map line has been fixed, and error message is now { [TypeError: Cannot read property 'type' of undefined while parsing file: D:\pathtofile\common.css] filename: 'D:\\pathtofile\\common.css',

[huan086]

I've managed to get cssnano to work by disabling postcssDiscardDuplicates and postcssDiscardUnused.

Code as follows

    var b = browserify(entryFiles, assign({}, watchify.args, {
        plugin: [
            [cssModulesify, {
                output: outputPath,
                postcssAfter: [
                    autoprefixer({ browsers: ['> 1%', 'IE 9', 'IE 10', 'IE 11'], remove: false }),
                    cssnano({
                        autoprefixer: { disable: true },
                        postcssDiscardDuplicates: { disable: true },
                        postcssConvertValues: { length: false },
                        postcssDiscardUnused: { disable: true },
                        postcssReduceIdents: { counterStyle: false, keyframes: false },
                        postcssZindex: { disable: true }
                    })
                ]
            }]
    }));

[joshwnj]

Great to hear you got it working, thanks for sharing the solution @huan086