Using a static value imported from a different file inside the css props doesn't work

[IgnusG]

I know it's not possible to use static values imported from other files (only the current one), but dynamic values should be supported through the css prop:

import TOKENS from "./tokens";

function Something(props: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      {...props}
      css={css`
        background-color: ${TOKENS.BLUE};
      `}
    />
  );
}

This results in the following error:

./src/Something.tsx
TypeError: Cannot read properties of undefined (reading 'find')
    at async Promise.all (index 0)

If I change the lookup slightly by "artificially adding" an evaluation step it works again:

import TOKENS from "./tokens";

function Something(props: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      {...props}
      css={css`
        background-color: ${true && TOKENS.BLUE}; // Note the always true conditional
      `}
    />
  );
}

I think this should be relaxed such that static values that are not found in the current file are treated as dynamic values so that the workaround isn't necessary.

[IgnusG]

This also works:

import TOKENS from "./tokens";

function Something(props: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      {...props}
      css={css`
        background-color: ${`${TOKENS.BLUE}`}; // Wrapping the static value in another string
      `}
    />
  );
}

[jquense]

this should already be supported...we use dynamic values like this all the time with the css prop. Are you sure there isn't an issue with the token value? Would you mind putting together a reproduction i can run, since this looks more like a bug than anything.