firstThatWorks should not be called at runtime, but runtime is the only way to reference an image (url(${myImage.src}))

[Dattaya]

From issue #539 (comment) I've learned that the only way to reference an image is to use dynamic styles. But the problem then is that stylex.firstThatWorks has to be compiled away and incompatible with the runtime. This is what I'm trying to do:

const styles = stylex.create({
  dynamic: () => ({
    backgroundImage: stylex.firstThatWorks(
      `var(--paletteTitleBackground), url('${headerJpg.src}')`,
      `var(--paletteTitleBackground), image-set(
        url('${headerAvif.src}') type('image/avif'),
        url('${headerJpg.src}') type('image/jpeg')
      )`
    ),
  }),
})

The only workaround I can think of so far is to move the images into the static folder, but that would make the folder too crowded, not exactly a perfect solution.
Thanks!

[nmn]

You should only be using values passed in as arguments:

const styles = stylex.create({
  dynamic: (jpgSource, avifSource) => ({
    backgroundImage: stylex.firstThatWorks(
      `var(--paletteTitleBackground), url('${jpgSource}')`,
      `var(--paletteTitleBackground), image-set(
        url('${avifSource}') type('image/avif'),
        url('${jpgSource}') type('image/jpeg')
      )`
    ),
  }),
})

If this still doesn't work, please open an issue as it should work.

[Dattaya]

Thanks so much for the answer. It still errors with this message: 'stylex.firstThatWorks' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'.
I did another test and this does not throw an error:

const styles = stylex.create({
  dynamic: () => ({
    position: stylex.firstThatWorks('sticky', '-webkit-sticky', 'fixed'),
  }),
})
console.log(styles.dynamic())

but this (with an argument that's passed to firstThatWorks) does:

const styles = stylex.create({
  dynamic: (test: string) => ({
    position: stylex.firstThatWorks('sticky', '-webkit-sticky', test),
  }),
})
console.log(styles.dynamic('fixed'))

But maybe it's because something was misconfigured, so I'll recheck everything first before opening an issue.
Edit: playground's fork