Styled-jsx: Constants might not work in external styles - investigate

[TonyHYK]

Hi I'm trying to add constants in an external css file like so

/* constants.js */
export default { green: 'green' }

/* styles.js */
import color from './constants'
export default css`{ div { color: ${color.green} } }`

/* comp.js */
import styles from './styles'
export default () => <div>blah<style jsx>{styles}</style></div>

I see the following message:
``Module build failed: SyntaxError: Found anundefinedor invalid value in your styles:color.green`.

  If you are trying to use dynamic styles in external files this is unfortunately not possible yet.
  Please put the dynamic parts alongside the component.

```

[giuseppeg]

uhm odd, those are not dynamic styles. You are using a constant and it should work. However dynamic styles like this.props.something shouldn't work. I'll investigate

[TonyHYK]

@giuseppeg sorry let me clarify on the example, this only comes up when I try to use constants imported from another file, I updated the example to reflect that

[TonyHYK]

hmm interesting it works if I do the following

/* constants.js */
const green = 'green';
export { green }

/* styles.js */
import { green } from './constants'
export default css`{ div { color: ${green} } }`

[giuseppeg]

@TonyHYK yep there is a bug indeed when using color.green it throws. green should work so as a workaround for now you could use:

import color from './constants'
const { green } = color
export default css`{ div { color: ${color.green} } }`

or

import { green } from './constants'
export default css`{ div { color: ${green} } }`