feat: new @unocss/extractor-mdc extractor

docs/.vitepress/config.ts

@@ -65,6 +65,7 @@ const Transformers: DefaultTheme.NavItemWithLink[] = [
 
 const Extractors: DefaultTheme.NavItemWithLink[] = [
   { text: 'Pug Extractor', link: '/extractors/pug' },
+  { text: 'MDC Extractor', link: '/extractors/mdc' },
   { text: 'Svelte Extractor', link: '/extractors/svelte' },
   { text: 'Arbitrary Variants Extractor', link: '/extractors/arbitrary-variants' },
 ]

docs/extractors/mdc.md

@@ -0,0 +1,45 @@
+---
+title: MDC Extractor
+description: MDC extractor for UnoCSS (@unocss/extractor-mdc)
+---
+
+# MDC Extractor
+
+Support extracting classes from [MDC (Markdown Components)](https://content.nuxtjs.org/guide/writing/mdc) syntax.
+
+## Installation
+
+::: code-group
+  ```bash [pnpm]
+  pnpm add -D @unocss/extractor-mdc
+  ```
+  ```bash [yarn]
+  yarn add -D @unocss/extractor-mdc
+  ```
+  ```bash [npm]
+  npm install -D @unocss/extractor-mdc
+  ```
+:::
+
+```ts
+import { defineConfig } from 'unocss'
+import extractorMdc from '@unocss/extractor-mdc'
+
+export default defineConfig({
+  extractors: [
+    extractorMdc(),
+  ],
+})
+```
+
+It will apply the extraction on `.md` `.mdc` and `.markdown` files, to extract inline props usage of classes. For example
+
+```md
+# Title{.text-2xl.font-bold}
+
+Hello [World]{.text-blue-500}
+
+![image](/image.png){.w-32.h-32}
+```
+
+The `text-2xl`, `font-bold`, `text-blue-500`, `w-32`, `h-32` classes will be extracted.

packages/extractor-mdc/README.md

@@ -0,0 +1,11 @@
+# @unocss/extractor-mdc
+
+Support extracting classes from [MDC (Markdown Components)](https://content.nuxtjs.org/guide/writing/mdc)
+
+## Documentation
+
+Please refer to the [documentation](https://unocss.dev/extractors/mdc).
+
+## License
+
+MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

packages/extractor-mdc/build.config.ts

@@ -0,0 +1,15 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/index',
+  ],
+  clean: true,
+  declaration: true,
+  externals: [
+    '@unocss/core',
+  ],
+  rollup: {
+    emitCJS: true,
+  },
+})

packages/extractor-mdc/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@unocss/extractor-mdc",
+  "version": "0.55.3",
+  "description": "UnoCSS extractor for MDC",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/extractor-mdc#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unocss/unocss",
+    "directory": "packages/extractor-mdc"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-extractor"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  },
+  "devDependencies": {
+    "@unocss/core": "workspace:*"
+  }
+}

packages/extractor-mdc/src/index.ts

@@ -0,0 +1,15 @@
+import type { Extractor } from '@unocss/core'
+
+export default function extractorMdc(): Extractor {
+  return {
+    name: '@unocss/extractor-mdc',
+    async extract(ctx) {
+      if (!(ctx.id?.match(/\.(md|mdc|markdown)$/i)))
+        return
+
+      ctx.code.match(/\.[\w:\/_-]+/g)?.forEach((c) => {
+        ctx.extracted.add(c.slice(1))
+      })
+    },
+  }
+}

packages/extractor-mdc/test/extractor-mdc.test.ts

@@ -0,0 +1,39 @@
+import { createGenerator, extractorSplit } from '@unocss/core'
+import { expect, it } from 'vitest'
+import extractorMdc from '../src/index'
+
+it('extractorMdc', async () => {
+  const uno = createGenerator({
+    extractors: [
+      extractorMdc(),
+    ],
+  })
+
+  async function extract(code: string) {
+    return Array.from(await uno.applyExtractors(code, 'file.mdc'))
+  }
+
+  expect(await extract(`
+# Hello{.text-red.foo}
+
+Foo{.text-green.bg-red:10.hover:border-red/10} Bar{class="text-blue"}
+`))
+    .toMatchInlineSnapshot(`
+      [
+        "",
+        "#",
+        "Hello",
+        ".text-red.foo",
+        "Foo",
+        ".text-green.bg-red:10.hover:border-red/10",
+        "Bar",
+        "class=",
+        "text-blue",
+        "text-red",
+        "foo",
+        "text-green",
+        "bg-red:10",
+        "hover:border-red/10",
+      ]
+    `)
+})