Anything I can do about another language embed in js files?

[RedHatter]

I use a custom syntax to embed css in my javascript files. At build time the css gets collected into a css file and removed from the javascript. Since it is not valid javascript ide-typescript throws a lot of errors. Is there any way I can tell ide-typescript to ignore a portion of the file?

Here's a simple example of my embed css.

$('<p>').appendTo('body')

<style>
  p {
    background-color: red;
  }
</style>

[Arcanemagus]

Please follow #11 for discussion on this.

[winstliu]

@Arcanemagus This is slightly different as this is embedding a language into JS, not embedding JS into a language.

[RedHatter]

I saw issue #11 but as @50Wliu mentioned my case is slightly different. I wrote a grammar definition so the css is now in the correct scope. I'm not sure if that can be leveraged somehow.

{
  "name": "ES6 with embedded CSS",
  "scopeName": "source.js.jsx.css",
  "foldingStartMarker": "(/\\*|{|\\()",
  "foldingEndMarker": "(\\*/|\\}|\\))",
  "firstLineMatch": "^#!\\s*/.*\\b(node|js)$\\n?",
  "limitLineLength": false,
  "fileTypes": [
    "js",
    "es6",
    "es",
    "babel",
    "jsx",
    "flow",
    "mjs"
  ],
  "patterns": [
    {
      "begin": "(<)(style)(>)",
      "end": "(</)(style)(>)",
      "captures": {
        "1": { "name": "punctuation.definition.tag" },
        "2": { "name": "entity.name.tag.style" },
        "3": { "name": "punctuation.definition.tag" }
      },
      "name": "source.css.embedded",
      "patterns": [
        {
          "include": "source.css"
        }
      ]
    },
    { "include": "source.js.jsx" }
  ]
}

[damieng]

Alas it's not just grammar scopes. The underlying language server has to know how to deal with the files that contain the grammar. i.e. ide-typescript would need to understand enough html to get to the

[Arcanemagus]

@damieng This is even more complex than that, they have created their own language of "Javascript that allows <style> directly in it".

[damieng]

Yeah, there's no way our existing atom-languageclient infrastructure is going to be able to support that without significant changes to the language server protocol it uses - it's all effectively file based with the grammars just used for activation and autocompletion.

[RedHatter]

We couldn't make use of the Files extensions to LSP to only send what needs to be processed?

[Arcanemagus]

@RedHatter The problem is that ide-typescript only understands the Typescript language. Since that is a superset of Javascript it mostly works for Javascript as well.

No tooling out there, other than your custom build process, is able to understand your ES6 with embedded CSS language. In order to make it work with ide-typescript you would need to somehow pre-process the file before it ever gets to the LSP.

[damieng]

Additionally that File extensions to LSP is a community proposal from about a year ago that seems to have gone nowhere. There's no mention of it at the actual spec site https://github.com/Microsoft/language-server-protocol