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.

[mrliptontea]

Yup, there is no support for Sass/SCSS at all. And in general support for <style> has been added recently in 7791d8e, ie after 1.4.0.

Maybe it should test whether given lang is supported and skip styles entirely if it isn't? That would resolve the issue for now. Possibly emit a warning too, so devs would know what's going on and hint that such support might be added in the future.

[eddyerburgh]

Thanks for the details guys.

As a temporary solution we skip any scss or sass styles in 2.0.1, and throw a warning that it isn't compiled.

I'll keep this issue open as we should add support for SCSS now that styles are being compiled.

[abhipanda]

@eddyerburgh Thanks for supporting this feature, would you happen to know when can we expect 2.1.0, as its a blocker for us.

Alternatively, I tried with ".*\.(vue)$": "jest-vue-preprocessor" and it works for now.

[eddyerburgh]

In 2.2.x we compile SCSS to add classes to the $style object.

[jeremyzahner]

@eddyerburgh I guess we can close this after merging #82

[jeremyzahner]

@iwata Do you still have this issue after the rewrite of the SASS/SCSS compiler? If not, feel free to close this issue. =)

[iwata]

LGTm