Skip to content

Commit 3c90ea0

Browse files
zhiyuanzmjzhiyuanzmj
authored
fix(define-stylex): use props instead of attrs from stylex@^0.13.0 (#979)
* feat(define-stylex): use props instead of attrs for stylex@^0.13.0 * fix: build docs
1 parent 1cb9bed commit 3c90ea0

File tree

4 files changed

+18
-18
lines changed

4 files changed

+18
-18
lines changed

‎docs/macros/define-stylex.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ const styles = _stylex_create({
7676
7777
<script setup lang="ts">
7878
import {
79-
attrs as _stylex_attrs,
8079
create as _stylex_create,
80+
props as _stylex_props,
8181
} from '@stylexjs/stylex'
8282
8383
// ...
8484
</script>
8585
8686
<template>
87-
<p v-bind="_stylex_attrs(styles.red)">Red</p>
87+
<p v-bind="_stylex_props(styles.red)">Red</p>
8888
</template>
8989
```
9090

@@ -124,15 +124,15 @@ const styles = _stylex_create({
124124
125125
<script setup lang="ts">
126126
import {
127-
attrs as _stylex_attrs,
128127
create as _stylex_create,
128+
props as _stylex_props,
129129
} from '@stylexjs/stylex'
130130
131131
defineProps<{ bold?: boolean }>()
132132
</script>
133133
134134
<template>
135-
<span v-bind="_stylex_attrs(styles.red, bold && styles.bold)">Red</span>
135+
<span v-bind="_stylex_props(styles.red, bold && styles.bold)">Red</span>
136136
</template>
137137
```
138138

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ const styles = _stylex_create({
7676
7777
<script setup lang="ts">
7878
import {
79-
attrs as _stylex_attrs,
8079
create as _stylex_create,
80+
props as _stylex_props,
8181
} from '@stylexjs/stylex'
8282
8383
// ...
8484
</script>
8585
8686
<template>
87-
<p v-bind="_stylex_attrs(styles.red)">Red</p>
87+
<p v-bind="_stylex_props(styles.red)">Red</p>
8888
</template>
8989
```
9090

@@ -124,15 +124,15 @@ const styles = _stylex_create({
124124
125125
<script setup lang="ts">
126126
import {
127-
attrs as _stylex_attrs,
128127
create as _stylex_create,
128+
props as _stylex_props,
129129
} from '@stylexjs/stylex'
130130
131131
defineProps<{ bold?: boolean }>()
132132
</script>
133133
134134
<template>
135-
<span v-bind="_stylex_attrs(styles.red, bold && styles.bold)">Red</span>
135+
<span v-bind="_stylex_props(styles.red, bold && styles.bold)">Red</span>
136136
</template>
137137
```
138138

‎packages/define-stylex/src/core/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
import type { Node } from '@babel/types'
1919

2020
const STYLEX_CREATE = '_stylex_create'
21-
const STYLEX_ATTRS = '_stylex_attrs'
21+
const STYLEX_PROPS = '_stylex_props'
2222

2323
function transformDirective(s: MagicStringAST): NodeTransform {
2424
return (node) => {
@@ -41,7 +41,7 @@ function transformDirective(s: MagicStringAST): NodeTransform {
4141
const prefix = hasColon ? '' : '('
4242
const postfix = hasColon ? '' : ')'
4343

44-
if (directiveVStyleX.exp.content.includes(STYLEX_ATTRS)) {
44+
if (directiveVStyleX.exp.content.includes(STYLEX_PROPS)) {
4545
s?.overwrite(
4646
directiveVStyleX.loc.start.offset,
4747
directiveVStyleX.loc.end.offset,
@@ -53,7 +53,7 @@ function transformDirective(s: MagicStringAST): NodeTransform {
5353
s?.overwrite(
5454
directiveVStyleX.loc.start.offset,
5555
directiveVStyleX.loc.end.offset,
56-
`v-bind="${STYLEX_ATTRS}${prefix}${directiveVStyleX.exp.content}${postfix}"`,
56+
`v-bind="${STYLEX_PROPS}${prefix}${directiveVStyleX.exp.content}${postfix}"`,
5757
)
5858
}
5959
}
@@ -106,7 +106,7 @@ export function transformDefineStyleX(
106106

107107
s.appendRight(
108108
setupOffset,
109-
`\nimport { create as ${STYLEX_CREATE}, attrs as ${STYLEX_ATTRS} } from '@stylexjs/stylex'`,
109+
`\nimport { create as ${STYLEX_CREATE}, props as ${STYLEX_PROPS} } from '@stylexjs/stylex'`,
110110
)
111111

112112
return generateTransform(s, id)

‎packages/define-stylex/tests/__snapshots__/fixtures.test.ts.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ exports[`fixtures > ./fixtures/basic.vue 1`] = `
55
const styles = _stylex_create({ redBold: { color: 'red', fontWeight: 'bold' } })
66
</script>
77
<script setup lang="ts">
8-
import { create as _stylex_create, attrs as _stylex_attrs } from '@stylexjs/stylex'
8+
import { create as _stylex_create, props as _stylex_props } from '@stylexjs/stylex'
99
1010
</script>
1111
1212
<template>
13-
<p><span v-bind="_stylex_attrs(styles.redBold)">Red</span> Text</p>
13+
<p><span v-bind="_stylex_props(styles.redBold)">Red</span> Text</p>
1414
</template>
1515
"
1616
`;
@@ -23,12 +23,12 @@ const styles = _stylex_create({
2323
})
2424
</script>
2525
<script setup lang="ts">
26-
import { create as _stylex_create, attrs as _stylex_attrs } from '@stylexjs/stylex'
26+
import { create as _stylex_create, props as _stylex_props } from '@stylexjs/stylex'
2727
2828
</script>
2929
3030
<template>
31-
<p><span v-bind="_stylex_attrs(styles.red, styles.bold)">Red</span> Text</p>
31+
<p><span v-bind="_stylex_props(styles.red, styles.bold)">Red</span> Text</p>
3232
</template>
3333
"
3434
`;
@@ -41,13 +41,13 @@ const styles = _stylex_create({
4141
})
4242
</script>
4343
<script setup lang="ts">
44-
import { create as _stylex_create, attrs as _stylex_attrs } from '@stylexjs/stylex'
44+
import { create as _stylex_create, props as _stylex_props } from '@stylexjs/stylex'
4545
defineProps<{ bold?: boolean }>()
4646
4747
</script>
4848
4949
<template>
50-
<p><span v-bind="_stylex_attrs(styles.red, bold && styles.bold)">Red</span> Text</p>
50+
<p><span v-bind="_stylex_props(styles.red, bold && styles.bold)">Red</span> Text</p>
5151
</template>
5252
"
5353
`;

0 commit comments

Comments
 (0)