Clear and concise description of the problem

StyleX is a styling system developed by Meta. It's also known as an "atomic css in js at compile time" solution to styling.

For example, these code:

<script setup lang="ts">
import 'virtual:stylex.css'
</script>

<script lang="ts">
import { create, attrs } from '@stylexjs/stylex'

const styles = create({ redBold: { color: 'red', fontWeight: 'bold' } })
</script>

<template>
  <p><span :class="attrs(styles.redBold).class">Red</span> Text</p>
</template>

compiles to:

.x1e2nbdu {
  color: red;
}
.x117nqv4 {
  font-weight: 700;
}

const In = {},
  _o = { redBold: { color: 'x1e2nbdu', fontWeight: 'x117nqv4', $$css: !0 } },
  bo = Fi({
    __name: 'App',
    setup(e) {
      return (t, s) => (
        wl(),
        El('p', null, [
          Bs('span', { class: Wt(hs(mo)(hs(_o).redBold).class) }, 'Red', 2),
          s[0] || (s[0] = Cr(' Text'))
        ])
      )
    }
  })

in HTML, it looks like:

<p><span class="x1e2nbdu x117nqv4">Red</span> Text</p>

However, the create() function can only be invoked in module scope, when it's in <script setup>, it will invoked in the setup() function scope, causing errors: stylex.create() is only allowed at the root of a program.

Suggested solution

I'd like to write a macro like defineStyleX, so I can have a better DX with StyleX and Vue.

<script setup lang="ts">
import 'virtual:stylex.css'

defineStyleX({
  redBold: {
    color: 'red',
    fontWeight: 'bold'
  }
})
</script>

<template>
  <p><span v-stylex="this.$stylex.redBold">Red</span> Text</p>
</template>

Alternative

PandaCSS, as an alternative to StyleX, uses PostCSS to extract the class name and parse styles. Unlike StyleX, PandaCSS's function can be invoked in setup() scope, or even render() scope.

However, PandaCSS relies on PostCSS, which introduces more complexity. StyleX is a more lightweight choice since it only uses babel.

Additional context

I'd like to make a Pull Request after discussing about the style of the solution. v-stylex="this.$stylex.redBold" is might not a good idea. I can also create another repository to introduce the feature, but vue-macros provides some handy utilities for me.

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.