intellij-rainbow-brackets Further Pug-related requests

Your programming language(s)

Expected Behavior

In .vue files, Pug/Jade Support carries through to a nested document in between <template lang="pug"> and </template>, as the standard HTML/XML does.
Pug support includes support for Rainbow indent guides

Current Behavior

In .vue files, HTML in the <template> is recognised and handled as expected.
Pug/Jade Support appears to be recognised only at the file level - A nested document as in between <template lang="pug"> and </template>,
In pug files, Indent guides are the standard grey despite settings.

Code snippet for reproduce (for bugs)

Vue file

<template lang="pug">
  div
    h1 Level 1 Header
    h2 Level 2 Header
    div
      span Etc
      p
        | More content
        b Nested bold
        | Etc
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    name: "example"
  });
</script>

<style scoped>

</style>

Your Environment

Plugin version: 6.15

WebStorm 2020.3.2 Build #WS-203.7148.54, built on January 25, 2021 Licensed to Connor McCormick Subscription is active until April 15, 2021. Runtime version: 11.0.9.1+11-b1145.77 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. Windows 10 10.0 GC: ParNew, ConcurrentMarkSweep Memory: 1960M Cores: 12 Registry: ide.balloon.shadow.size=0, js.debugger.webconsole=false Non-Bundled Plugins: com.almightyalpaca.intellij.plugins.discord, mobi.hsz.idea.gitignore, tv.twelvetone.intellij.plugins.intellivue, com.intellij.lang.jsgraphql, izhangzhihao.rainbow.brackets, ru.adelf.idea.dotenv, PsiViewer

Feb 02 '21 23:02 CS-Birb

Thank you greatly for implementing #897 - Has been a lovely addition to my daily workflow, and am happy to now be a pledger for this project. Sorry to become "that pug-obsessed guy"

Feb 02 '21 23:02 CS-Birb

I will look into it in one week or two, The inline-document already supported for JSX, it should not be hard for Pug.

Feb 03 '21 00:02 izhangzhihao

PSI structure:

HtmlFile:Dummy.vue(0,315)
  PsiElement(HTML_DOCUMENT)(0,315)
    PsiElement(XML_PROLOG)(0,0)
      <empty list>
    HtmlTag:template(0,173)
      XmlToken:XML_START_TAG_START('<')(0,1)
      XmlToken:XML_NAME('template')(1,9)
      PsiWhiteSpace(' ')(9,10)
      PsiElement(XML_ATTRIBUTE)(10,20)
        XmlToken:XML_NAME('lang')(10,14)
        XmlToken:XML_EQ('=')(14,15)
        PsiElement(XML_ATTRIBUTE_VALUE)(15,20)
          XmlToken:XML_ATTRIBUTE_VALUE_START_DELIMITER('"')(15,16)
          XmlToken:XML_ATTRIBUTE_VALUE_TOKEN('pug')(16,19)
          XmlToken:XML_ATTRIBUTE_VALUE_END_DELIMITER('"')(19,20)
      XmlToken:XML_TAG_END('>')(20,21)
      ASTWrapperPsiElement(JADE_EMBEDDED_WRAPPER: FULL_JADE_EMBEDDED_CONTENT)(21,162)
        PsiElement(DOCUMENT)(21,162)
          PsiElement(INDENT)('\n  ')(21,24)
          JadeTagImpl(TAG)(24,161)
            XmlToken:XML_TAG_NAME('div')(24,27)
            PsiElement(INDENT)('\n    ')(27,32)
            JadeTagImpl(TAG)(32,49)
              XmlToken:XML_TAG_NAME('h1')(32,34)
              XmlText(34,49)
                PsiWhiteSpace(' ')(34,35)
                XmlToken:XML_DATA_CHARACTERS('Level')(35,40)
                PsiWhiteSpace(' ')(40,41)
                XmlToken:XML_DATA_CHARACTERS('1')(41,42)
                PsiWhiteSpace(' ')(42,43)
                XmlToken:XML_DATA_CHARACTERS('Header')(43,49)
            PsiElement(INDENT)('\n    ')(49,54)
            JadeTagImpl(TAG)(54,71)
              XmlToken:XML_TAG_NAME('h2')(54,56)
              XmlText(56,71)
                PsiWhiteSpace(' ')(56,57)
                XmlToken:XML_DATA_CHARACTERS('Level')(57,62)
                PsiWhiteSpace(' ')(62,63)
                XmlToken:XML_DATA_CHARACTERS('2')(63,64)
                PsiWhiteSpace(' ')(64,65)
                XmlToken:XML_DATA_CHARACTERS('Header')(65,71)
            PsiElement(INDENT)('\n    ')(71,76)
            JadeTagImpl(TAG)(76,161)
              XmlToken:XML_TAG_NAME('div')(76,79)
              PsiElement(INDENT)('\n      ')(79,86)
              JadeTagImpl(TAG)(86,94)
                XmlToken:XML_TAG_NAME('span')(86,90)
                XmlText(90,94)
                  PsiWhiteSpace(' ')(90,91)
                  XmlToken:XML_DATA_CHARACTERS('Etc')(91,94)
              PsiElement(INDENT)('\n      ')(94,101)
              JadeTagImpl(TAG)(101,161)
                XmlToken:XML_TAG_NAME('p')(101,102)
                PsiElement(INDENT)('\n        ')(102,111)
                PsiElement(PIPED_TEXT)(111,125)
                  PsiElement(PIPE)('|')(111,112)
                  XmlText(112,125)
                    PsiWhiteSpace(' ')(112,113)
                    XmlToken:XML_DATA_CHARACTERS('More')(113,117)
                    PsiWhiteSpace(' ')(117,118)
                    XmlToken:XML_DATA_CHARACTERS('content')(118,125)
                PsiElement(INDENT)('\n        ')(125,134)
                JadeTagImpl(TAG)(134,147)
                  XmlToken:XML_TAG_NAME('b')(134,135)
                  XmlText(135,147)
                    PsiWhiteSpace(' ')(135,136)
                    XmlToken:XML_DATA_CHARACTERS('Nested')(136,142)
                    PsiWhiteSpace(' ')(142,143)
                    XmlToken:XML_DATA_CHARACTERS('bold')(143,147)
                PsiElement(INDENT)('\n        ')(147,156)
                PsiElement(PIPED_TEXT)(156,161)
                  PsiElement(PIPE)('|')(156,157)
                  XmlText(157,161)
                    PsiWhiteSpace(' ')(157,158)
                    XmlToken:XML_DATA_CHARACTERS('Etc')(158,161)
          PsiElement(EOL)('\n')(161,162)
      XmlToken:XML_END_TAG_START('</')(162,164)
      XmlToken:XML_NAME('template')(164,172)
      XmlToken:XML_TAG_END('>')(172,173)
    PsiWhiteSpace('\n\n')(173,175)
    HtmlTag:script(175,285)
      XmlToken:XML_START_TAG_START('<')(175,176)
      XmlToken:XML_NAME('script')(176,182)
      PsiWhiteSpace(' ')(182,183)
      PsiElement(XML_ATTRIBUTE)(183,192)
        XmlToken:XML_NAME('lang')(183,187)
        XmlToken:XML_EQ('=')(187,188)
        PsiElement(XML_ATTRIBUTE_VALUE)(188,192)
          XmlToken:XML_ATTRIBUTE_VALUE_START_DELIMITER('"')(188,189)
          XmlToken:XML_ATTRIBUTE_VALUE_TOKEN('ts')(189,191)
          XmlToken:XML_ATTRIBUTE_VALUE_END_DELIMITER('"')(191,192)
      XmlToken:XML_TAG_END('>')(192,193)
      JSEmbeddedContent:MOD_TS_EMBEDDED_CONTENT(193,276)
        PsiWhiteSpace('\n  ')(193,196)
        ES6ImportDeclaration(196,218)
          PsiElement(JS:IMPORT_KEYWORD)('import')(196,202)
          PsiWhiteSpace(' ')(202,203)
          ES6ImportedBinding:Vue(203,206)
            PsiElement(JS:IDENTIFIER)('Vue')(203,206)
          PsiWhiteSpace(' ')(206,207)
          ES6FromClause(207,217)
            PsiElement(JS:FROM_KEYWORD)('from')(207,211)
            PsiWhiteSpace(' ')(211,212)
            PsiElement(JS:STRING_LITERAL)('"vue"')(212,217)
          PsiElement(JS:SEMICOLON)(';')(217,218)
        PsiWhiteSpace('\n\n  ')(218,222)
        ES6ExportDefaultAssignment(222,275)
          PsiElement(JS:EXPORT_KEYWORD)('export')(222,228)
          PsiWhiteSpace(' ')(228,229)
          PsiElement(JS:DEFAULT_KEYWORD)('default')(229,236)
          PsiWhiteSpace(' ')(236,237)
          JSCallExpression(237,274)
            JSReferenceExpression(237,247)
              JSReferenceExpression(237,240)
                PsiElement(JS:IDENTIFIER)('Vue')(237,240)
              PsiElement(JS:DOT)('.')(240,241)
              PsiElement(JS:IDENTIFIER)('extend')(241,247)
            JSArgumentList(247,274)
              PsiElement(JS:LPAR)('(')(247,248)
              JSObjectLiteralExpression(248,273)
                PsiElement(JS:LBRACE)('{')(248,249)
                PsiWhiteSpace('\n    ')(249,254)
                JSProperty:name(254,269)
                  PsiElement(JS:IDENTIFIER)('name')(254,258)
                  PsiElement(JS:COLON)(':')(258,259)
                  PsiWhiteSpace(' ')(259,260)
                  JSLiteralExpression(260,269)
                    PsiElement(JS:STRING_LITERAL)('"example"')(260,269)
                PsiWhiteSpace('\n  ')(269,272)
                PsiElement(JS:RBRACE)('}')(272,273)
              PsiElement(JS:RPAR)(')')(273,274)
          PsiElement(JS:SEMICOLON)(';')(274,275)
        PsiWhiteSpace('\n')(275,276)
      XmlToken:XML_END_TAG_START('</')(276,278)
      XmlToken:XML_NAME('script')(278,284)
      XmlToken:XML_TAG_END('>')(284,285)
    PsiWhiteSpace('\n\n')(285,287)
    HtmlTag:style(287,315)
      XmlToken:XML_START_TAG_START('<')(287,288)
      XmlToken:XML_NAME('style')(288,293)
      PsiWhiteSpace(' ')(293,294)
      PsiElement(XML_ATTRIBUTE)(294,300)
        XmlToken:XML_NAME('scoped')(294,300)
      XmlToken:XML_TAG_END('>')(300,301)
      PsiElement(CSS_LAZY_STYLESHEET)(301,307)
        PsiElement(CSS_STYLESHEET)(301,307)
          PsiWhiteSpace('\n    \n')(301,307)
          PsiElement(CSS_RULESET_LIST)(307,307)
            <empty list>
      XmlToken:XML_END_TAG_START('</')(307,309)
      XmlToken:XML_NAME('style')(309,314)
      XmlToken:XML_TAG_END('>')(314,315)

Feb 03 '21 13:02 izhangzhihao

For rainbow indent guides of Pug lang, I think Indent Rainbow is a better choice:

Feb 03 '21 13:02 izhangzhihao

But it seems Indent Rainbow does not work well with vue & pug:

You can submit a feature request to Indent Rainbow.

Feb 03 '21 13:02 izhangzhihao

intellij-rainbow-brackets-6.15.zip

Please try this build snapshot.

Feb 03 '21 13:02 izhangzhihao

Thanks for the quick update! From what I can see, this change successfully adds in support for Pug in .vue documents!

And thank you for the suggestion of Indent Rainbow - It does seem to work for my needs (I assume my example code had 2-spaced indents while the default settings used 4-spaced), though unfortunately isn't quite as subtle as the Indent guides provided by Rainbow Brackets.