codemirror-lang-rics

CodeMirror 6 language support for rics. Provides syntax highlighting and real-time linting.

Installation

npm install codemirror-lang-rics

Peer Dependencies

Requires CodeMirror 6 packages:

npm install @codemirror/language @codemirror/lint @codemirror/state @codemirror/view

Usage

import { EditorView, basicSetup } from "codemirror";
import {
  ricsLanguage,
  ricsLinter,
  colorHighlighter,
  colorHighlighterStyles,
} from "codemirror-lang-rics";

const editor = new EditorView({
  extensions: [
    basicSetup,
    ricsLanguage(),
    ricsLinter({ delay: 300 }),
    colorHighlighter(),
    colorHighlighterStyles,
  ],
  parent: document.getElementById("editor"),
});

API

ricsLanguage()

Returns a CodeMirror extension for rics syntax highlighting.

import { ricsLanguage } from "codemirror-lang-rics";

const extensions = [ricsLanguage()];

ricsLinter(options?)

Returns a CodeMirror linter extension that validates rics code in real-time.

import { ricsLinter } from "codemirror-lang-rics";

const extensions = [
  ricsLinter({
    delay: 300,  // Debounce delay in ms (default: 300)
  }),
];

ricsHighlighting()

Alias for ricsLanguage().

colorHighlighter(config?)

Returns a CodeMirror extension that highlights color values inline with their actual color as background.

import { colorHighlighter, colorHighlighterStyles } from "codemirror-lang-rics";

const extensions = [
  colorHighlighter({
    className: "cm-color-preview",       // CSS class for preview (default)
    lightClassName: "cm-color-preview-light",  // Class for light colors
    darkClassName: "cm-color-preview-dark",    // Class for dark colors
    luminanceThreshold: 0.35,            // Light/dark text threshold (0-1)
  }),
  colorHighlighterStyles,  // Include default styles
];

Supported formats: hex, rgb, rgba, hsl, hsla, hwb, lab, lch, oklch, oklab, color()

Note: Preprocessor variables ($var) and CSS custom properties (var()) are automatically skipped.

colorHighlighterStyles

Default CodeMirror theme for color previews. Include this alongside colorHighlighter() or define your own styles targeting .cm-color-preview.

Features

• Full syntax highlighting for rics/SCSS syntax
• Variables ($name)
• Nesting and parent selector (&)
• Mixins and functions (@mixin, @function, @include)
• Control flow (@if, @else, @for, @each, @while)
• Color values and functions
• Real-time error detection
• Inline error markers
• Inline color previews with automatic contrast adjustment

License

MIT

Built by Better Lyrics