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