Interpolation in styled template literal doesn't support values or expressions

[jaredcrowe]

Describe the bug
When using the styled component API, expression interpolation only seems to work when using inline functions or a variable that points to a value.

To Reproduce
The following compiles successfully but produces broken CSS:

const Div = styled.div`
  border-radius: ${2 + 2}px;
`;

const br = 2 + 2;
const Div = styled.div`
  border-radius: ${br}px;
`;

The following fails to compile:

const Div = styled.div`
  border-radius: ${4}px;
`;

const Div = styled.div`
  border-radius: ${'4'}px;
`;

const Div = styled.div`
  border-radius: ${`${4}`}px;
`;

const getBr = () => 4;
const Div = styled.div`
  border-radius: ${getBr}px;
`;

These work correctly, however:

const br = 4;
const Div = styled.div`
  border-radius: ${br}px;
`;

const Div = styled.div`
  border-radius: ${() => 2 + 2}px;
`;

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 0.3.2

[itsdouges]

Thanks mate!

Can you double check if this works?

const br = 2 + 2;
const Div = styled.div`
  line-height: ${br};
`;

I'll also release the latest version of Compiled just to make sure.

edit:

To github.com:atlassian-labs/compiled-css-in-js.git

• [new tag] v0.4.0 -> v0.4.0

done

[jaredcrowe]

That doesn't work in v0.3.2 either. It compiles but breaks the styles.

Just tried upgrading to v0.4 and I get an Element type is invalid runtime error in the component even when not using interpolation 😬

[itsdouges]

I'll look into it 👍

Stick to 0.3 for now - if you can track down what's blowing up lmk. The website (https://compiledcssinjs.com/) is on the latest version as well 🤔

[itsdouges]

I have a PR up here #198 to fix it 👍