postcss-nesting version to old for jest inside vue-cli / vue-test-utils

[solidevolution]

Please update the postcss-nesting version, otherwise vue-cli with jest unittest doesn't work.

https://github.com/vuejs/vue-cli/issues/1043

[LinusBorg]

vue-cli contributor here - You can probably ignore this, it seems to be a problem on our side with https://github.com/vuejs/vue-jest

I may be wrong, but @solidevolution didn'T provide much to work on.

[solidevolution]

@LinusBorg I can provide you more but a sandbox mock wouldn't bring you much. It's a bug on console / npm run test. Browser/Sandbox working fine.

It's simply what I wrote, do

"vue create something"

of vue-cli, then

"npm install -D postcss/cssnext"

Add it to .postcssrc

and insert nested css ("4") in a component:

& .a {
  z-index: 1;

  & .b {
    z-index: 2;
  }
}

[LinusBorg]

Well, on second thjought:

vue-cli doesn't even include cssnext for you, and you didn't do so either, as far as I can tell,so I have no idea why you report this as a problem in our reporsitory, and even less of an idea why this should be a problem with cssnext / postcss-nested.

[solidevolution]

@LinusBorg I added more information. The problem happens if we combine vue-cli with cssnext and write tests. So I had no idea where to start with the bug:

1. jest
2. vue-jest
3. vue-cli
4. cssnext

So I started with you guys, having more background of the deep structures.

PS: postcss/cssnext bundles a lot of packages, one of those is postcss-nesting. not nested. PPS: Our css next solution would be to bundle the postcss packages self to be ready for css4 ;)

[LinusBorg]

...so does it work with postcss-nesting 4.2.1?

...and the current version is ^4.0.1, which would install 4.2.1 anyway, so update to which version?

[solidevolution]

Sorry, tried it with 4.2.1 and got the same error. So I was on the wrong path.

@LinusBorg identified the problem in vue-jest, a middleware to test vue components with jest.