css-modulesify / autoprefixer postcss version mismatch?

[zaim]

I got this error while trying to use css-modulesify with autoprefixer: Your current PostCSS version is 4.1.16, but autoprefixer uses 5.0.8. Perhaps this is the source of the error below.

Not sure if its something wrong with my browserify command incantation, or what.

Full output below:

./node_modules/.bin/browserify -x moment -x react -x react-dom -x tcomb -x whatwg-fetch --debug -p [css-modulesify -o public/css/main.css --after autoprefixer --json app/styles/index.json] index.js | ./no
de_modules/.bin/exorcist public/js/bundle.js.map > public/js/bundle.js
Your current PostCSS version is 4.1.16, but autoprefixer uses 5.0.8. Perhaps this is the source of the error below.
TypeError: css.walkAtRules is not a function while parsing file: [path]/ui/app/components/styles/Progress.css
    at Processor.remove ([path]/ui/node_modules/autoprefixer/lib/processor.js:103:11)
    at plugin ([path]/ui/node_modules/autoprefixer/lib/autoprefixer.js:49:28)
    at LazyResult.run ([path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:197:24)
    at [path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:110:37
    at LazyResult.asyncTick ([path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:124:15)
    at [path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:122:27
    at LazyResult.asyncTick ([path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:124:15)
    at [path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:122:27
    at LazyResult.asyncTick ([path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:124:15)
    at [path]/ui/node_modules/css-modulesify/node_modules/css-modules-loader-core/node_modules/postcss/lib/lazy-result.js:122:27

[joshwnj]

@zaim can you please give us a link to the repo so we can see the bug in action?

[zaim]

You mean my project's repo? It's a personal project, not yet open sourced. What kind of information would you need? Maybe I can post my package.json and Makefile in a gist?

[joshwnj]

Yes a gist would be good thanks. Just something so that we can reproduce the bug, and understand all of the factors at play.

[themitchy]

autoprefixer@latest (6.0.3) uses [email protected]
css-modulesify@latest (0.9.0) uses [email protected] (via [email protected])

@zaim you can fix this issue by downgrading your autoprefixer (npm i --save-dev [email protected]). Using the older package isn't ideal but that's how I'm getting around this for now.

@joshwnj you may want to consider updating css-modules-loader-core and subsequently css-modulesify to use [email protected] so that css-modulesify can work with the latest postcss plugins.

[themitchy]

This and many other bugs will get fixed by #47

[joshwnj]

@zaim can you please confirm whether this issue is fixed now that we're on postcss v5?

[huan086]

I'm running css-modulesify 0.16.1 with autoprefixer 6.3.1. I don't see the error.

[joshwnj]

Closing as this is most likely resolved now