sveltejs / svelte-atom Goto Github PK

Are you thinking about giving support to PostCSS? At the moment it doesn't work, if I add lang="scss" to the style tag, sapper doesn't compile.

The language server has a host of settings, some of which should probably be exposed to the user as config options in the plugin.

Passing initial configuration and configuration updates seems to be well supported by the Atom LS client, so this shouldn't be too hard to implement.

I use less in my style tags and svelte-atom attempts to lint it as normal css.

This plugin doesn't seem to support svelte 3. (I got a linting error "directive values should not be wrapped")

The syntax highlighting is not working on GitHub, both web and mobile, for the <script> and <style> sections of .svelte files. The template section seems to be unaffected and is still working (including svelte-specific tags, like {#each}) as long as you aren't using <template> tags (I didn't know this until opening this Issue and making the examples below).

Opening this Issue here because this repo is what linguist is pointing to for svelte syntax highlighting in GitHub. A handful of Issues have been opened in the related repos (GitHub's community and linguist) and I even sent a bug ticket to GitHub mobile through the app, but they all seem to suggest it might be a bug in the actual grammar. This lines up with my observations, as I only noticed this behavior after this github-linguist/linguist#5963 was merged.

This is the most recent reply from linguist: github-linguist/linguist#5830 (comment)

I don't know anything about syntax highlighting grammars, so I can't suggest any ideas. And I'm not even sure if you were aware that linguist is now using this repo for GitHub -- in which case I'd be fine with closing the issue as wontfix and maybe trying to revert the PR in linguist.

EXAMPLES:

(First two are just using markdown codeblocks with ```svelte, the rest are images -- first two are web on Chrome, third is mobile on iOS)

Without <template> tag:

<script>
  const notWorking = 'I am not highlighted';
</script>

{#each something as s}
  <p on:click={doSomething}>
    Our tags are highlighted correctly
  </p>
{/each}

<style>
  .not-highlighted {
    color: 'black'; // because it isn't highlighted
  }
</style>

With <template> tag:

<script>
  const notWorking = 'I am not highlighted';
</script>

<template>
  {#each something as s}
    <p on:click={doSomething}>
      Now we aren't working.
    </p>
  {/each}
</template>

<style>
  .not-highlighted {
    color: 'black'; // because it isn't highlighted
  }
</style>

Related issues:

• github-linguist/linguist#5830
• community/community#13004
• community/community#20556

In any svelte component.

Press command + / on the code within the script or style tags. The code gets commented using html comments instead of // for the script and /* */ for the css.

Following the tutorial over at https://svelte.dev/tutorial/declaring-props, I've declared a component which looks like this:

<script>
  export let answer;
</script>

<p>The answer is {answer}</p>

However, I get a linter error from "svelte" saying that "A component can only have a default export". Clearly this must be wrong.

Any ideas of what could be causing this?

I'm too much of an idiot to fix it myself.

// the symbol | denotes where the cursor is

<div>|</div>

Pressing enter should do this:

<div>
    |
</div>

Currently it does this:

<div>
|</div>

When JS is used as the lang for a Svelte component script, either explicitly (<script lang="js">) or implicitly (<script>), presence of ?. or ?? in the script breaks syntax highlighting or the part of the code after the script (with the markup apparently highlighted with JS rules).

For example, this snippet breaks:

<script>
  const x = a?.b
</script>

<div>Hello</div>

Or this one:

<script>
  const x = a ?? b
</script>

<div>Hello</div>

Oh? This even breaks in Github! What grammar are they using?

But with our new grammar this works (not on Github -- what the hell??):

<script lang="ts">
  const x = a ?? b
</script>

<div>Hello</div>

I have confirmed that changing source.js injections to source.ts fixes the problem, so that seems to indicate that the problem originates in the language-javascript grammar. Or maybe an incompatibility between something it contains and Atom's (and Github's?) implementation of TextMate grammars.

So an easy fix would be to change all injections of source.js to source.ts in our grammar. language-typescript is a core grammar bundled with Atom, so everyone should have it. But this fix would mean JS only users would noticeably get a different highlighting of their JS Svelte components and their standard .js files.

Would that be acceptable, at least as a temporary quick fix?

In Svelte 3 syntax highlighting doesn’t work properly:

The warnings are a distraction because things work fine without addressing them.