Is there a way to use multiple languages in a single PhpStorm file?

Question

So I have a potentially new use case. I'm trying to adopt a Single-File-Component method of creating code and templates for Drupal 8 content. There is a great Drupal module which facilities this (https://www.drupal.org/project/sfc), but I'd like to improve the code hinting and syntax highlighting for these files in PhpStorm 2020.1.

I have to use the .sfc extension. I added this extension to the PHP file type and for the most part, everything works as expected. The file starts out as XHTML and then there is a PHP section. Both HTML/XHTML and PHP are correctly highlighted and hinted. The .sfc file also contains JavaScript and CSS and both of those sections are also correctly highlighted and hinted, presumably because they are handled by PhpStorm's XHTML or PHP recognition.

The files looks something like this:

<template>
  <article class="test-class">
    <h2>Test content</h2>
    <p>This is some test content.</p>
  </article>
</template>

<style>
  .test-class {
    background-color: red;
  }
</style>

<script data-type="attach">
  console.log('JavaScript attached');
</script>

<?php
$definition = [
  'overrides' => [
    'node__article__teaser',
  ],
];

There is a lot more to the SFC modules` capabilities and this is a very basic template. By the way, the <template> tag is used to extract the Twig template out of the the PHP/XHTML document. That tag is not in the final result.

The <style> and <script> tags are what presumably triggers recognition of JavaScript and CSS. My problems start when I want to use SCSS and Twig instead of CSS and XHTML. Something like this:

<template>
  <article {{ attributes.addClass('test-class') }}>
    {{ content.title }}
    {{ content.body }}
  </article>
</template>

<style>
  .test-class {
    background-color: red;
    p:last-child {
      margin-bottom: 0;
    }
  }
</style>

<script data-type="attach">
  console.log('JavaScript attached');
</script>

<?php
$definition = [
  'overrides' => [
    'node__article__teaser',
  ],
];

I of course don't get proper highlighting/hinting/tabbing for the Twig or SCSS code blocks. I tried various versions of language injection, but they didn't seem to work either. Things like:

<template>
  <!-- language=twig -->
  ...
</template>

<style>
  /** language=scss **/
  ...
</style>

I'm assuming I need to create some sort of new language injection configuration for SCSS and Twig inside of a PHP file, but I can't find good documentation on how to do that.

Any suggestions?

SCSS -- Yes, Twig -- Nope as it's not an injectable language (the way how it's implemented in IDE) -- you cannot inject it into a string or any other place, it can only work with actual files (where whole file is treated as Twig file .. but then you cannot have PHP inside...) — LazyOne, Jun 21 '20 at 18:05
For Twig -- maybe you can use another language that is Twig alike? Mustache or alike (requires separate plugin; maybe it is implemented in required way and can be injected where needed). Have not tested this so cannot say for sure but worth checking out. — LazyOne, Jun 21 '20 at 18:10
*"Even without adding a custom Language Injection rule."* Yeah, not any more. I just had such rule created for many years already (before it was fixed in IDE). Found it now: https://stackoverflow.com/a/36331588/783119 — LazyOne, Jun 21 '20 at 18:15
This is for Jade (see https://stackoverflow.com/a/29062183/783119), the same situation is for Twig. Check it out (the PhpStorm devs comments): https://youtrack.jetbrains.com/issue/WI-38370 — LazyOne, Jun 21 '20 at 18:19
I see that SCSS is available as a language ID for a custom Language Injection config, but Twig is not there. I thought about creating a variation of the SCSS one you have that would recognize ``` — JonMcL, Jun 21 '20 at 18:24
@LazyOne It looks like they did add Jade (and others) as injectable languages to IntelliJ: https://youtrack.jetbrains.com/issue/IDEA-106449. I added a new feature request for Twig in PhpStorm: https://youtrack.jetbrains.com/issue/WI-53909 — JonMcL, Jun 21 '20 at 18:57

score 1 · Accepted Answer · answered Jun 21 '20 at 19:07

SCSS -- Yes, Twig -- Nope.

Twig:

Not possible as is not an injectable language, it's a templating language that can only be used as a 'master' language for other languages. E.g. check comments here for Twig injectable into a PHP string: https://youtrack.jetbrains.com/issue/WI-38370).

You may try Handlebars/Mustache instead (separate plugin): it has Twig-alike syntax so may cover at least some of the syntax (it is injectable).

SCSS:

Use <style type="text/scss"> so IDE can identify this one differently to standard plain CSS (available since 2017.1 version: https://stackoverflow.com/a/36331588/783119).

In older versions (2016.3 and older) you would also need to create custom Language Injection rule, like this one:

score 0 · Answer 2 · answered Jun 21 '20 at 19:09

As explained to me by @LazyOne, I can solve the SCSS issue by changing my .sfc file to be like:

<style type="text/scss">
  .test-class {
    background-color: red;
    p:last-child {
      margin-bottom: 0;
    }
  }
</style>

It appears that injecting the Twig template language into another language is not currently possible with PhpStorm. I have opened a feature request to see if that can be enabled: https://youtrack.jetbrains.com/issue/WI-53909

Is there a way to use multiple languages in a single PhpStorm file?

2 Answers2