Skip to content

Commit ba06c02

Browse files
LuLaValvaLuLaValva
authored
feat: add first-class support for Marko (#4995)
1 parent 15ce909 commit ba06c02

File tree

28 files changed

+292
-9
lines changed

28 files changed

+292
-9
lines changed

‎docs/.vitepress/content.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,5 +204,11 @@ export const examples: Example[] = [
204204
],
205205
stackblitz: true,
206206
},
207+
{
208+
name: 'marko-run',
209+
path: 'examples/marko-run',
210+
icon: 'i-logos-marko',
211+
stackblitz: true,
212+
},
207213
]
208214
.sort((a, b) => a.name.localeCompare(b.name))

‎docs/guide/extracting.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ This is supported in the [Vite](/integrations/vite) and [Webpack](/integrations/
2222

2323
UnoCSS will read the content that goes through your build tools pipeline and extract the utilities usages from them. This is the most efficient and accurate way to extract as we only extract the usages that are actually used in your app smartly with no additional file I/O is made during the extraction.
2424

25-
By default, UnoCSS will extract the utilities usage from files in your build pipeline with extension `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro` and then generate the appropriate CSS on demand. `.js` and `.ts` files are **NOT included by default**.
25+
By default, UnoCSS will extract the utilities usage from files in your build pipeline with extension `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro`, `.marko` and then generate the appropriate CSS on demand. `.js` and `.ts` files are **NOT included by default**.
2626

2727
To configure them, you can update your `uno.config.ts`:
2828

@@ -32,7 +32,7 @@ export default defineConfig({
3232
pipeline: {
3333
include: [
3434
// the default
35-
/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/,
35+
/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|marko|html)($|\?)/,
3636
// include js/ts files
3737
'src/**/*.{js,ts}',
3838
],

‎docs/integrations/postcss.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { defineConfig, presetWind3 } from 'unocss'
5151
export default defineConfig({
5252
content: {
5353
filesystem: [
54-
'**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
54+
'**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,marko}',
5555
],
5656
},
5757
presets: [

‎docs/integrations/vite.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,25 @@ export default defineConfig({
396396

397397
<ContentExample :item="playgrounds['vite-elm']" class="Link" integrations />
398398

399+
### Marko
400+
401+
You need to add `@marko/vite` or `@marko/run/vite` before UnoCSS's plugin.
402+
403+
```ts [vite.config.ts]
404+
import marko from '@marko/run/vite'
405+
import UnoCSS from 'unocss/vite'
406+
import { defineConfig } from 'vite'
407+
408+
export default defineConfig({
409+
plugins: [
410+
marko(),
411+
UnoCSS(),
412+
],
413+
})
414+
```
415+
416+
<ContentExample :item="playgrounds['marko-run']" class="Link" integrations />
417+
399418
## Legacy
400419

401420
If `@vitejs/plugin-legacy` with `renderModernChunks: false`, your need add it to `unocss` option

‎docs/presets/attributify.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,18 @@ declare module 'preact' {
238238
}
239239
```
240240

241+
### Marko
242+
243+
```ts
244+
import type { AttributifyAttributes } from '@unocss/preset-attributify'
245+
246+
declare global {
247+
namespace Marko {
248+
interface HTMLAttributes extends AttributifyAttributes {}
249+
}
250+
}
251+
```
252+
241253
### Attributify with Prefix
242254

243255
```ts

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default antfu(
1414
{
1515
ignores: [
1616
'**/.svelte-kit',
17+
'**/.marko-run',
1718
'**/*.global.js',
1819
'**/fixtures/**',
1920
'bench/source/gen*.js',

‎examples/marko-run/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
*.log
4+
.env

‎examples/marko-run/.marko-run/routes.d.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
WARNING: This file is automatically generated and any changes made to it will be overwritten without warning.
3+
Do NOT manually edit this file or your changes will be lost.
4+
*/
5+
6+
import { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform } from "@marko/run/namespace";
7+
import type * as Run from "@marko/run";
8+
9+
10+
declare module "@marko/run" {
11+
interface AppData extends Run.DefineApp<{
12+
routes: {
13+
"/": { verb: "get"; meta: typeof import("../src/routes/+meta.json"); };
14+
}
15+
}> {}
16+
}
17+
18+
declare module "../src/routes/+page.marko" {
19+
namespace MarkoRun {
20+
export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
21+
export type Route = Run.Routes["/"];
22+
export type Context = Run.MultiRouteContext<Route> & Marko.Global;
23+
export type Handler = Run.HandlerLike<Route>;
24+
/** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */
25+
export const route: Run.HandlerTypeFn<Route>;
26+
}
27+
}
28+
29+
declare module "../src/routes/+layout.marko" {
30+
export interface Input extends Run.LayoutInput<typeof import("../src/routes/+layout.marko")> {}
31+
namespace MarkoRun {
32+
export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
33+
export type Route = Run.Routes["/"];
34+
export type Context = Run.MultiRouteContext<Route> & Marko.Global;
35+
export type Handler = Run.HandlerLike<Route>;
36+
/** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */
37+
export const route: Run.HandlerTypeFn<Route>;
38+
}
39+
}

‎examples/marko-run/.stackblitz.mjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import fs from 'node:fs'
2+
3+
updateDependencyLinksToLatest('./package.json')
4+
5+
function updateDependencyLinksToLatest(filename) {
6+
try {
7+
const contents = fs.readFileSync(filename, 'utf-8')
8+
const updatedContent = contents.replace(/"link:.{3,}"/gi, '"latest"')
9+
fs.writeFileSync(filename, updatedContent)
10+
}
11+
catch (err) {
12+
console.error(err)
13+
}
14+
}

‎examples/marko-run/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Marko Run + UnoCSS Vite Plugin
2+
3+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/marko-run)
4+
5+
- Built in [Marko](https://markojs.com) and [Marko Run](https://markojs.com/docs/marko-run/getting-started)
6+
- Uses [UnoCSS](https://unocss.dev/) with [PresetWind3](https://unocss.dev/presets/wind3#wind3-preset), [PresetIcons](https://unocss.dev/presets/icons), and [PresetWebFonts](https://unocss.dev/presets/web-fonts)
7+
8+
Read the [documentation](https://unocss.dev/integrations/vite#marko-run) to understand more.
9+
10+
## Demo Usage
11+
12+
```bash
13+
pnpm install
14+
pnpm run dev
15+
```

0 commit comments

Comments
 (0)