facebook / stylex

StyleX is the styling system for ambitious user interfaces.
https://stylexjs.com
MIT License
8.22k stars 303 forks source link

Dynamic change of props not triggering styleX updates in Vue projects #479

Closed rubtsovi closed 3 months ago

rubtsovi commented 3 months ago

Describe the issue

When using the styleX in Vue projects, it appears that dynamic changes to props do not trigger updates in the generated styles.

Expected behavior

Dynamic changes to prop value should trigger the application of appropriate styles.

Steps to reproduce

  1. Create a Vue project using vite: npm create vue@latest
  2. Install @stylexjs/stylex
  3. Install vite-plugin-stylex and add this plugin to vite.config.js:
    +import styleX from 'vite-plugin-stylex`;
    export default defineConfig({
    -  plugins: [vue()],
    +  plugins: [vue(), styleX()],
    });
  4. Create a component (ie. Button) which should pass a prop to process it later by styleX like this styleX.attrs(variants[variant])
  5. Change dynamically passed prop (via debug tool, or by clicking this button)

Test case

Here I prepared the case: codesandbox

Additional comments

I tested the same with Vite + React - and it works perfectly, so assumed that the problem is not in vite-plugin-stylex

rubtsovi commented 3 months ago

My bad :/ I used props destructuring, so it did not work for dynamic props. If I pass prop to the styleX like that stylex.attrs(variants[props.variant]) it works perfectly. Closing issue.

nmn commented 3 months ago

I guess Vue props are similar to Solid where de-structuring can't be used.