Language Service

The language service reference for Master CSS.

Main

The main body of this package is the class CSSLanguageService, which encapsulates the language service features.

import CSSLanguageService from '@master/css-language-service'
 
const languageService = new CSSLanguageService(customSettings)

Check out the source code for arguments and properties.

Settings

The default language service settings.

import { settings } from '@master/css-language-service'

.includedLanguages

Set which languages ​​should provide language services.

.exclude

Set a glob pattern to prevent specific folders or files from providing language services.

.classAttributes

Specify which markup attributes should provide features of the Master CSS syntax.

By default, the class and className attributes in HTML and JSX provide language features.

<div class="target"></div>

<div className="target"></div>

This only matches attributes with string tokens, such as class="" or class=''. For markup binding or assignment forms see the next option.

.classAttributeBindings

Specify which markup attributes with bindings should provide features of the Master CSS syntax.

By default, we have matched the class attribute bindings for popular frameworks.

<div className={isActive && "target"}></div>

<div :class="{ 'target': isActive }"></div>

<div class={isActive && "target"}></div>

<div class:list={isActive && "target"}></div>

<div [ngClass]="isActive && 'target'"></div>

.classFunctions

Specify which function arguments should provide features of the Master CSS syntax.

clsx:

import clsx from 'clsx'
 
clsx('target-1', 'target-2');

classList:

element.classList.add('target');
element.classList.remove('target');

styled:

import styled from '@master/styled.react'
 
const Button = styled.button`target-1 target-2`

.classDeclarations

Specify which variable declarations or object properties should provide features of the Master CSS syntax.

Object properties:

/** @type {import('@master/css').Config} */
export default {
    styles: {
        btn: 'target'
    }
}

Variable declarations:

const styles = {
    btn: 'target'
}

.suggestSyntax

Enable syntax suggestions.

.inspectSyntax

Enable syntax inspection.

.renderSyntaxColors

Enable syntax color rendering.

.editSyntaxColors

Enable syntax color editing.