catppuccin / catppuccin/vscode

Differentiate JS/TS all caps constants

Open
#562 0 comments 0 reactions 0 assignees View on GitHub
blocked enhancement upstream
Dominant language
TypeScript
Stars
2.3k
Forks
85
PR merge metrics
No merged PRs in 30d

Description

We should make the theme differentiate between `const` variables and `const` variables that are all caps / in shouting snake case (`const fooBar` vs `const FOO_BAR`). The shouting snake case convention is often used to mark "actual" constant values. Our Helix and Neovim ports highlight the aforementioned example "correctly" since those editors' grammars (https://github.com/nvim-treesitter/nvim-treesitter/blob/42fc28ba918343ebfd5565147a42a26580579482/queries/ecma/highlights.scm#L27-L28, https://github.com/helix-editor/helix/blob/b6ccbddc77bc2e2c2d02cfd5444594e3cc46c938/runtime/queries/ecma/highlights.scm#L249-L254) do distinguish constants in that way. However, currently VS Code's grammar for JavaScript doesn't differentiate that way - tracking upstream https://github.com/microsoft/TypeScript-TmLanguage/issues/645.

| Neovim | Helix | VS Code (current) | VS Code (attempted fix) |
| --- | --- | --- | --- |
| Image | Image | Image | Image |

I attempted a fix by removing our overrides that made constants text instead of peach in specific languages, but since VS Code doesn't yet differentiate it isn't a good change.

```diff
diff --git c/packages/catppuccin-vsc/src/theme/semanticTokens.ts i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
index 267c245..6b28820 100644
--- c/packages/catppuccin-vsc/src/theme/semanticTokens.ts
+++ i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
@@ -16,17 +16,6 @@ export const getSemanticTokens = (context: ThemeContext): SemanticTokens => {
"variable.typeHint:python": { foreground: palette.yellow },
"function.decorator:python": { foreground: palette.peach },

- // ignore `const`s being peach in JS & TS
- "variable.readonly:javascript": { foreground: palette.text },
- "variable.readonly:typescript": { foreground: palette.text },
- "property.readonly:javascript": { foreground: palette.text },
- "property.readonly:typescript": { foreground: palette.text },
- // ditto for React
- "variable.readonly:javascriptreact": { foreground: palette.text },
- "variable.readonly:typescriptreact": { foreground: palette.text },
- "property.readonly:javascriptreact": { foreground: palette.text },
- "property.readonly:typescriptreact": { foreground: palette.text },
-
// Scala, also dealing with constants
"variable.readonly:scala": { foreground: palette.text },

diff --git c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
index 8e8d67f..6850e96 100644
--- c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
+++ i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
@@ -12,13 +12,8 @@ const tokens = (context: ThemeContext): TextmateColors => {
},
},
{
- name: "JS/TS constants & properties",
- scope: [
- "variable.other.constant.js",
- "variable.other.constant.ts",
- "variable.other.property.js",
- "variable.other.property.ts",
- ],
+ name: "JS/TS properties",
+ scope: ["variable.other.property.js", "variable.other.property.ts"],
settings: {
foreground: palette.text,
},
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.