imported values set in css({...}) doesn't work

[Liooo]

minimum reproducible codesandbox here: https://codesandbox.io/p/devbox/5ffnxl

I'm sure I'm missing something in the doc, but how can I get values imported from other files to be used in style?

import { css } from "../styled-system/css";
import { myValue, myProcessedValue } from "./theme";

export const style = css({
  color: myValue, // ❌ doesn't work
  backgroundColor: myProcessedValue.value, // ❌ this doesn't work
  borderBottom: "3px solid green", // ✅ this works
});

theme.ts is simply

export const myValue = "blue";

const processSomething = (v) => v;
export const myProcessedValue = processSomething({ value: "red" });

[anubra266]

https://panda-css.com/docs/guides/dynamic-styling

[Liooo]

@anubra266 thanks, even these static string imports are considered dynamic?

[anubra266]

@anubra266 thanks, even these static string imports are considered dynamic?

@Liooo panda works with static extraction. So any value that be known at first glance of your code is not extracted by pánda.

[Liooo]

got it, thank you very much 🙂