Language Service
The language service reference for Master CSS.
Installation
npm i @master/css-language-serverBasic usage
Create a language service
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.
API Reference
settings
The default language service settings.
import { settings } from '@master/css-language-service'settings.includedLanguages
Set which languages should provide language services.
| Type | string[] |
|---|---|
| Default | ["html", "php", "javascript", "typescript", "javascriptreact", "typescriptreact", "vue", "svelte", "rust", "astro", "markdown", "mdx", "astro"] |
settings.exclude
Set a glob pattern to prevent specific folders or files from providing language services.
| Type | string[] |
|---|---|
| Default | ["**/.git/**", "**/node_modules/**", "**/.hg/**"] |
settings.classAttributes
Specify which markup attributes should provide features of the Master CSS syntax.
| Type | string[] |
|---|---|
| Default | ["class", "className"] |
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.
settings.classAttributeBindings
Specify which markup attributes with bindings should provide features of the Master CSS syntax.
| Type | Record<string, [string, string] | false> |
|---|---|
| Default | {
"className": ["{", "}"],
"class": ["{", "}"],
"class:list": ["{", "}"],
":class": ["\"", "\""],
"v-bind:class": ["\"", "\""],
"[class]": ["\"", "\""],
"[className]": ["\"", "\""],
"[ngClass]": ["\"", "\""]
} |
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>settings.classFunctions
Specify which function arguments should provide features of the Master CSS syntax.
| Type | string[] |
|---|---|
| Default | ["clsx", "cva", "ctl", "cv", "class", "classnames", "classVariant", "styled(?:\\s+)?(?:\\.\\w+)?", "classList(?:\\s+)?\\.(?:add|remove|toggle|replace)"] |
clsx:
import clsx from 'clsx'clsx('target-1', 'target-2');classList:
element.classList.add('target');element.classList.remove('target');import styled from '@master/styled.react'const Button = styled.button`target-1 target-2`settings.classDeclarations
Specify which variable declarations or object properties should provide features of the Master CSS syntax.
| Type | string[] |
|---|---|
| Default | ["components"] |
Object properties:
/** @type {import('@master/css').Config} */export default { components: { btn: 'target' }}Variable declarations:
const components = { btn: 'target'}settings.suggestSyntax
Enable syntax suggestions.
| Type | boolean |
|---|---|
| Default | true |
settings.inspectSyntax
Enable syntax inspection.
| Type | boolean |
|---|---|
| Default | true |
settings.renderSyntaxColors
Enable syntax color rendering.
| Type | boolean |
|---|---|
| Default | true |
settings.editSyntaxColors
Enable syntax color editing.
| Type | boolean |
|---|---|
| Default | true |