cva imported from another file does not work

[lilouartz]

Let's say I have a style like:

import { cva } from '#app/styled-system/css';

export const link = cva({
  base: {
    _active: {
      outline: '1px dotted #a00e3f',
    },
    _hover: {
      textDecorationThickness: '2px',
    },
    color: '#000',
    outline: '2px solid #0ff',
    textDecoration: 'underline',
    textDecorationThickness: '1px',
    textUnderlineOffset: '0.2em',
  },
});

If I import that style in another file, it does not apply the styles, e.g.

import { link } from '#app/styles';

// ...

<Link
  className={link()}
  to={getUrl('/terms-of-service')}
>
  Terms of Service
</Link>
<Link
  className={link()}
  to={getUrl('/privacy-policy')}
>
  Privacy Policy
</Link>

However, if I declare it in the same file, it works no-problem. Mine is a Remix project. Am I doing something wrong?

If helpful, this is an example of my website: https://pillser.com/supplements/sbo-probiotics-2274

[lilouartz]

I figured it out. It is because this file was not included in panda.config.ts#include configuration.

[lilouartz]

However, hot reload still does not work. I must have overlooked another setting.