Format

Nate Butler created

Change summary

styles/src/build_themes.ts               |   9 
styles/src/build_tokens.ts               |   4 
styles/src/component/icon_button.ts      |   5 
styles/src/component/tab_bar_button.ts   |  67 +++---
styles/src/component/text_button.ts      |   5 
styles/src/style_tree/app.ts             |   2 
styles/src/style_tree/assistant.ts       |  69 +++---
styles/src/style_tree/editor.ts          |   2 
styles/src/style_tree/feedback.ts        |   2 
styles/src/style_tree/picker.ts          |   2 
styles/src/style_tree/project_panel.ts   |  16 
styles/src/style_tree/status_bar.ts      |  10 
styles/src/style_tree/titlebar.ts        |   4 
styles/src/theme/create_theme.ts         |  25 +-
styles/src/theme/syntax.ts               |  42 +++-
styles/src/theme/theme_config.ts         |   4 
styles/src/theme/tokens/theme.ts         |   4 
styles/src/themes/atelier/common.ts      |   6 
styles/src/types/extract_syntax_types.ts |  41 ++-
styles/src/types/syntax.ts               | 253 ++++++++++++-------------
styles/tsconfig.json                     |   4 
21 files changed, 299 insertions(+), 277 deletions(-)

Detailed changes

styles/src/build_themes.ts 🔗

@@ -21,9 +21,7 @@ function clear_themes(theme_directory: string) {
     }
 }
 
-const all_themes: Theme[] = themes.map((theme) =>
-    create_theme(theme)
-)
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
 
 function write_themes(themes: Theme[], output_directory: string) {
     clear_themes(output_directory)
@@ -34,10 +32,7 @@ function write_themes(themes: Theme[], output_directory: string) {
         const style_tree = app()
         const style_tree_json = JSON.stringify(style_tree, null, 2)
         const temp_path = path.join(temp_directory, `${theme.name}.json`)
-        const out_path = path.join(
-            output_directory,
-            `${theme.name}.json`
-        )
+        const out_path = path.join(output_directory, `${theme.name}.json`)
         fs.writeFileSync(temp_path, style_tree_json)
         fs.renameSync(temp_path, out_path)
         console.log(`- ${out_path} created`)

styles/src/build_tokens.ts 🔗

@@ -83,8 +83,6 @@ function write_tokens(themes: Theme[], tokens_directory: string) {
     console.log(`- ${METADATA_FILE} created`)
 }
 
-const all_themes: Theme[] = themes.map((theme) =>
-    create_theme(theme)
-)
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
 
 write_tokens(all_themes, TOKENS_DIRECTORY)

styles/src/component/icon_button.ts 🔗

@@ -10,10 +10,7 @@ export type Margin = {
 }
 
 interface IconButtonOptions {
-    layer?:
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
 }

styles/src/component/tab_bar_button.ts 🔗

@@ -12,44 +12,47 @@ type TabBarButtonProps = TabBarButtonOptions & {
     state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
 }
 
-export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
+export function tab_bar_button(
+    theme: Theme,
+    { icon, color = "base" }: TabBarButtonProps
+) {
     const button_spacing = 8
 
-    return (
-        interactive({
-            base: {
-                icon: {
-                    color: foreground(theme.middle, color),
-                    asset: icon,
-                    dimensions: {
-                        width: 15,
-                        height: 15,
-                    },
+    return interactive({
+        base: {
+            icon: {
+                color: foreground(theme.middle, color),
+                asset: icon,
+                dimensions: {
+                    width: 15,
+                    height: 15,
                 },
-                container: {
-                    corner_radius: 4,
-                    padding: {
-                        top: 4, bottom: 4, left: 4, right: 4
-                    },
-                    margin: {
-                        left: button_spacing / 2,
-                        right: button_spacing / 2,
-                    },
+            },
+            container: {
+                corner_radius: 4,
+                padding: {
+                    top: 4,
+                    bottom: 4,
+                    left: 4,
+                    right: 4,
+                },
+                margin: {
+                    left: button_spacing / 2,
+                    right: button_spacing / 2,
                 },
             },
-            state: {
-                hovered: {
-                    container: {
-                        background: background(theme.middle, color, "hovered"),
-
-                    }
+        },
+        state: {
+            hovered: {
+                container: {
+                    background: background(theme.middle, color, "hovered"),
                 },
-                clicked: {
-                    container: {
-                        background: background(theme.middle, color, "pressed"),
-                    }
+            },
+            clicked: {
+                container: {
+                    background: background(theme.middle, color, "pressed"),
                 },
             },
-        })
-    )
+        },
+    })
 }

styles/src/component/text_button.ts 🔗

@@ -9,10 +9,7 @@ import { useTheme, Theme } from "../theme"
 import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
-    layer?:
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties

styles/src/style_tree/app.ts 🔗

@@ -57,6 +57,6 @@ export default function app(): any {
         tooltip: tooltip(),
         terminal: terminal(),
         assistant: assistant(),
-        feedback: feedback()
+        feedback: feedback(),
     }
 }

styles/src/style_tree/assistant.ts 🔗

@@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
 }
 // TODO: Replace these with zed types
 type RemainingTokens = TextStyle & {
-    background: string,
-    margin: { top: number, right: number },
+    background: string
+    margin: { top: number; right: number }
     padding: {
-        right: number,
-        left: number,
-        top: number,
-        bottom: number,
-    },
-    corner_radius: number,
+        right: number
+        left: number
+        top: number
+        bottom: number
+    }
+    corner_radius: number
 }
 
 export default function assistant(): any {
     const theme = useTheme()
 
-    const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
-        return (
-            interactive({
-                base: {
+    const interactive_role = (
+        color: StyleSets
+    ): Interactive<RoleCycleButton> => {
+        return interactive({
+            base: {
+                ...text(theme.highest, "sans", color, { size: "sm" }),
+            },
+            state: {
+                hovered: {
                     ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "hovered"),
                 },
-                state: {
-                    hovered: {
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
-                        background: background(theme.highest, color, "hovered"),
-                    },
-                    clicked: {
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
-                        background: background(theme.highest, color, "pressed"),
-                    }
+                clicked: {
+                    ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "pressed"),
                 },
-            })
-        )
+            },
+        })
     }
 
     const tokens_remaining = (color: StyleSets): RemainingTokens => {
-        return (
-            {
-                ...text(theme.highest, "mono", color, { size: "xs" }),
-                background: background(theme.highest, "on", "default"),
-                margin: { top: 12, right: 20 },
-                padding: { right: 4, left: 4, top: 1, bottom: 1 },
-                corner_radius: 6,
-            }
-        )
+        return {
+            ...text(theme.highest, "mono", color, { size: "xs" }),
+            background: background(theme.highest, "on", "default"),
+            margin: { top: 12, right: 20 },
+            padding: { right: 4, left: 4, top: 1, bottom: 1 },
+            corner_radius: 6,
+        }
     }
 
     return {
@@ -93,7 +91,10 @@ export default function assistant(): any {
                 base: {
                     background: background(theme.middle),
                     padding: { top: 4, bottom: 4 },
-                    border: border(theme.middle, "default", { top: true, overlay: true }),
+                    border: border(theme.middle, "default", {
+                        top: true,
+                        overlay: true,
+                    }),
                 },
                 state: {
                     hovered: {
@@ -101,7 +102,7 @@ export default function assistant(): any {
                     },
                     clicked: {
                         background: background(theme.middle, "pressed"),
-                    }
+                    },
                 },
             }),
             saved_at: {

styles/src/style_tree/editor.ts 🔗

@@ -318,7 +318,7 @@ export default function editor(): any {
                     ? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
                     : with_opacity(theme.ramps.green(0.4).hex(), 0.8),
             },
-            selections: foreground(layer, "accent")
+            selections: foreground(layer, "accent"),
         },
         composition_mark: {
             underline: {

styles/src/style_tree/feedback.ts 🔗

@@ -37,7 +37,7 @@ export default function feedback(): any {
                     ...text(theme.highest, "mono", "on", "disabled"),
                     background: background(theme.highest, "on", "disabled"),
                     border: border(theme.highest, "on", "disabled"),
-                }
+                },
             },
         }),
         button_margin: 8,

styles/src/style_tree/project_panel.ts 🔗

@@ -64,17 +64,17 @@ export default function project_panel(): any {
         const unselected_default_style = merge(
             base_properties,
             unselected?.default ?? {},
-            {},
+            {}
         )
         const unselected_hovered_style = merge(
             base_properties,
             { background: background(theme.middle, "hovered") },
-            unselected?.hovered ?? {},
+            unselected?.hovered ?? {}
         )
         const unselected_clicked_style = merge(
             base_properties,
             { background: background(theme.middle, "pressed") },
-            unselected?.clicked ?? {},
+            unselected?.clicked ?? {}
         )
         const selected_default_style = merge(
             base_properties,
@@ -82,7 +82,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.default ?? {},
+            selected_style?.default ?? {}
         )
         const selected_hovered_style = merge(
             base_properties,
@@ -90,7 +90,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "hovered"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.hovered ?? {},
+            selected_style?.hovered ?? {}
         )
         const selected_clicked_style = merge(
             base_properties,
@@ -98,7 +98,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "pressed"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.clicked ?? {},
+            selected_style?.clicked ?? {}
         )
 
         return toggleable({
@@ -175,7 +175,7 @@ export default function project_panel(): any {
                 default: {
                     icon_color: foreground(theme.middle, "variant"),
                 },
-            },
+            }
         ),
         cut_entry: entry(
             {
@@ -190,7 +190,7 @@ export default function project_panel(): any {
                         size: "sm",
                     }),
                 },
-            },
+            }
         ),
         filename_editor: {
             background: background(theme.middle, "on"),

styles/src/style_tree/status_bar.ts 🔗

@@ -34,10 +34,14 @@ export default function status_bar(): any {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
         active_language: text_button({
-            color: "variant"
+            color: "variant",
+        }),
+        auto_update_progress_message: text(layer, "sans", "variant", {
+            size: "xs",
+        }),
+        auto_update_done_message: text(layer, "sans", "variant", {
+            size: "xs",
         }),
-        auto_update_progress_message: text(layer, "sans", "variant", { size: "xs" }),
-        auto_update_done_message: text(layer, "sans", "variant", { size: "xs" }),
         lsp_status: interactive({
             base: {
                 ...diagnostic_status_container,

styles/src/style_tree/titlebar.ts 🔗

@@ -183,10 +183,10 @@ export function titlebar(): any {
         project_name_divider: text(theme.lowest, "sans", "variant"),
 
         project_menu_button: toggleable_text_button(theme, {
-            color: 'base',
+            color: "base",
         }),
         git_menu_button: toggleable_text_button(theme, {
-            color: 'variant',
+            color: "variant",
         }),
 
         // Collaborators

styles/src/theme/create_theme.ts 🔗

@@ -2,7 +2,7 @@ import { Scale, Color } from "chroma-js"
 import {
     ThemeConfig,
     ThemeAppearance,
-    ThemeConfigInputColors
+    ThemeConfigInputColors,
 } from "./theme_config"
 import { get_ramps } from "./ramps"
 import { syntaxStyle } from "./syntax"
@@ -13,16 +13,16 @@ export interface Theme {
     is_light: boolean
 
     /**
-    * App background, other elements that should sit directly on top of the background.
-    */
+     * App background, other elements that should sit directly on top of the background.
+     */
     lowest: Layer
     /**
-    * Panels, tabs, other UI surfaces that sit on top of the background.
-    */
+     * Panels, tabs, other UI surfaces that sit on top of the background.
+     */
     middle: Layer
     /**
-    * Editors like code buffers, conversation editors, etc.
-    */
+     * Editors like code buffers, conversation editors, etc.
+     */
     highest: Layer
 
     ramps: RampSet
@@ -115,11 +115,7 @@ export interface Style {
 }
 
 export function create_theme(theme: ThemeConfig): Theme {
-    const {
-        name,
-        appearance,
-        input_color,
-    } = theme
+    const { name, appearance, input_color } = theme
 
     const is_light = appearance === ThemeAppearance.Light
     const color_ramps: ThemeConfigInputColors = input_color
@@ -161,7 +157,10 @@ export function create_theme(theme: ThemeConfig): Theme {
         "7": player(ramps.yellow),
     }
 
-    const syntax = syntaxStyle(ramps, theme.override.syntax ? theme.override.syntax : {})
+    const syntax = syntaxStyle(
+        ramps,
+        theme.override.syntax ? theme.override.syntax : {}
+    )
 
     return {
         name,

styles/src/theme/syntax.ts 🔗

@@ -3,8 +3,13 @@ import { font_weights, ThemeConfigInputSyntax, RampSet } from "../common"
 import { Syntax, SyntaxHighlightStyle, allSyntaxKeys } from "../types/syntax"
 
 // Apply defaults to any missing syntax properties that are not defined manually
-function apply_defaults(ramps: RampSet, syntax_highlights: Partial<Syntax>): Syntax {
-    const restKeys: (keyof Syntax)[] = allSyntaxKeys.filter(key => !syntax_highlights[key])
+function apply_defaults(
+    ramps: RampSet,
+    syntax_highlights: Partial<Syntax>
+): Syntax {
+    const restKeys: (keyof Syntax)[] = allSyntaxKeys.filter(
+        (key) => !syntax_highlights[key]
+    )
 
     const completeSyntax: Syntax = {} as Syntax
 
@@ -28,23 +33,36 @@ function apply_defaults(ramps: RampSet, syntax_highlights: Partial<Syntax>): Syn
 // Merge the base syntax with the theme syntax overrides
 // This is a deep merge, so any nested properties will be merged as well
 // This allows for a theme to only override a single property of a syntax highlight style
-const merge_syntax = (baseSyntax: Syntax, theme_syntax_overrides: ThemeConfigInputSyntax): Syntax => {
-    return deepmerge<Syntax, ThemeConfigInputSyntax>(baseSyntax, theme_syntax_overrides, {
-        arrayMerge: (destinationArray, sourceArray) => [
-            ...destinationArray,
-            ...sourceArray,
-        ],
-    })
+const merge_syntax = (
+    baseSyntax: Syntax,
+    theme_syntax_overrides: ThemeConfigInputSyntax
+): Syntax => {
+    return deepmerge<Syntax, ThemeConfigInputSyntax>(
+        baseSyntax,
+        theme_syntax_overrides,
+        {
+            arrayMerge: (destinationArray, sourceArray) => [
+                ...destinationArray,
+                ...sourceArray,
+            ],
+        }
+    )
 }
 
 /** Returns a complete Syntax object of the combined styles of a theme's syntax overrides and the default syntax styles */
-export const syntaxStyle = (ramps: RampSet, theme_syntax_overrides: ThemeConfigInputSyntax): Syntax => {
+export const syntaxStyle = (
+    ramps: RampSet,
+    theme_syntax_overrides: ThemeConfigInputSyntax
+): Syntax => {
     const syntax_highlights: Partial<Syntax> = {
-        "comment": { color: ramps.neutral(0.71).hex() },
+        comment: { color: ramps.neutral(0.71).hex() },
         "comment.doc": { color: ramps.neutral(0.71).hex() },
         primary: { color: ramps.neutral(1).hex() },
         emphasis: { color: ramps.blue(0.5).hex() },
-        "emphasis.strong": { color: ramps.blue(0.5).hex(), weight: font_weights.bold },
+        "emphasis.strong": {
+            color: ramps.blue(0.5).hex(),
+            weight: font_weights.bold,
+        },
         link_uri: { color: ramps.green(0.5).hex(), underline: true },
         link_text: { color: ramps.orange(0.5).hex(), italic: true },
         "text.literal": { color: ramps.orange(0.5).hex() },

styles/src/theme/theme_config.ts 🔗

@@ -55,7 +55,9 @@ export type ThemeConfigInputColorsKeys = keyof ThemeConfigInputColors
  * }
  * ```
  */
-export type ThemeConfigInputSyntax = Partial<Record<SyntaxProperty, Partial<SyntaxHighlightStyle>>>
+export type ThemeConfigInputSyntax = Partial<
+    Record<SyntaxProperty, Partial<SyntaxHighlightStyle>>
+>
 
 interface ThemeConfigOverrides {
     syntax: ThemeConfigInputSyntax

styles/src/theme/tokens/theme.ts 🔗

@@ -4,9 +4,7 @@ import {
     SingleOtherToken,
     TokenTypes,
 } from "@tokens-studio/types"
-import {
-    Shadow,
-} from "../create_theme"
+import { Shadow } from "../create_theme"
 import { LayerToken, layer_token } from "./layer"
 import { PlayersToken, players_token } from "./players"
 import { color_token } from "./token"

styles/src/themes/atelier/common.ts 🔗

@@ -1,4 +1,8 @@
-import { ThemeLicenseType, ThemeFamilyMeta, ThemeConfigInputSyntax } from "../../common"
+import {
+    ThemeLicenseType,
+    ThemeFamilyMeta,
+    ThemeConfigInputSyntax,
+} from "../../common"
 
 export interface Variant {
     colors: {

styles/src/types/extract_syntax_types.ts 🔗

@@ -1,9 +1,9 @@
-import fs from 'fs'
-import path from 'path'
-import readline from 'readline'
+import fs from "fs"
+import path from "path"
+import readline from "readline"
 
 function escapeTypeName(name: string): string {
-    return `'${name.replace('@', '').toLowerCase()}'`
+    return `'${name.replace("@", "").toLowerCase()}'`
 }
 
 const generatedNote = `// This file is generated by extract_syntax_types.ts
@@ -17,8 +17,8 @@ const defaultTextProperty = `    /** Default text color */
     | 'primary'`
 
 const main = async () => {
-    const pathFromRoot = 'crates/zed/src/languages'
-    const directoryPath = path.join(__dirname, '../../../', pathFromRoot)
+    const pathFromRoot = "crates/zed/src/languages"
+    const directoryPath = path.join(__dirname, "../../../", pathFromRoot)
     const stylesMap: Record<string, Set<string>> = {}
     const propertyLanguageMap: Record<string, Set<string>> = {}
 
@@ -47,24 +47,31 @@ const main = async () => {
         }
     }
 
-    const directories = fs.readdirSync(directoryPath, { withFileTypes: true })
-        .filter(dirent => dirent.isDirectory())
-        .map(dirent => dirent.name)
+    const directories = fs
+        .readdirSync(directoryPath, { withFileTypes: true })
+        .filter((dirent) => dirent.isDirectory())
+        .map((dirent) => dirent.name)
 
     for (const dir of directories) {
-        const highlightsFilePath = path.join(directoryPath, dir, 'highlights.scm')
+        const highlightsFilePath = path.join(
+            directoryPath,
+            dir,
+            "highlights.scm"
+        )
         if (fs.existsSync(highlightsFilePath)) {
             await processFile(highlightsFilePath, dir)
         }
     }
 
     for (const [language, properties] of Object.entries(stylesMap)) {
-        console.log(`${language}: ${Array.from(properties).join(', ')}`)
+        console.log(`${language}: ${Array.from(properties).join(", ")}`)
     }
 
-    const sortedProperties = Object.entries(propertyLanguageMap).sort(([propA], [propB]) => propA.localeCompare(propB))
+    const sortedProperties = Object.entries(propertyLanguageMap).sort(
+        ([propA], [propB]) => propA.localeCompare(propB)
+    )
 
-    const outStream = fs.createWriteStream(path.join(__dirname, 'syntax.ts'))
+    const outStream = fs.createWriteStream(path.join(__dirname, "syntax.ts"))
     let allProperties = ""
     const syntaxKeys = []
     for (const [property, languages] of sortedProperties) {
@@ -73,9 +80,9 @@ const main = async () => {
         // Limit to the first 7 languages, append "..." if more than 7
         languagesArray = languagesArray.slice(0, 7)
         if (moreThanSeven) {
-            languagesArray.push('...')
+            languagesArray.push("...")
         }
-        const languagesString = languagesArray.join(', ')
+        const languagesString = languagesArray.join(", ")
         const comment = `/** ${languagesString} */`
         allProperties += `    ${comment}\n    | ${property} \n`
         syntaxKeys.push(property)
@@ -95,7 +102,9 @@ export type SyntaxOverride = Partial<Syntax>
 
 export type SyntaxProperty = \n${defaultTextProperty}\n\n${allProperties}
 
-export const allSyntaxKeys: SyntaxProperty[] = [\n    ${syntaxKeys.join(',\n    ')}\n]`)
+export const allSyntaxKeys: SyntaxProperty[] = [\n    ${syntaxKeys.join(
+        ",\n    "
+    )}\n]`)
     outStream.end()
 }
 

styles/src/types/syntax.ts 🔗

@@ -6,198 +6,197 @@
 //     'npm run extract-syntax-types' from ./styles
 
 export type SyntaxHighlightStyle = {
-    color: string,
-    fade_out?: number,
-    italic?: boolean,
-    underline?: boolean,
-    weight?: string,
+    color: string
+    fade_out?: number
+    italic?: boolean
+    underline?: boolean
+    weight?: string
 }
 
 export type Syntax = Record<SyntaxProperty, SyntaxHighlightStyle>
 export type SyntaxOverride = Partial<Syntax>
 
-export type SyntaxProperty = 
+export type SyntaxProperty =
     /** Default text color */
-    | 'primary'
+    | "primary"
 
     /** elixir */
-    | '__attribute__' 
+    | "__attribute__"
     /** elixir */
-    | '__name__' 
+    | "__name__"
     /** elixir */
-    | '_sigil_name' 
+    | "_sigil_name"
     /** css, heex, lua */
-    | 'attribute' 
+    | "attribute"
     /** javascript, lua, tsx, typescript, yaml */
-    | 'boolean' 
+    | "boolean"
     /** elixir */
-    | 'comment.doc' 
+    | "comment.doc"
     /** elixir */
-    | 'comment.unused' 
+    | "comment.unused"
     /** bash, c, cpp, css, elixir, elm, erb, ... */
-    | 'comment' 
+    | "comment"
     /** elixir, go, javascript, lua, php, python, racket, ... */
-    | 'constant.builtin' 
+    | "constant.builtin"
     /** bash, c, cpp, elixir, elm, glsl, heex, ... */
-    | 'constant' 
+    | "constant"
     /** glsl */
-    | 'delimiter' 
+    | "delimiter"
     /** bash, elixir, javascript, python, ruby, tsx, typescript */
-    | 'embedded' 
+    | "embedded"
     /** markdown */
-    | 'emphasis.strong' 
+    | "emphasis.strong"
     /** markdown */
-    | 'emphasis' 
+    | "emphasis"
     /** go, python, racket, ruby, scheme */
-    | 'escape' 
+    | "escape"
     /** lua */
-    | 'field' 
+    | "field"
     /** lua, php, python */
-    | 'function.builtin' 
+    | "function.builtin"
     /** elm, lua, rust */
-    | 'function.definition' 
+    | "function.definition"
     /** ruby */
-    | 'function.method.builtin' 
+    | "function.method.builtin"
     /** go, javascript, php, python, ruby, rust, tsx, ... */
-    | 'function.method' 
+    | "function.method"
     /** rust */
-    | 'function.special.definition' 
+    | "function.special.definition"
     /** c, cpp, glsl, rust */
-    | 'function.special' 
+    | "function.special"
     /** bash, c, cpp, css, elixir, elm, glsl, ... */
-    | 'function' 
+    | "function"
     /** elm */
-    | 'identifier' 
+    | "identifier"
     /** glsl */
-    | 'keyword.function' 
+    | "keyword.function"
     /** bash, c, cpp, css, elixir, elm, erb, ... */
-    | 'keyword' 
+    | "keyword"
     /** c, cpp, glsl */
-    | 'label' 
+    | "label"
     /** markdown */
-    | 'link_text' 
+    | "link_text"
     /** markdown */
-    | 'link_uri' 
+    | "link_uri"
     /** lua, php, tsx, typescript */
-    | 'method.constructor' 
+    | "method.constructor"
     /** lua */
-    | 'method' 
+    | "method"
     /** heex */
-    | 'module' 
+    | "module"
     /** svelte */
-    | 'none' 
+    | "none"
     /** bash, c, cpp, css, elixir, glsl, go, ... */
-    | 'number' 
+    | "number"
     /** bash, c, cpp, css, elixir, elm, glsl, ... */
-    | 'operator' 
+    | "operator"
     /** lua */
-    | 'parameter' 
+    | "parameter"
     /** lua */
-    | 'preproc' 
+    | "preproc"
     /** bash, c, cpp, css, glsl, go, html, ... */
-    | 'property' 
+    | "property"
     /** c, cpp, elixir, elm, heex, html, javascript, ... */
-    | 'punctuation.bracket' 
+    | "punctuation.bracket"
     /** c, cpp, css, elixir, elm, heex, javascript, ... */
-    | 'punctuation.delimiter' 
+    | "punctuation.delimiter"
     /** markdown */
-    | 'punctuation.list_marker' 
+    | "punctuation.list_marker"
     /** elixir, javascript, python, ruby, tsx, typescript, yaml */
-    | 'punctuation.special' 
+    | "punctuation.special"
     /** elixir */
-    | 'punctuation' 
+    | "punctuation"
     /** glsl */
-    | 'storageclass' 
+    | "storageclass"
     /** elixir, elm, yaml */
-    | 'string.escape' 
+    | "string.escape"
     /** elixir, javascript, racket, ruby, tsx, typescript */
-    | 'string.regex' 
+    | "string.regex"
     /** elixir, ruby */
-    | 'string.special.symbol' 
+    | "string.special.symbol"
     /** css, elixir, toml */
-    | 'string.special' 
+    | "string.special"
     /** bash, c, cpp, css, elixir, elm, glsl, ... */
-    | 'string' 
+    | "string"
     /** svelte */
-    | 'tag.delimiter' 
+    | "tag.delimiter"
     /** css, heex, php, svelte */
-    | 'tag' 
+    | "tag"
     /** markdown */
-    | 'text.literal' 
+    | "text.literal"
     /** markdown */
-    | 'title' 
+    | "title"
     /** javascript, php, rust, tsx, typescript */
-    | 'type.builtin' 
+    | "type.builtin"
     /** glsl */
-    | 'type.qualifier' 
+    | "type.qualifier"
     /** c, cpp, css, elixir, elm, glsl, go, ... */
-    | 'type' 
+    | "type"
     /** glsl, php */
-    | 'variable.builtin' 
+    | "variable.builtin"
     /** cpp, css, javascript, lua, racket, ruby, rust, ... */
-    | 'variable.special' 
+    | "variable.special"
     /** c, cpp, elm, glsl, go, javascript, lua, ... */
-    | 'variable' 
-
+    | "variable"
 
 export const allSyntaxKeys: SyntaxProperty[] = [
-    '__attribute__',
-    '__name__',
-    '_sigil_name',
-    'attribute',
-    'boolean',
-    'comment.doc',
-    'comment.unused',
-    'comment',
-    'constant.builtin',
-    'constant',
-    'delimiter',
-    'embedded',
-    'emphasis.strong',
-    'emphasis',
-    'escape',
-    'field',
-    'function.builtin',
-    'function.definition',
-    'function.method.builtin',
-    'function.method',
-    'function.special.definition',
-    'function.special',
-    'function',
-    'identifier',
-    'keyword.function',
-    'keyword',
-    'label',
-    'link_text',
-    'link_uri',
-    'method.constructor',
-    'method',
-    'module',
-    'none',
-    'number',
-    'operator',
-    'parameter',
-    'preproc',
-    'property',
-    'punctuation.bracket',
-    'punctuation.delimiter',
-    'punctuation.list_marker',
-    'punctuation.special',
-    'punctuation',
-    'storageclass',
-    'string.escape',
-    'string.regex',
-    'string.special.symbol',
-    'string.special',
-    'string',
-    'tag.delimiter',
-    'tag',
-    'text.literal',
-    'title',
-    'type.builtin',
-    'type.qualifier',
-    'type',
-    'variable.builtin',
-    'variable.special',
-    'variable'
-]
+    "__attribute__",
+    "__name__",
+    "_sigil_name",
+    "attribute",
+    "boolean",
+    "comment.doc",
+    "comment.unused",
+    "comment",
+    "constant.builtin",
+    "constant",
+    "delimiter",
+    "embedded",
+    "emphasis.strong",
+    "emphasis",
+    "escape",
+    "field",
+    "function.builtin",
+    "function.definition",
+    "function.method.builtin",
+    "function.method",
+    "function.special.definition",
+    "function.special",
+    "function",
+    "identifier",
+    "keyword.function",
+    "keyword",
+    "label",
+    "link_text",
+    "link_uri",
+    "method.constructor",
+    "method",
+    "module",
+    "none",
+    "number",
+    "operator",
+    "parameter",
+    "preproc",
+    "property",
+    "punctuation.bracket",
+    "punctuation.delimiter",
+    "punctuation.list_marker",
+    "punctuation.special",
+    "punctuation",
+    "storageclass",
+    "string.escape",
+    "string.regex",
+    "string.special.symbol",
+    "string.special",
+    "string",
+    "tag.delimiter",
+    "tag",
+    "text.literal",
+    "title",
+    "type.builtin",
+    "type.qualifier",
+    "type",
+    "variable.builtin",
+    "variable.special",
+    "variable",
+]

styles/tsconfig.json 🔗

@@ -24,7 +24,5 @@
         "useUnknownInCatchVariables": false,
         "baseUrl": "."
     },
-    "exclude": [
-        "node_modules"
-    ]
+    "exclude": ["node_modules"]
 }