Styled component element with a generic parameter is not styled

[2Pacalypse-]

Sublime Text build number

4121

Example Code

const Username = styled.span<{ $isMention: boolean }>`
  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  ${props => (props.$isMention ? `color: ${blue100}` : '')}
`

JS Custom Preferences

{
    // Each configuration will be compiled into a custom syntax definition.
    // The keys are the names of the configurations,
    // and the values are objects specifying syntax options.
    "configurations": {
        "Default": {},
        "React": {
            "file_extensions": [ "js", "jsx" ],
            "flow_types": true,
            "jsx": true,
            "custom_templates": {
                "styled_components": true,
                "tags": {
                    "css": "scope:source.js.css",
                    "createGlobalStyle": "scope:source.css", // v4 and above
                    "injectGlobal": "scope:source.css", // before v4
                }
            }
        },
        "TypeScript": {
            "scope": "source.ts",
            "file_extensions": [ "ts" ],
            "typescript": true,
            "custom_templates": {
                "styled_components": true,
                "tags": {
                    "css": "scope:source.js.css",
                    "createGlobalStyle": "scope:source.css", // v4 and above
                    "injectGlobal": "scope:source.css", // before v4
                }
            }
        },
        "TypeScript (JSX)": {
            "scope": "source.tsx",
            "file_extensions": [ "tsx" ],
            "typescript": true,
            "jsx": true,
            "custom_templates": {
                "styled_components": true,
                "tags": {
                    "css": "scope:source.js.css",
                    "createGlobalStyle": "scope:source.css", // v4 and above
                    "injectGlobal": "scope:source.css", // before v4
                }
            }
        },
    },

    // These options will be used for all of your configurations, unless you override them.
    "defaults": {
        "custom_template_tags": false,
        "flow_types": false,
        "jsx": false,
    },

    // A special configuration that will be used when other syntaxes embed the `source.js` scope.
    // This exists to prevent infinite embedding loops in certain situations.
    "embed_configuration": {
        "name": "JS Custom (Embedded)",
        "scope": "source.js",
        "hidden": true,
        "file_extensions": [],
        "custom_template_tags": false,
        "custom_templates": false,
    },

    // Whenever you change one or more configurations, automatically rebuild those configurations.
    "auto_build": true,

    // Whenever you run the close_tag command in these scopes, run jsx_close_tag instead.
    // Set to `false` to disable.
    "jsx_close_tag": "source.js, source.jsx, source.ts, source.tsx",

    // When you remove a configuration, reassign all views from that syntax to this one. 
    // Set to `false` to disable.
    "reassign_when_deleting": "scope:source.js",
}

Configuration name

No response

Description

When using generics with styled component, the element name is not styled, e.g.

Without the generics:

Notice the color of span keyword.

[Thom1729]

Should be fixed in 4.2.2.