Vue-jest: Error parsing SCSS with v2.0.0

[iwata]

I met some strange errors, when upgraded from v1.4.0 to v2.0.0.
It occurs errors about parsing css, looks like this:

 FAIL  test/App.spec.js
  ● Test suite failed to run

    undefined:62:6: property missing ':'

      at error (node_modules/css/lib/parse/index.js:62:15)
      at declaration (node_modules/css/lib/parse/index.js:223:33)
      at declarations (node_modules/css/lib/parse/index.js:252:19)
      at rule (node_modules/css/lib/parse/index.js:560:21)
      at rules (node_modules/css/lib/parse/index.js:117:70)
      at stylesheet (node_modules/css/lib/parse/index.js:81:21)
      at Object.module.exports [as parse] (node_modules/css/lib/parse/index.js:564:20)
      at Function.extractClasses (node_modules/extract-from-css/lib/index.js:14:23)
      at processStyle (node_modules/vue-jest/lib/process.js:40:31)
      at parts.styles.map.ast (node_modules/vue-jest/lib/process.js:105:24)

Here is a part of App.vue:

62: ul {
63:   @include clearfix;
64: }

I use sass-resources-loader to set global mixin for SCSS at webpack.config.js.
I think it caused by not loading the mixin in Jest, but README.md told me 'It does not currently compile the style section'.
This makes me confused.
Incidentally, this error did not occur with v1.4.0.

Is there any good solution?

[nirkki]

Do you have nested classes in your scss?
I moved my nested classes to flat structure - and the message was gone.

[Finrod927]

I have the same issue using less and using flat structure did not help.

Back to 1.4.0 as I do not use Babel 7 for now.

[alajfit]

I have the same issue but moving to flat structure fixes the issue

[adamwoodbury]

I am having the same problem. If I have the following style block:

<style lang="scss">
  @import "~@/styles/transitions";
</style>

I get an error undefined:30:1: missing '{'. If I add a a css rule with a {:

<style lang="scss">
  @import "~@/styles/transitions";
  .app {
    // empty ruleset
  }
</style>

The error changes to undefined:32:6: property missing ':'. Finally, adding actual rules with a : will work:

<style lang="scss">
  @import "~@/styles/transitions";
  .app {
    color: blue;
  }
</style>

It looks like the library used for parsing the css is failing when it doesn't see an actual css block. Given an actual css block, it is failing when it doesn't see a rule defined. Basically, if you only have imports, includes and the like, it will fail.

[tforssander]

Same issue here using nested selectors. Went back to v1.4.0 and the error is gone.