Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0f146d0

Browse files
BeiyanYunyisxzzLittleSound
authored
feat: defineStyleX,close#821 (#823)
Co-authored-by: Kevin Deng 三咲智子 <sxzz@sxzz.moe>Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe>Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
1 parentbba0ed4 commit0f146d0

File tree

49 files changed

+962
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+962
-1
lines changed

‎.changeset/moody-rules-sneeze.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@vue-macros/define-stylex":minor
3+
"@vue-macros/common":minor
4+
"@vue-macros/config":minor
5+
"unplugin-vue-macros":minor
6+
---
7+
8+
Added`defineStyleX` macro and`v-stylex` directive.
9+

‎cspell.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
"rspack",
4646
"shiki",
4747
"strs",
48+
"stylex",
49+
"stylexjs",
4850
"sxzz",
4951
"tada",
5052
"twoslash",

‎docs/.vitepress/config/theme.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,10 @@ export function getLocaleConfig(lang: string) {
177177
text:'chainCall',
178178
link:`/chain-call`,
179179
},
180+
{
181+
text:'defineStyleX',
182+
link:`/define-stylex`,
183+
},
180184
],
181185
},
182186
],

‎docs/guide/configurations.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ All features are enabled by default except the following.
1212
-`setupSFC`
1313
-`booleanProp`
1414
-`shortBind`
15+
-`defineStyleX`
1516

1617
####Disabled by Default when Vue >= 3.3
1718

‎docs/macros/define-stylex.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
#defineStyleX <PackageVersionname="@vue-macros/define-stylex" />
2+
3+
<StabilityLevellevel="experimental" />
4+
5+
Define and consume[StyleX](https://stylexjs.com/) styles in`<script setup>`.
6+
7+
| Features| Supported|
8+
| :----------------:| :----------------:|
9+
| Vue 3|:white_check_mark:|
10+
| Nuxt 3|:white_check_mark:|
11+
| TypeScript / Volar|:white_check_mark:|
12+
| Vue 2|:white_check_mark:|
13+
14+
##Setup
15+
16+
To use StyleX, you should install and configure StyleX first. The steps could change, you may want to check the[official documentation](https://stylexjs.com/) and the[documentation of vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex) for the latest information.
17+
18+
###Vite
19+
20+
```sh
21+
pnpm add @stylexjs/stylex vite-plugin-stylex
22+
```
23+
24+
```ts [vite.config.ts] {4,13}
25+
importVuefrom'@vitejs/plugin-vue'
26+
importVueMacrosfrom'unplugin-vue-macros/vite'
27+
import {defineConfig }from'vite'
28+
importStyleXfrom'vite-plugin-stylex'
29+
30+
exportdefaultdefineConfig({
31+
plugins: [
32+
VueMacros({
33+
plugins: {
34+
vue:Vue(),
35+
},
36+
}),
37+
StyleX(),// Must be placed after Vue Macros
38+
],
39+
})
40+
```
41+
42+
```vue [App.vue] {2-3}
43+
<style>
44+
/* import StyleX stylesheet, according to https://github.com/HorusGoul/vite-plugin-stylex */
45+
@stylex stylesheet;
46+
</style>
47+
```
48+
49+
##Basic Usage
50+
51+
```vue [App.vue] twoslash
52+
<script setup lang="ts">
53+
const styles = defineStyleX({
54+
red: { color: 'red' },
55+
})
56+
57+
// ...
58+
// ---cut-start---
59+
declare const vStylex: any
60+
// ---cut-end---
61+
</script>
62+
63+
<template>
64+
<p v-stylex="styles.red">Red</p>
65+
</template>
66+
```
67+
68+
:::details Compiled Code (with some simplifications)
69+
70+
```vue [App.vue] twoslash
71+
<script lang="ts">
72+
const styles = _stylex_create({
73+
red: { color: 'red' },
74+
})
75+
</script>
76+
77+
<script setup lang="ts">
78+
import {
79+
attrs as _stylex_attrs,
80+
create as _stylex_create,
81+
} from '@stylexjs/stylex'
82+
83+
// ...
84+
</script>
85+
86+
<template>
87+
<p v-bind="_stylex_attrs(styles.red)">Red</p>
88+
</template>
89+
```
90+
91+
:::
92+
93+
##Conditional Styles
94+
95+
Optional and multiple rules are supported.
96+
97+
```vue [App.vue] twoslash
98+
<script setup lang="ts">
99+
defineProps<{ bold?: boolean }>()
100+
101+
const styles = defineStyleX({
102+
red: { color: 'red' },
103+
bold: { fontWeight: 'bold' },
104+
})
105+
// ---cut-start---
106+
declare const vStylex: any
107+
// ---cut-end---
108+
</script>
109+
110+
<template>
111+
<span v-stylex="(styles.red, bold && styles.bold)">Red</span>
112+
</template>
113+
```
114+
115+
:::details Compiled Code (with some simplifications)
116+
117+
```vue [App.vue] twoslash
118+
<script lang="ts">
119+
const styles = _stylex_create({
120+
red: { color: 'red' },
121+
bold: { fontWeight: 'bold' },
122+
})
123+
</script>
124+
125+
<script setup lang="ts">
126+
import {
127+
attrs as _stylex_attrs,
128+
create as _stylex_create,
129+
} from '@stylexjs/stylex'
130+
131+
defineProps<{ bold?: boolean }>()
132+
</script>
133+
134+
<template>
135+
<span v-bind="_stylex_attrs(styles.red, bold && styles.bold)">Red</span>
136+
</template>
137+
```
138+
139+
:::

‎docs/macros/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ Please make sure `unplugin-vue-macros` is set up correctly. If you haven't yet,
2525
-[setupComponent](./setup-component.md)
2626
-[setupSFC](./setup-sfc.md)
2727
-[chainCall](./chain-call.md)
28+
-[defineStyleX](./define-stylex.md)

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@nolebase/vitepress-plugin-git-changelog":"^2.6.1",
2020
"@nolebase/vitepress-plugin-highlight-targeted-heading":"^2.6.1",
2121
"@shikijs/vitepress-twoslash":"^1.22.0",
22+
"@stylexjs/stylex":"catalog:",
2223
"@vitejs/plugin-vue-jsx":"^4.0.1",
2324
"@vueuse/core":"^11.1.0",
2425
"unplugin-vue-macros":"workspace:*",

‎docs/vue-macros.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default defineConfig({
44
booleanProp:true,
55
defineEmit:true,
66
defineProp:true,
7+
defineStyleX:true,
78
exportRender:true,
89
jsxRef:true,
910
scriptLang:true,

‎docs/zh-CN/macros/define-stylex.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
#defineStyleX <PackageVersionname="@vue-macros/define-stylex" />
2+
3+
<StabilityLevellevel="experimental" />
4+
5+
在`<script setup>` 定义与使用[StyleX](https://stylexjs.com/) 的 Atomic CSS-in-JS.
6+
7+
| Features| Supported|
8+
| :----------------:| :----------------:|
9+
| Vue 3|:white_check_mark:|
10+
| Nuxt 3|:white_check_mark:|
11+
| TypeScript / Volar|:white_check_mark:|
12+
| Vue 2|:white_check_mark:|
13+
14+
##配置
15+
16+
在使用这个宏之前，你需要先引入与配置 StyleX。步骤可能会有所变化，你可能需要查看[StyleX 官方文档](https://stylexjs.com/) 以及[vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex) 的文档，以获取最新信息。
17+
18+
###Vite
19+
20+
```sh
21+
pnpm add @stylexjs/stylex vite-plugin-stylex
22+
```
23+
24+
```ts [vite.config.ts] {4,13}
25+
importVuefrom'@vitejs/plugin-vue'
26+
importVueMacrosfrom'unplugin-vue-macros/vite'
27+
import {defineConfig }from'vite'
28+
importStyleXfrom'vite-plugin-stylex'
29+
30+
exportdefaultdefineConfig({
31+
plugins: [
32+
VueMacros({
33+
plugins: {
34+
vue:Vue(),
35+
},
36+
}),
37+
StyleX(),// 必须放在 Vue Macros 插件后
38+
],
39+
})
40+
```
41+
42+
```vue [App.vue] {2-3}
43+
<style>
44+
/* 引入 StyleX 样式表, 参考： https://github.com/HorusGoul/vite-plugin-stylex */
45+
@stylex stylesheet;
46+
</style>
47+
```
48+
49+
##基本用法
50+
51+
```vue [App.vue] twoslash
52+
<script setup lang="ts">
53+
const styles = defineStyleX({
54+
red: { color: 'red' },
55+
})
56+
57+
// ...
58+
// ---cut-start---
59+
declare const vStylex: any
60+
// ---cut-end---
61+
</script>
62+
63+
<template>
64+
<p v-stylex="styles.red">Red</p>
65+
</template>
66+
```
67+
68+
:::details 编译结果（有所简化）
69+
70+
```vue [App.vue] twoslash
71+
<script lang="ts">
72+
const styles = _stylex_create({
73+
red: { color: 'red' },
74+
})
75+
</script>
76+
77+
<script setup lang="ts">
78+
import {
79+
attrs as _stylex_attrs,
80+
create as _stylex_create,
81+
} from '@stylexjs/stylex'
82+
83+
// ...
84+
</script>
85+
86+
<template>
87+
<p v-bind="_stylex_attrs(styles.red)">Red</p>
88+
</template>
89+
```
90+
91+
:::
92+
93+
##条件样式
94+
95+
你可以应用多个样式，也可以根据条件应用样式。
96+
97+
```vue [App.vue] twoslash
98+
<script setup lang="ts">
99+
defineProps<{ bold?: boolean }>()
100+
101+
const styles = defineStyleX({
102+
red: { color: 'red' },
103+
bold: { fontWeight: 'bold' },
104+
})
105+
// ---cut-start---
106+
declare const vStylex: any
107+
// ---cut-end---
108+
</script>
109+
110+
<template>
111+
<span v-stylex="(styles.red, bold && styles.bold)">Red</span>
112+
</template>
113+
```
114+
115+
:::details 编译结果（有所简化）
116+
117+
```vue [App.vue] twoslash
118+
<script lang="ts">
119+
const styles = _stylex_create({
120+
red: { color: 'red' },
121+
bold: { fontWeight: 'bold' },
122+
})
123+
</script>
124+
125+
<script setup lang="ts">
126+
import {
127+
attrs as _stylex_attrs,
128+
create as _stylex_create,
129+
} from '@stylexjs/stylex'
130+
131+
defineProps<{ bold?: boolean }>()
132+
</script>
133+
134+
<template>
135+
<span v-bind="_stylex_attrs(styles.red, bold && styles.bold)">Red</span>
136+
</template>
137+
```
138+
139+
:::

‎docs/zh-CN/macros/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@
2525
-[setupComponent](./setup-component.md)
2626
-[setupSFC](./setup-sfc.md)
2727
-[chainCall](./chain-call.md)
28+
-[defineStyleX](./define-stylex.md)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp