Skip to content

Commit 0f146d0

Browse files
BeiyanYunyisxzzLittleSound
authored
feat: defineStyleX, close #821 (#823)
Co-authored-by: Kevin Deng 三咲智子 <[email protected]> Co-authored-by: Rizumu Ayaka <[email protected]> Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
1 parent bba0ed4 commit 0f146d0

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

+9
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

+2
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

+4
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

+1
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

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# defineStyleX <PackageVersion name="@vue-macros/define-stylex" />
2+
3+
<StabilityLevel level="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+
import Vue from '@vitejs/plugin-vue'
26+
import VueMacros from 'unplugin-vue-macros/vite'
27+
import { defineConfig } from 'vite'
28+
import StyleX from 'vite-plugin-stylex'
29+
30+
export default defineConfig({
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

+1
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

+1
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

+1
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

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# defineStyleX <PackageVersion name="@vue-macros/define-stylex" />
2+
3+
<StabilityLevel level="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+
import Vue from '@vitejs/plugin-vue'
26+
import VueMacros from 'unplugin-vue-macros/vite'
27+
import { defineConfig } from 'vite'
28+
import StyleX from 'vite-plugin-stylex'
29+
30+
export default defineConfig({
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

+1
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)

‎packages/common/src/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const DEFINE_MODELS_DOLLAR = '$defineModels'
1111
export const DEFINE_SETUP_COMPONENT = 'defineSetupComponent'
1212
export const DEFINE_RENDER = 'defineRender'
1313
export const DEFINE_SLOTS = 'defineSlots'
14+
export const DEFINE_STYLEX = 'defineStyleX'
1415
export const DEFINE_PROP = 'defineProp'
1516
export const DEFINE_PROP_DOLLAR = '$defineProp'
1617
export const DEFINE_EMIT = 'defineEmit'

‎packages/config/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"@vue-macros/define-props-refs": "workspace:*",
114114
"@vue-macros/define-render": "workspace:*",
115115
"@vue-macros/define-slots": "workspace:*",
116+
"@vue-macros/define-stylex": "workspace:*",
116117
"@vue-macros/devtools": "workspace:^",
117118
"@vue-macros/export-expose": "workspace:*",
118119
"@vue-macros/export-props": "workspace:*",

‎packages/config/src/options.ts

+7
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import type { Options as OptionsDefineProps } from '@vue-macros/define-props'
2929
import type { Options as OptionsDefinePropsRefs } from '@vue-macros/define-props-refs'
3030
import type { Options as OptionsDefineRender } from '@vue-macros/define-render'
3131
import type { Options as OptionsDefineSlots } from '@vue-macros/define-slots'
32+
import type { Options as OptionsDefineStyleX } from '@vue-macros/define-stylex'
3233
import type { Options as OptionsExportExpose } from '@vue-macros/export-expose'
3334
import type { Options as OptionsExportProps } from '@vue-macros/export-props'
3435
import type { Options as OptionsExportRender } from '@vue-macros/export-render'
@@ -119,6 +120,11 @@ export interface FeatureOptionsMap {
119120
* @default vueVersion < 3.3
120121
*/
121122
defineSlots: OptionsDefineSlots
123+
/**
124+
* @see {@link https://vue-macros.dev/macros/define-stylex.html}
125+
* @default false
126+
*/
127+
defineStyleX: OptionsDefineStyleX
122128
/**
123129
* @see {@link https://vue-macros.dev/features/export-expose.html}
124130
* @default false
@@ -253,6 +259,7 @@ export function resolveOptions(
253259
definePropsRefs: resolveSubOptions('definePropsRefs'),
254260
defineRender: resolveSubOptions('defineRender'),
255261
defineSlots: resolveSubOptions('defineSlots', 3.3),
262+
defineStyleX: resolveSubOptions('defineStyleX', false),
256263
exportExpose: resolveSubOptions('exportExpose', false),
257264
exportProps: resolveSubOptions('exportProps', false),
258265
exportRender: resolveSubOptions('exportRender', false),

‎packages/define-stylex/macros-global.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @ts-expect-error - redeclare
2+
declare const defineStyleX: typeof import('./macros').defineStyleX

0 commit comments

Comments
 (0)