@codemirror/lang-css

What is @codemirror/lang-css?

@codemirror/lang-css is a language support package for CodeMirror 6 that provides syntax highlighting, code folding, and other editing features for CSS. It is designed to be used with the CodeMirror 6 editor, which is a versatile text editor implemented in JavaScript for the browser.

What are @codemirror/lang-css's main functionalities?

Syntax Highlighting

This code sets up a CodeMirror editor with basic syntax highlighting for CSS. The `css` function from `@codemirror/lang-css` is used to provide the CSS language support.

import { css } from '@codemirror/lang-css';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'body {\n  background-color: #f0f0f0;\n}',
  extensions: [basicSetup, css()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Code Folding

This code sets up a CodeMirror editor with code folding capabilities for CSS. The `foldGutter` extension is used alongside the `css` function to enable folding of CSS code blocks.

import { css } from '@codemirror/lang-css';
import { foldGutter } from '@codemirror/fold';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'body {\n  background-color: #f0f0f0;\n  color: #333;\n}',
  extensions: [basicSetup, css(), foldGutter()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Linting

This code sets up a CodeMirror editor with linting capabilities for CSS. The `linter` and `lintGutter` extensions are used alongside the `css` function to provide linting support.

import { css } from '@codemirror/lang-css';
import { linter, lintGutter } from '@codemirror/lint';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const cssLinter = linter(view => {
  // Custom linting logic
  return [];
});

const state = EditorState.create({
  doc: 'body {\n  background-color: #f0f0f0;\n  color: #333;\n}',
  extensions: [basicSetup, css(), lintGutter(), cssLinter]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-css

monaco-css

The `monaco-css` package provides CSS language support for the Monaco Editor, which is the editor that powers Visual Studio Code. It offers advanced features like syntax highlighting, code folding, and linting, similar to `@codemirror/lang-css` but is tailored for the Monaco Editor.

ace-builds

The `ace-builds` package includes CSS language support for the Ace Editor. It provides features like syntax highlighting and code folding for CSS, similar to `@codemirror/lang-css`, but is designed for the Ace Editor.

README

@codemirror/lang-css

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements CSS language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

css() → LanguageSupport

Language support for CSS.

cssLanguage: LRLanguage

A language provider based on the Lezer CSS parser, extended with highlighting and indentation information.

cssCompletionSource: CompletionSource

CSS property, variable, and value keyword completion source.

defineCSSCompletionSource(isVariable: fn(node: SyntaxNodeRef) → boolean) → CompletionSource

Create a completion source for a CSS dialect, providing a predicate for determining what kind of syntax node can act as a completable variable. This is used by language modes like Sass and Less to reuse this package's completion logic.

Changelog

6.3.0 (2024-09-07)

New features

CSS autocompletion now completes @-keywords.