12

I am using PostCSS and one of the important elements in PostCSS is CSS nesting. WebStorm doesn't like the syntax and highlights errors.

Is there any solution for this issue?

enter image description here

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Avi Zloof
  • 2,923
  • 4
  • 22
  • 28
  • 2
    Just as @DanGamble said -- that's the only way for now. In meantime -- consider voting for https://youtrack.jetbrains.com/issue/WEB-16601 – LazyOne Aug 10 '16 at 08:37
  • Yep, please vote! Hopefully something gets sorted regarding it soon even if it is just having support for new CSS specification stuff like they did with CSS Variables :) – Dan Gamble Aug 10 '16 at 09:02

2 Answers2

29

As of WebStorm 2016.3 this issue has been solved. As detailed in the WebStorm Blog, users of PostCSS can now install an official PostCSS plugin by navigating to Preferences > Plugins > and searching for "PostCSS support". After the plugin is installed and WebStorm has been restarted, you must identify any existing css files using PostCSS as PostCSS by going to Preferences > Languages & Frameworks > Stylesheets > Dialects and clicking on the file's CSS dialect and changing it to "PostCSS".

Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
  • 1
    Worked for me. I was stuffing around with Stylelint there for awhile, but that didn't work all that well. The plugin mentioned here worked like a charm. – Jim Doyle Aug 16 '22 at 00:06
8

Edit Evan's answer below is better now as Webstorm have released an official plugin for PostCSS WebStorm support for nesting CSS

Unfortunately, currently the only way to get it to play nice with PostCSS is to do:

css

Register *.css or *.pcss if you use that extension to treat them as Sass files inside Webstorm. You'll also need to turn off a few syntax checks Webstorm provides after you change the file type depending on what PostCSS plugins you use.

Community
  • 1
  • 1
Dan Gamble
  • 3,965
  • 1
  • 24
  • 44