custom_templates don't work with TypeScript language service plugin

[trongthanh]

I could find some related issues, e.g: #59, #63, #68 but they're now closed.

I'm placing jsconfig.json inside my repos to enable TS service for code hinting and implicit type checking for .js files. It's working until I enable styled_components for custom_templates.

I've tried several ways but still could not have TypeScript language service activated for a JS source file that has styled component or custom tag templates in it.

My JSCustom config:

{
  "defaults": {
    "flow_types": false,
    "jsx": true,
    "eslint_directives": true,
    "custom_templates": {
      "styled_components": true,
      "clear_all_scopes": true,
      "tags": {
        "css": "scope:source.scss",
      }
    }
  }
}

I'm using ST3 Dev build 3210; latest JS Custom cloned from github 2.3.2; TypeScript plugin 3.9.2.

[Thom1729]

So it works if you disable styled_components? That's odd. I don't use LSP myself (probably should), but I'll look into it.

Does it help if you remove clear_all_scopes? That option's basically just a hack for Emmet compatibility, and I think in #59 it was interfering with LSP.

[trongthanh]

@Thom1729 I've tried removing clear_all_scopes and it didn't work. I also observe this:

With styled_components on, if I don't use styled component tags in a file, TS LSP works. However, as soon as I add styled component tags, LSP stop working.

Here's a minimal example for you to test:

import { styled } from 'linaria/react';

const AboutHeader = styled.h1`
  font-weight: bold;
  font-size: 2em;
`;

export default function About(props) {
  return <AboutHeader {...props}>About Us</AboutHeader>;
}

Below is a screenshot of TS LSP working (note the underlined props symbol and tooltip hint with implicit type inference) before I added styled.h1 to the template string.

I'm starting to feel that this is because of TS plugin to prevent itself from parsing the file further when it detect on change of the scope name at template string.

[Thom1729]

I wonder if this is because the Styled Components syntax is applying the source.js.css scope. I'm not set up with LSP right now, so I probably won't get around to testing it for a few days.

[trongthanh]

Just want to update that this issue seems to be gone with Sublime Text 4 and latest JS Custom.

My setup:

• Sublime Text 4 Build 4090 on MacOS
• JS Custom package installed via Git clone (currently @ 1ed59ef)
• TypeScript package @ v.3.9.2

JS Custom config:

{
  "defaults": {
    "flow_types": false,
    "jsx": true,
    "eslint_directives": true,
    "custom_templates": {
      "styled_components": true,
      "clear_all_scopes": false,
    }
  }
}