Grammars fail to apply external includes from captures property

[roydukkey]

Issue Type: Bug

As I've been trying fix some issues with the SCSS/SASS grammars I've notices that including patterns from the CSS grammar does not work from the captures property.

Here I have a grammar that replicates the issue. You'll notice the external include for source.css#color-keywords is not applied, but the replicated internal include is.

{
  "name": "SASS",
  "scopeName": "source.sass",
  "patterns": [
    {
      "name": "variable.interpolation.sass",
      "match": "(#{)(.*)(})",
      "captures": {
        "1": {
          "name": "punctuation.definition.interpolation.begin.bracket.round.sass"
        },
        "2": {
          "patterns": [
            {
              "include": "#strings"
            },
            {
              "include": "source.css#color-keywords"
            }
          ]
        },
        "3": {
          "name": "punctuation.definition.interpolation.end.bracket.round.sass"
        }
      }
    },
    {
      "name": "variable.interpolation.sass",
      "match": "(\\$\\()(.*)(\\))",
      "captures": {
        "1": {
          "name": "punctuation.definition.interpolation.begin.bracket.curly.sass"
        },
        "2": {
          "patterns": [
            {
              "include": "#strings"
            },
            {
              "include": "#color-keywords"
            }
          ]
        },
        "3": {
          "name": "punctuation.definition.interpolation.end.bracket.curly.sass"
        }
      }
    }
  ],
  "repository": {
    "strings": {
      "patterns": [
        {
          "name": "string.quoted.single.sass",
          "begin": "'",
          "end": "'",
          "beginCaptures": {
            "0": {
              "name": "punctuation.definition.string.begin.sass"
            }
          },
          "endCaptures": {
            "0": {
              "name": "punctuation.definition.string.end.sass"
            }
          }
        },
        {
          "name": "string.quoted.double.sass",
          "begin": "\"",
          "end": "\"",
          "beginCaptures": {
            "0": {
              "name": "punctuation.definition.string.begin.sass"
            }
          },
          "endCaptures": {
            "0": {
              "name": "punctuation.definition.string.end.sass"
            }
          }
        }
      ]
    },
    "color-keywords": {
      "patterns": [
        {
          "match": "(?i)(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])",
          "name": "support.constant.color.w3c-standard-color-name.css"
        },
        {
          "match": "(?xi) (?<![\\w-])\n(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood\n|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan\n|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange\n|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise\n|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen\n|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki\n|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow\n|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray\n|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue\n|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise\n|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered\n|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum\n|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell\n|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato\n|transparent|turquoise|violet|wheat|whitesmoke|yellowgreen)\n(?![\\w-])",
          "name": "support.constant.color.w3c-extended-color-name.css"
        },
        {
          "match": "(?i)(?<![\\w-])currentColor(?![\\w-])",
          "name": "support.constant.color.current.css"
        },
        {
          "match": "(?xi) (?<![\\w-])\n(ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|ButtonHighlight|ButtonShadow\n|ButtonText|CaptionText|GrayText|Highlight|HighlightText|InactiveBorder|InactiveCaption\n|InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow\n|ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)\n(?![\\w-])",
          "name": "invalid.deprecated.color.system.css"
        }
      ]
    }
  }
}

VS Code version: Code 1.50.1 (d2e414d9e4239a252d1ab117bd7067f125afd80a, 2020-10-13T14:53:05.704Z) OS version: Darwin x64 19.6.0

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz (12 x 2900)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|1, 1, 1| |Memory (System)|32.00GB (4.67GB free)| |Process Argv|| |Screen Reader|no| |VM|0%|

Extensions (8)

Extension|Author (truncated)|Version ---|---|--- vscode-eslint|dba|2.1.13 gitlens|eam|10.2.2 EditorConfig|Edi|0.15.1 vscode-language-rust|miq|0.14.0 csharp|ms-|1.23.4 theme-chimera|roy|0.4.0 rust|rus|0.7.8 code-spell-checker|str|1.9.2 (1 theme extensions excluded)

[aeschli]

I see this working in the scss and less grammar. Are you sure it's an issue with the vscode-textmate engine?

[roydukkey]

I see this working in the scss and less grammar. Are you sure it's an issue with the vscode-textmate engine?

I'm having trouble finding the situation in those grammars. Could you please provide line references?

To be clear, this works, but this external include is not nested under the captures property. (This is also not equivalent to the pattern above. ie. newlines)

{
    "name": "variable.interpolation.sass",
    "begin": "#{",
    "end": "}",
    "beginCaptures": {
        "0": {
            "name": "punctuation.definition.interpolation.begin.bracket.curly.sass"
        }
    },
    "endCaptures": {
        "0": {
            "name": "punctuation.definition.interpolation.end.bracket.curly.sass"
        }
    },
    "patterns": [
        {
            "include": "#strings"
        },
        {
            "include": "source.css#color-keywords"
        }
    ]
},

[NoelAbrahams]

Rule for Sass @include not working

Ran into a similar problem when trying to add a rule for Sass @include:

Added Rule

{
    "scope": ["meta.at-rule.include.scss"],
    "settings": {
        "foreground": "#f00"
    }
}

But this does not work: there is no change to the colour in the editor.

[RedCMD]

entity.name.function.scss is higher in the scope list and thus still takes president over meta.at-rule.include.scss @NoelAbrahams

[NoelAbrahams]

@RedCMD thanks.

I didn't try that because I thought that would apply the colour to all Sass functions (calc etc). But I seem to be mistaken. Adding the entity.name.function.scss is applying the styling to just @include