vscode-sintax

VSCode Language support for sin.

Features

Literal syntax highlighting
Icon contribution for sin.lock
Configuration options for customizing colors and excluding tags
Call-site override detection for component specific CSS literals
Support for additional tagged literals such as HashQL
Performance optimizations to minimize impact on editor responsiveness

Syntax Highlighting

The extension provides syntax highlighting for CSS literals in sin projects. It uses the Decoration API to apply colors to different parts of the CSS syntax and will detect component specific call-site overrides.

s``             // CSS literal
s.css``         // CSS Literal
s.css.reset``   // CSS Literal
s.trust``       // HTML Literal

const styled = s``
const stateless = s(() => s``)
const stateful = s(() => () => s``)

styled``        // CSS Literal
stateless``     // CSS Literal
stateful``      // CSS Literal

Additional Supported Literals

In addition, the extension also applies syntax highlighting to additional tagged template literals typically used in sin projects, such as HashQL with support for c5 tagged literals.

node``          // JavaScript Literal
c5``            // SQL Literal

CSS Literals

The extensions uses the Decoration API to apply syntax highlighting within CSS literals. You can customize the colors via preference settings, the following are the default colors used by the extension within CSS literals:

{
  "sin.css.colors": {
    "properties": "#9CDCFE",
    "selectors": "#91EBC2",
    "functions": "#978FFF",
    "units": "#F92672",
    "queries": "#F92672",
    "attrs": "#81D4FA",
    "variable": "#FAFAFA",
    "important": "#E28811",
    "punctuation": "#9CDCFE",
    "numbers": "#978FFF",
    "pseudo": "#BB7FD9",
    "comments": "#888888"
  }
}

Tag Exclusions

By default, the extension will perform analysis on tagged template function literals. It will look for syntactical matches which represent sin css structures but it may not always get things right. You can set tag exclusions to prevent analysis from occurring on specific tags using the sin.css.exclude preference settings.

{
  // The extension uses the following defaults
  "sin.css.exclude": [
    "sql",
    "html",
    "css",
    "gql",
    "grapql",
    "c5",
    "node"
  ]
}

Icon Contribution

The extension contributes an icon for sin.lock files, which are used to lock dependencies in sin projects. The icon is a simple lock symbol, and it helps to visually distinguish sin.lock files from other files in the project.

Sintax

panoply