Docs: Update Language Service

website/app/[locale]/reference/language-service/_opengraph-image.tsx

@@ -0,0 +1,13 @@
+import { Props } from 'websites/types/Props'
+import create from '~/og-image'
+import metadata from './metadata'
+import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
+
+export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
+export const contentType = 'image/jpg'
+export const runtime = 'nodejs'
+
+export default (props: Props) => create({
+    props,
+    metadata
+})

website/app/[locale]/reference/language-service/content.mdx

@@ -0,0 +1,120 @@
+import settings from '~/../packages/language-service/src/settings'
+
+---
+
+## Interfaces
+### `CSSLanguageService`
+The main body of this package is the class `CSSLanguageService`, which encapsulates the language service features.
+```js
+import CSSLanguageService from '@master/css-language-service'
+
+const languageService = new CSSLanguageService(customSettings)
+```
+
+Check out the [source code](https://github.com/master-co/css/blob/rc/packages/language-service/src/core.ts) for arguments and properties.
+
+### `settings`
+The default language service settings.
+```js
+import { settings } from '@master/css-language-service'
+```
+
+### `settings.includedLanguages`
+Set which languages ​​should provide language services.
+<DocProp defaultValue={settings.includedLanguages} types={['string[]']} />
+
+### `settings.exclude`
+Set a glob pattern to prevent specific folders or files from providing language services.
+<DocProp defaultValue={settings.exclude} types={['string[]']} />
+
+### `settings.classAttributes`
+Specify which markup attributes should provide features of the Master CSS syntax.
+<DocProp defaultValue={JSON.stringify(settings.classAttributes)} types={['string[]']} />
+
+By default, the `class` and `className` attributes in HTML and JSX provide language features.
+```html name=html
+<div class="**target**"></div>
+```
+```jsx name=jsx
+<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.
+<DocProp defaultValue={JSON.stringify(settings.classAttributeBindings)} types={['Record<string, [string, string] | false>']} />
+
+By default, we have matched the class attribute bindings for popular frameworks.
+```jsx name=jsx
+<div className={isActive && "**target**"}></div>
+```
+```html name=vue
+<div :class="{ '**target**': isActive }"></div>
+```
+```svelte name=svelte
+<div class={isActive && "**target**"}></div>
+```
+```jsx name=astro
+<div class:list={isActive && "**target**"}></div>
+```
+```html name=angular
+<div [ngClass]="isActive && '**target**'"></div>
+```
+
+### `settings.classFunctions`
+Specify which function arguments should provide features of the Master CSS syntax.
+<DocProp defaultValue={JSON.stringify(settings.classFunctions)} types={['string[]']} />
+
+[`clsx`](https://github.com/lukeed/clsx):
+```js
+import clsx from 'clsx'
+
+clsx('**target-1**', '**target-2**');
+```
+`classList`:
+```js
+element.classList.add('**target**');
+element.classList.remove('**target**');
+```
+[`styled`](https://github.com/master-co/styled):
+```js
+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.
+<DocProp types={['string[]']} defaultValue={JSON.stringify(settings.classDeclarations)} />
+
+Object properties:
+```js name=master.css.js
+/** @type {import('@master/css').Config} */
+export default {
+    styles: {
+        btn: '**target**'
+    }
+}
+```
+Variable declarations:
+```js
+const styles = {
+    btn: '**target**'
+}
+```
+
+### `settings.suggestSyntax`
+Enable syntax suggestions.
+<DocProp defaultValue={JSON.stringify(settings.suggestSyntax)} types={['boolean']} />
+
+### `settings.inspectSyntax`
+Enable syntax inspection.
+<DocProp defaultValue={JSON.stringify(settings.inspectSyntax)} types={['boolean']} />
+
+### `settings.renderSyntaxColors`
+Enable syntax color rendering.
+<DocProp defaultValue={JSON.stringify(settings.renderSyntaxColors)} types={['boolean']} />
+
+### `settings.editSyntaxColors`
+Enable syntax color editing.
+<DocProp defaultValue={JSON.stringify(settings.editSyntaxColors)} types={['boolean']} />

website/app/[locale]/reference/language-service/metadata.ts

@@ -0,0 +1,9 @@
+import { Metadata } from 'websites/types/Metadata'
+
+const metadata: Metadata = {
+    title: 'Language Service',
+    description: 'The language service reference for Master CSS.',
+    category: 'Package'
+}
+
+export default metadata

website/app/[locale]/reference/language-service/page.tsx

@@ -0,0 +1,21 @@
+import Layout from '~/layouts/reference'
+import pageCategories from '~/data/reference-categories.json'
+import metadata from './metadata'
+/* @ts-expect-error toc */
+import Content, { toc } from './content.mdx'
+import { generate } from '~/utils/metadata'
+
+export const dynamic = 'force-static'
+export const revalidate = false
+
+export async function generateMetadata(props: any, parent: any) {
+    return await generate(metadata, props, parent)
+}
+
+export default async function Page(props: any) {
+    return (
+        <Layout {...props} pageCategories={pageCategories} pageDirname={__dirname} metadata={metadata} toc={toc}>
+            <Content />
+        </Layout >
+    )
+}