套件

@master/css-language-service@master/css-language-service

Master CSS Language Service

npm i @master/css-language-service

Basic 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.

Default	`["html", "php", "javascript", "typescript", "javascriptreact", "typescriptreact", "vue", "svelte", "rust", "astro", "markdown", "mdx", "astro"]`
Type	`string[]`

`settings.exclude`

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

Default	`["/.git/", "/node_modules/", "/.hg/"]`
Type	`string[]`

`settings.classAttributes`

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

Default	`["class", "className"]`
Type	`string[]`

By default, 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.

Default	`{ "className": ["{", "}"], "class": ["{", "}"], "class:list": ["{", "}"], ":class": ["\"", "\""], "v-bind:class": ["\"", "\""], "[class]": ["\"", "\""], "[className]": ["\"", "\""], "[ngClass]": ["\"", "\""] }`
Type	`Record<string, [string, string] \| false>`

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.

Default	`["clsx", "cva", "ctl", "cv", "class", "classnames", "classVariant", "styled(?:\\s+)?(?:\\.\\w+)?", "classList(?:\\s+)?\\.(?:add\|remove\|toggle\|replace)"]`
Type	`string[]`

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`

`settings.classDeclarations`

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

Default	`["components"]`
Type	`string[]`

Object properties:

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

Variable declarations:

const components = {    btn: 'target'}

`settings.suggestSyntax`

Enable syntax suggestions.

Default	`true`
Type	`boolean`

`settings.inspectSyntax`

Enable syntax inspection.

Default	`true`
Type	`boolean`

`settings.renderSyntaxColors`

Enable syntax color rendering.

Default	`true`
Type	`boolean`

`settings.editSyntaxColors`

Enable syntax color editing.

Default	`true`
Type	`boolean`

套件

@master/css-language-server

Master CSS Language Server

套件

@master/css-runtime

Run Master CSS right in the browser