WebStorm 2017.2 EAP, 172.2953: improved Sass support, code coverage for Mocha, CSS Modules

Posted on by Ekaterina Prigara

This week’s WebStorm 2017.2 EAP build (172.2953.12) brings support for Mocha code coverage reports, improvements in Sass and SCSS support, and more.

You can install this WebStorm 2017.2 EAP build via Toolbox App or by downloading it on this page. It can be installed side-by-side with your stable WebStorm version. A patch update from the last week EAP build is also available.

Please share your feedback and report issues on our tracker. Thank you!

Better support for Sass and SCSS nested selectors and selectors with &

For Sass and SCSS selectors created using &, WebStorm now provides code completion in HTML files, as well as navigation to the definition (with Cmd/Ctrl-Click).

scss-amp-completion

For the nested Sass and SCSS selector, you can use Navigate to the definition (Cmd/Ctrl-Click).

navigate-nested-sass

Code coverage for Mocha

Now you can see code coverage reports for Mocha tests right in the IDE.

To get started install nyc, the command-line interface for Istanbul:
npm install --save-dev nyc

Or install Istanbul itself with npm install --save-dev istanbul. We recommend using istanbul@next because it has support for ES6 and TypeScript. Make sure that Mocha is also installed and properly set up.

Now select the set of tests you’d like to run – that could a folder with test files, a test file, a suite or a specific test – then create a new Mocha run/debug configuration via Edit Configurations dialog, save it and hit the Run with coverage icon.

run-with-coverage

You can also use the test icons in the editor to quickly run a specific suite or a test with coverage.

quickly-run-with-coverage

The coverage report will open next to the editor, showing how many files were covered with tests and the percentage of covered lines in them. From the report you can jump to the file and see what lines were covered – marked green – and what lines were not covered – marked red.

coverage-report

New code style options for JSX

We added new code style options for HTML and JSX (HTML code style is applied to the JSX tags): New line before first attribute and New line after last attribute. Set them to When multiline if you want your JSX code to follow the alignment rules from the Airbnb React code style.

reformat-jsx

Support for CSS Modules

WebStorm adds support for CSS Modules: now when you’ve imported a CSS Module in your JavaScript file, you’ll get code completion and navigation to the definition for the class names in that module.

css-modules

If you’re using CSS Modules together with PostCSS, don’t forget to install the PostCSS plugin via Preferences | Plugins and then associate PostCSS with .css files in Preferences | Languages & Frameworks | Stylesheets | Dialects.

For the full list of issues addressed in this EAP build, see the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

Comments below can no longer be edited.

23 Responses to WebStorm 2017.2 EAP, 172.2953: improved Sass support, code coverage for Mocha, CSS Modules

  1. David Arutiunian says:

    June 23, 2017

    Hi! I tried using css modules, code completion works, but WebStorm cannot resolve css module for some reasons. Here is a screenshot https://i.imgur.com/uz4cTez.png
    I am using create-react-app with typescript

  2. John says:

    July 15, 2017

    I installed istanbul but code coverage icon is not active. Then I installed nyc, still not active. Using node 8.1.3

    • Ekaterina Prigara says:

      July 17, 2017

      Can you please provide a bit more details: what happens when you run a Mocha configuration with coverage? Do you see any error messages? What WebStorm build do you use?

      • Dom Armstrong says:

        July 19, 2017

        There is no icon visible in any of the places it should be. Also I have nyc installed and use mocha. I’ve been using both in the project, so have everything in place, just no way to run ‘with coverage’ showing in the editor.

        • Ekaterina Prigara says:

          July 19, 2017

          Is Run with coverage icon next to the list of run/debug configurations active when you select a Mocha configuration?
          What WebStorm build number do you use (you can check that on the IDE about screen)?
          Thanks!

          • Dom Armstrong says:

            July 19, 2017

            IntelliJ IDEA 2017.2
            Build #IU-172.3317.76, built on July 15, 2017
            JRE: 1.8.0_152-release-915-b5 amd64
            JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
            Linux 4.10.0-26-generic

            I am using typescript, but it also isn’t visible for the compiled javascript files. There is no icon in:

            * main run menu
            * top right horizontal bar
            * right click on spec
            * right click on file
            * file left hand border quick test run drop downs

        • Sergey Simonchik says:

          July 19, 2017

          Please make sure that “Coverage” plugin is checked in “Settings | Plugins”.

          • Dom Armstrong says:

            July 20, 2017

            (^A^) ̿ ̿’̿’\̵͇̿̿\з

            Thanks. That was it <3

  3. Wes says:

    July 15, 2017

    I’m also having problems with “@value app-max-width: 1000px;”, and “Unknown at-rule” warnings.

    • Wes says:

      July 15, 2017

      Nvm, I thought 2017.2 was already released. I apparently don’t have that version. Please ignore.

  4. David Gilbertson says:

    October 5, 2017

    Howdy. That AirBnB link is broken, there’s something funny in the URL.

    • Ekaterina Prigara says:

      October 5, 2017

      Thanks for noticing. I’ve fixed it!

  5. olgenn says:

    March 14, 2018

    WebStorm supports camelCase css modules

    • olgenn says:

      March 14, 2018

      ??

    • Ekaterina Prigara says:

      March 15, 2018

      I’m not sure that I understood your question correctly, but there’s completion for class names that use camel case.

      • Valery Kharshats says:

        October 8, 2018

        CSS modules in case of usage Webpack and css-loader for sure can auto convert .my-css-class-name to camel case when using in javascrip. It will converted to styles.myCssClassName.

        And currently navigation from js to css is not workin when camel case option is enabled.

        • Valery Kharshats says:

          October 8, 2018

          Also auto completition as well.

          • Ekaterina Prigara says:

            October 10, 2018

            Hello Valery,
            Please vote for this issue and follow it for the updates: https://youtrack.jetbrains.com/issue/WEB-28203
            Unfortunately, at the moment we can’t provide any ETA when it will be resolved.

  6. Luca Azzone says:

    May 2, 2018

    Using scss i can’t navigate to definition, CTRL + click on the class in html file bring me to the generate css file, it can’t find the .scss file, see screenshot: https://imgur.com/a/WkdNjrR

    I found a trick: if i delete the css reference in the html file () the CTRL + click action let me choose between the generated css and the scss file. See screenshot: https://imgur.com/a/1gXmq5w

    Even better if i remove the generated css file from the filesystem CTRL+click bring me directly to the scss.

    Of course removing each time the generated css file and the css link referenze isn’t feasible. I imagine there is a way to achieve that, but i couldn’t find 🙁

    • lena_spb says:

      May 2, 2018

      Since 2018.1.x, this should work even if the generated .css is there, linked to HTML via link tag: WebStorm now looks for a source map file next to the referenced .css file and suggests to navigate both to the original source and to the compiled CSS. If no source map available then the IDE looks for the same named file with *.less, *.sass, *.scss, etc. extension next to the compiled *.css file.