Update imports and components for syntax and utilities overview

packages/language-service/src/utils/get-pseudo-class-completion-items.ts

@@ -27,7 +27,7 @@ export default function getPseudoClassCompletionItems(css: MasterCSS = new Maste
                 sortText,
                 documentation: getCSSDataDocumentation(data, {
                     generatedCSS: generateCSS([syntax + name.slice(1)], css),
-                    docs: '/reference/syntax#selectors'
+                    docs: '/guide/syntax#selectors'
                 }),
                 kind,
                 data
@@ -51,7 +51,7 @@ export default function getPseudoClassCompletionItems(css: MasterCSS = new Maste
             label: name,
             documentation: getCSSDataDocumentation(data, {
                 generatedCSS: generateCSS([syntax + name.slice(1)], css),
-                docs: '/reference/syntax#selectors'
+                docs: '/guide/syntax#selectors'
             }),
             sortText,
             kind,

packages/language-service/src/utils/get-pseudo-element-completion-items.ts

@@ -22,7 +22,7 @@ export default function getPseudoElementCompletionItems(css: MasterCSS = new Mas
                 sortText,
                 documentation: getCSSDataDocumentation(data, {
                     generatedCSS: generateCSS([syntax + name.slice(2)], css),
-                    docs: '/reference/syntax#selectors'
+                    docs: '/guide/syntax#selectors'
                 }),
                 kind,
                 data
@@ -46,7 +46,7 @@ export default function getPseudoElementCompletionItems(css: MasterCSS = new Mas
             label: name,
             documentation: getCSSDataDocumentation(data, {
                 generatedCSS: generateCSS([syntax + name.slice(2)], css),
-                docs: '/reference/syntax#selectors'
+                docs: '/guide/syntax#selectors'
             }),
             sortText,
             kind,

packages/language-service/src/utils/get-query-completion-items.ts

@@ -16,7 +16,7 @@ export default function getQueryCompletionItems(css: MasterCSS = new MasterCSS()
                 sortText: 'media()',
                 documentation: getCSSDataDocumentation(atDataList.find(({ name }) => name === '@media'), {
                     generatedCSS: generateCSS([syntax + 'media()'], css),
-                    docs: '/reference/syntax#at-rules'
+                    docs: '/guide/syntax#at-rules'
                 }),
             },
             {
@@ -26,7 +26,7 @@ export default function getQueryCompletionItems(css: MasterCSS = new MasterCSS()
                 sortText: 'supports()',
                 documentation: getCSSDataDocumentation(atDataList.find(({ name }) => name === '@supports'), {
                     generatedCSS: generateCSS([syntax + 'supports()'], css),
-                    docs: '/reference/syntax#at-rules'
+                    docs: '/guide/syntax#at-rules'
                 }),
             }
         )
@@ -38,7 +38,7 @@ export default function getQueryCompletionItems(css: MasterCSS = new MasterCSS()
                 insertText: name,
                 documentation: getCSSDataDocumentation(undefined, {
                     generatedCSS: generateCSS([syntax + name], css),
-                    docs: '/reference/syntax#at-rules'
+                    docs: '/guide/syntax#at-rules'
                 })
             }
             if ([AT_SIGN, ...QUERY_LOGICAL_OPERATORS].includes(triggerCharacter)) {
@@ -51,7 +51,7 @@ export default function getQueryCompletionItems(css: MasterCSS = new MasterCSS()
                         insertText: name,
                         documentation: getCSSDataDocumentation(undefined, {
                             generatedCSS: generateCSS([syntax + name], css),
-                            docs: '/reference/syntax#at-rules'
+                            docs: '/guide/syntax#at-rules'
                         }),
                         detail: `screen width ${'>='} ${value}px`,
                         kind: CompletionItemKind.Keyword
@@ -81,7 +81,7 @@ export default function getQueryCompletionItems(css: MasterCSS = new MasterCSS()
                         insertText: name,
                         documentation: getCSSDataDocumentation(undefined, {
                             generatedCSS: generateCSS([syntax + name], css),
-                            docs: '/reference/syntax#at-rules'
+                            docs: '/guide/syntax#at-rules'
                         }),
                         detail: `screen width ${comparisonCharacter} ${value}px`,
                         kind: CompletionItemKind.Keyword

packages/language-service/src/utils/query-syntax-completions.ts

@@ -105,7 +105,7 @@ export default function querySyntaxCompletions(q = '', css: MasterCSS = new Mast
                     insertText: '.',
                     documentation: getCSSDataDocumentation(undefined, {
                         generatedCSS: generateCSS([field + '.class'], css),
-                        docs: '/reference/syntax#selectors'
+                        docs: '/guide/syntax#selectors'
                     }),
                     kind: CompletionItemKind.Class
                 })

packages/language-service/tests/suggest-syntax/selectors.test.ts

@@ -43,7 +43,7 @@ describe.concurrent('pseudo-class', () => {
 
                 (Edge 12, Firefox 3, Safari 3, Chrome 4, IE 7, Opera 9)
 
-                [Master CSS](https://rc.css.master.co/reference/syntax#selectors) | [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
+                [Master CSS](https://rc.css.master.co/guide/syntax#selectors) | [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
             `,
         },
         'insertText': 'first',
@@ -92,7 +92,7 @@ describe.concurrent('pseudo-element', () => {
 
                 (Edge 79, Firefox 51, Safari 10, Chrome 57, Opera 44)
 
-                [Master CSS](https://rc.css.master.co/reference/syntax#selectors) | [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::placeholder)
+                [Master CSS](https://rc.css.master.co/guide/syntax#selectors) | [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::placeholder)
          `,
         },
         'insertText': 'placeholder',

site/app/[locale]/guide/configuration/content.mdx

@@ -1,10 +1,10 @@
-import SyntaxesOverview from '~/site/app/[locale]/guide/rules/components/SyntaxesOverview.mdx'
+import RulesOverview from '~/site/app/[locale]/guide/syntax/components/RulesOverview.mdx'
 import VariablesOverview from '~/site/app/[locale]/guide/variables/components/Overview.mdx'
-import UtilitiesOverview from '~/site/app/[locale]/guide/utilities/components/Overview.mdx'
+import UtilitiesOverview from '~/site/app/[locale]/guide/syntax/components/UtilitiesOverview.mdx'
 import AnimationsOverview from '~/site/app/[locale]/guide/animations/components/Overview.mdx'
-import AtOverview from '~/site/app/[locale]/guide/rules/components/AtOverview.mdx'
-import SelectorsOverview from '~/site/app/[locale]/guide/rules/components/SelectorsOverview.mdx'
-import FunctionsOverview from '~/site/app/[locale]/guide/rules/components/FunctionsOverview.mdx'
+import AtOverview from '~/site/app/[locale]/guide/syntax/components/AtOverview.mdx'
+import SelectorsOverview from '~/site/app/[locale]/guide/syntax/components/SelectorsOverview.mdx'
+import FunctionsOverview from '~/site/app/[locale]/guide/syntax/components/FunctionsOverview.mdx'
 import ComponentsOverview from '~/site/app/[locale]/guide/components/components/Overview.mdx'
 import { config } from '@master/css'
 
@@ -22,23 +22,23 @@ Customizing animation [animations](/guide/custom-animations) for your design sys
 <AnimationsOverview />
 
 ### `.functions`
-Customizing [functions](/reference/syntax#functions) for your design system.
+Customizing [functions](/guide/syntax#functions) for your design system.
 <FunctionsOverview />
 
 ### `.at`
-Customizing [at-rules](/reference/syntax#at-rules) for your design system.
+Customizing [at-rules](/guide/syntax#at-rules) for your design system.
 <AtOverview />
 
 ### `.rules`
-Customizing [rules](/reference/syntax#rules) for your design system.
-<SyntaxesOverview />
+Customizing [rules](/guide/syntax#rules) for your design system.
+<RulesOverview />
 
 ### `.selectors`
-Customizing [selectors](/reference/syntax#selectors) for your design system.
+Customizing [selectors](/guide/syntax#selectors) for your design system.
 <SelectorsOverview />
 
 ### `.utilities`
-Customizing [utility](/reference/utilities) classes for your design system.
+Customizing [utility](/guide/syntax#utilities) classes for your design system.
 <UtilitiesOverview />
 
 ### `.components`

site/app/[locale]/guide/markup-driven/content.mdx

@@ -208,7 +208,7 @@ It can be elegant:
 <!-- Use a utility class that translates to "display: block" -->
 <div class="block">
 ```
-It can be [stateful and selectable](/reference/syntax#selectors):
+It can be [stateful and selectable](/guide/syntax#selectors):
 ```html
 <!-- Set a pink background on hover -->
 <div class="bg:pink:hover">

site/app/[locale]/guide/migration/tailwindcss/content.mdx

@@ -110,7 +110,7 @@ Add media queries after the main body.
 - <div class="landscape:hidden"></div>
 <div class="hidden@landscape"></div>
 ```
-Not just media queries but feature queries and [more](/reference/syntax).
+Not just media queries but feature queries and [more](/guide/syntax).
 
 ---
 
@@ -163,7 +163,7 @@ export default {
 ```
 
 ### Add media queries
-Using [at-rules](/reference/syntax#at-rules) to define media queries, feature queries, and even container queries.
+Using [at-rules](/guide/syntax#at-rules) to define media queries, feature queries, and even container queries.
 ```js name=master.css.js
 -/** @type {import('tailwindcss').Config} */
 -module.exports = {

site/app/[locale]/guide/migration/v1/content.mdx

@@ -123,7 +123,7 @@ Deprecate extended `breakpoints` and `queries` ​​in favor of `config.at`.
 +    }
 +}
 ```
-To learn more, check out the [at-rules](/reference/syntax#at-rules) documentation.
+To learn more, check out the [at-rules](/guide/syntax#at-rules) documentation.
 
 ### Unknown tokens as themes
 Deprecated `colorSchemes` and considered unknown media query tokens as themes.

site/app/[locale]/guide/style-declarations/components/UnitConversion.mdx

@@ -13,6 +13,6 @@ Do you frequently check the reference table for `rem` to `px` when writing CSS?
 
 The `48` without specified units is translated to pixels and is converted to a browser-friendly `2rem` when generating CSS rules.
 
-We've predefined [practical units and conversion behavior](/reference/syntax#default-reference) based on the characteristics of different style properties, and most of them involve converting from `px` to `rem`.
+We've predefined [practical units and conversion behavior](/guide/syntax#default-reference) based on the characteristics of different style properties, and most of them involve converting from `px` to `rem`.
 
 You can easily associate the default behavior with the property's characteristics.

site/app/[locale]/guide/style-declarations/components/Utilities.mdx

@@ -13,12 +13,12 @@ Writing the native CSS directly makes your markup verbose.
     {code2}
 </Code>
 
-When the characteristics of a native CSS property can be accurately conveyed through its value alone, we [utilize the value directly as a utility class](/reference/utilities#default-reference). For example, we reduce `mcss display:block` to simply `mcss block`.
+When the characteristics of a native CSS property can be accurately conveyed through its value alone, we [utilize the value directly as a utility class](/guide/syntax#utilities#default-reference). For example, we reduce `mcss display:block` to simply `mcss block`.
 
 However, we do not reduce `mcss font-weight:lighter` to `mcss lighter` can be too ambiguous, potentially referring to brightness rather than `font-weight`.
 
 In addition, several useful utility classes are provided, such as [screen readers](/reference/screen-readers) and [text size](/reference/text-size) with line height, etc.
 
 Utilities effectively reduce markup complexity, improve readability, and maintain the intended meaning of the property.
 
-To learn more about customizing utilities, check out the [utilities](/reference/utilities) documentation.
+To learn more about customizing utilities, check out the [utilities](/guide/syntax#utilities) documentation.

site/app/[locale]/guide/syntax/components/UtilitiesOverview.mdx

@@ -0,0 +1,14 @@
+```js name=master.css.js
+export default {
+    utilities: {
+        round: {
+            'border-radius': '50%',
+            'aspect-ratio': '1/1'
+        }
+    }
+}
+```
+Apply your custom utilities:
+```html
+<div class="**round**">o</div>
+```

site/app/[locale]/guide/syntax/content.mdx

@@ -3,11 +3,11 @@
 
 ## Rules
 Customize your own Master CSS syntax rules.
-<SyntaxesOverview />
+<RulesOverview />
 <details>
     <summary>View the default rules</summary>
     <div>
-        <SyntaxesDefault />
+        <RulesDefault />
     </div>
 </details>
 
@@ -75,6 +75,18 @@ Applies translucent background only when `backdrop-filter` is supported.
 
 ---
 
+## Utilities
+Customize utility classes using native CSS declarations.
+<UtilitiesOverview />
+<details>
+    <summary>View the default utilities</summary>
+    <div>
+        <UtilitiesDefault />
+    </div>
+</details>
+
+---
+
 ## Future
 
 - [Container Queries #334](https://github.com/master-co/css/issues/334)

site/app/[locale]/guide/syntax/metadata.ts

@@ -4,8 +4,6 @@ const metadata = define({
     title: 'Syntax',
     description: 'A guide to customizing declarations, selectors, functions, and at-rules in syntax.',
     category: 'Customization',
-    order: 3,
-    unfinished: true,
     fileURL: import.meta.url
 })