Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: independent language server for SCSS, Sass indented and CSS #237

Merged
merged 23 commits into from
Sep 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .scripts/release.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ async function call(command) {
async function run() {
await call(`git checkout main`);
await call(`git pull`);
await call(`npm run clean`);
await call(`npm clean-install`);
await call(`npm run build`);
await call(`npm run release`);
Expand Down
6 changes: 3 additions & 3 deletions docs/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Some features include:
- Workspace-wide code navigation and refactoring, such as Rename Symbol.
- Rich documentation through [SassDoc][sassdoc].
- Language features for [`%placeholders`][placeholder], both when using them and writing them.
- Support for both SCSS and intended [syntaxes].
- Support for both SCSS and intended [syntaxes], as well as CSS.

![](./images/highlight-reel.gif)

Expand All @@ -20,11 +20,11 @@ You can find the extension here:
- On the [Open VSX Registry][openvsx].
- In the [Releases section on GitHub][ghreleases].

See the User guide section to learn more about what the extension can do.
See the User guide section to learn more about what the extension can do, or jump into [Settings](./user-guide/settings.md).

## Some Sass Language Server

Some Sass is also a language server using the [Language Server Protocol (LSP)][lsp].
Some Sass is also a language server using the [Language Server Protocol (LSP)][lsp]. It can be used for both SCSS, Sass (indented) and CSS.

The language server is [published on npm][npm], and can be used with any editor that has an LSP client. See [Getting started](./language-server/getting-started.md) to learn more.

Expand Down
Binary file added docs/src/images/usage/settings-built-in.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 21 additions & 19 deletions docs/src/language-server/configure-a-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,43 @@

An editor needs a language client for the [Language Server Protocol (LSP)][lsp] to use a language server.

To configure a client for an editor that doesn't have one yet, check the documentation for your editor to see if it supports LSP natively. If not, there may be an extension, add-on or plugin that adds support for LSP.
Your editor [may have a client already](./existing-clients.md). If not, check the documentation for your editor to see if it supports LSP natively. There may be an extension, add-on or plugin that adds support for LSP if it's not built in.

## Language clients

This list of [language client implementations][languageclients] may be a helpful starting point. You can also look at how [existing clients](./existing-clients.md) are set up.

### Log messages sent by VS Code to the server

If you're having trouble it might be helpful to compare your client with VS Code's. To log the messages sent between VS Code and the language server, add this to [your `settings.json`](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson) (thank you to [Stefan Schlichthärle](https://www.sscit.de/2021/04/15/trace-lsp-in-vscode.html)).

```json
"some-sass.trace.server": "verbose"
```

Now you can open a Sass file, then open the Output panel (View menu -> Output) to see the messages.

## Settings

The language server requests settings via the [`workspace/configuration` message](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#workspace_configuration), on the `somesass` key. All fields are optional.
The language server requests [settings](https://wkillerud.github.io/some-sass/user-guide/settings.html) via the [`workspace/configuration` message](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#workspace_configuration), on the `somesass` key. All fields are optional.

You can also configure the language server by sending the [`workspace/didChangeConfiguration` message](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#workspace_didChangeConfiguration).

While settings keys are documented with dot-notation, the shape of the settings is a nested object.
While settings keys are documented with dot-notation, the shape of the settings is a nested object. Your editor may be able to translate from dot-notation to a properly formated object, but not every editor allows this.

For example, while we may document `"somesass.loadPaths": []` (and write it this way in `settings.json` in Code), the actual shape of the settings object sent to the server looks like this.
For example, while we may document `"somesass.workspace.loadPaths": []` (and write it this way in `settings.json` in VS Code), the actual shape of the settings object sent to the server looks like this.

```json
{
"settings": {
"somesass": {
"loadPaths": []
"workspace": {
"loadPaths": []
}
}
}
}
```

## Existing clients

This list of [language client implementations][languageclients] may be a helpful starting point. You may also want to look at [existing clients](./existing-clients.md).

### Log messages sent by VS Code to the server

If you're having trouble it might be helpful to compare your client with VS Code's. To log the messages sent between VS Code and the language server, add this to [your `settings.json`](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson) (thank you to [Stefan Schlichthärle](https://www.sscit.de/2021/04/15/trace-lsp-in-vscode.html)).

```json
"some-sass.trace.server": "verbose"
```

Now you can open a Sass file, then open the Output panel (View menu -> Output) to see the messages.

[lsp]: https://microsoft.github.io/language-server-protocol/
[languageclients]: https://microsoft.github.io/language-server-protocol/implementors/tools/
2 changes: 1 addition & 1 deletion docs/src/language-server/existing-clients.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ In addition to the extension for Visual Studio Code and VSCodium,
these are editors with ready-configured clients, maintained by the community.

<!-- Sort alphabetically. Add new pages to SUMMARY.md as well. -->

- [Helix](./helix.md)
- [Neovim](./neovim.md)

18 changes: 15 additions & 3 deletions docs/src/language-server/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

Some Sass is a language server using the [Language Server Protocol (LSP)][lsp].

The language server is [published independently to npm][npm], and can be used with any editor that has an LSP client. The server is designed to run alongside the [VS Code CSS language server](https://github.com/hrsh7th/vscode-langservers-extracted).
The language server is [published independently to npm][npm], and can be used with any editor that has an LSP client.

It's recommended you turn off any existing language server that handles SCSS and Sass. You may also use this language server to handle CSS. Its feature set matches that of `vscode-css-language-server`.

## Getting started

Expand All @@ -18,9 +20,19 @@ Then start the language server like so:
some-sass-language-server --stdio
```

**Options**
Tweak the log level by using the `--loglevel` argument, or by using the `somesass.workspace.logLevel` setting. Available loglevels are:

- silent
- fatal
- error
- warn
- info (default)
- debug
- trace

`--debug` – runs the development build of the language server, helpful to get more context if the server crashes
```sh
some-sass-language-server --stdio --loglevel debug
```

## Configure your editor's client

Expand Down
16 changes: 13 additions & 3 deletions docs/src/language-server/helix.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,26 @@ You can configure new language servers in [`.config/helix/languages.toml`](https
[language-server.some-sass-language-server]
command = "some-sass-language-server"
args = ["--stdio"]
config = { somesass = { loadPaths = [] } }
# see https://wkillerud.github.io/some-sass/user-guide/settings.html for all available settings
config = { somesass = { workspace = { loadPaths = [] } } }

[[language]]
name = "scss"
language-servers = [
{ name = "some-sass-language-server" },
{ name = "vscode-css-language-server" },
{ name = "some-sass-language-server" }
]
```

The language server will start once you open an SCSS file.

You can also use it for CSS.

```toml
[[language]]
name = "css"
language-servers = [
{ name = "some-sass-language-server" }
]
```

At time of writing there doesn't seem to be a grammar for Sass indented available in Helix.
Loading