Field coloring varies based on newlines

Actual Behavior

Field coloring varies depending whether the opening brace or directive is on the same line as the type definition. Especially in more complex cases (the Bar example below) it may be preferable to have directives on their own lines.

See field: String below:

Expected Behavior

Colors don’t change based on locations.

Steps to Reproduce the Problem Or Description

Example code from screenshot:

type Foo1 {
  field: String
}

type Foo2
{
  field: String
}

type Bar1 @auth(rules: [
  { allow: groups, groups: ["Admin"] }
  { allow: groups, groups: ["Everyone"], operations: [read] }
]) {
  field: String
}

type Bar2
@auth(rules: [
  { allow: groups, groups: ["Admin"] }
  { allow: groups, groups: ["Everyone"], operations: [read] }
]) {
  field: String
}

Specifications

• GraphQL for VSCode Extension Version: 0.1.7
• VSCode Version: 1.32.3
• OS Name: macOS
• OS Version: Mojave

[abc-moviestarplanet]

I just spent some hours to see if I could learn something about grammars and be able to fix it. With my very limited knowledge, what I found out was that as soon as the { is in a new line, it gets the meta.selectionset.graphql scope.

So if I modify the graphql-operation-def entry in the grammar file, to include #graphql-type-object before #graphql-selection-set then it all seemed to work fine.

Unfortunately I am unaware of side effects of this change and probably will need several more hours to learn grammars, so I’m hoping it at leasts helps someone else.

"graphql-operation-def": {
      "patterns": [
        { "include": "#graphql-query-mutation" },
        { "include": "#graphql-name" },
        { "include": "#graphql-variable-definitions" },
        { "include": "#graphql-directive" },
        { "include": "#graphql-type-object" },  // added this
        { "include": "#graphql-selection-set" }
      ]
    },

[acao]

@hkumar0132 possibly? if you’re familiar with regular expressions then definately. all these issues labelled “grammar” will just involve modifying the expressions in the grammar json files. here’s where to get started:

https://github.com/graphql/vscode-graphql#development