How to enable syntax highlighting for embedded LESS styles in WebStorm?

I am using Vue.js for one of my frontend projects.

As you know, Vue comes with special syntax for components - each component can be declared in a single .vue file. That means, that you can define all related stuff in a single file like this:

<tamplate>
    ...component template goes here...
</template>

<script>
    ...component code goes here...
</script>

<style>
    ...component style goes here...
</style>

Of course vue support in various IDEs isn't perfect yet. Vue is relatively young framework, but I think it will be popular very soon. It looks so straightforward and predictable after Angular that I even decide to use it in all upcoming frontend projects, but it is, of course, another story.

Ok, WebStorm doesn't know anything about .vue files, but vue looks like html, so you can solve that problem easely - just add *.vue pattern to list of patterns for HTML file type (settings -> editor -> file types).

After that tweak everything works fine until you try to use non-css styles - for some reasons WebStorm fails to highlight embedded styles with type text/less and so on. I tried to solve it in a different ways:

<style type="text/css></style>

<style rel="stylesheet/less"></style>

...but without any success.

Fortunately vue-loader (that I am using with WebPack in order to build my project) supports another syntax of .vue files, which allows to declare template, code and style in a separate files. It is ok, but I think that single file per component is better (at least it's easier to manage). And now I am forced to declare my styles separately because I can't let WebStorm to highlight embedded LESS styles.

I tried to use WebStorm language injections, but without any success too (or I just miss something in my WebStorm configuration).

So, the final question is: how to enable syntax highlighting for embedded LESS styles in WebStorm 11?

Solution

Such support is not possible in WebStorm v11/PhpStorm v10 -- only CSS is available as injectable language.

However the next version (WebStorm v12/PhpStorm v11) already supports it -- just use appropriate rel="stylesheet/less" (in case of LESS) attribute on your <style> tag.

If you want to use another attribute or value to identify what language is meant to be used in your <style> tags or enable this for another (already supported by IDE) CSS-preprocessor (e.g. Sass/SCSS/etc) -- create custom injection rule at Settings/Preferences | Editor | Language Injections.

As of 2017.1 version some other improvements/changes were made -- see WEB-20921 : Add support for valid HTML syntax for including LESS/SCSS in <style> tags ticket for details.