Linaria - TypeScript problem

[tomahl]

Hey there,

Using Linaria and the code below:

import { css } from '@linaria/core';
import { createVar } from 'css-variable';

const myColor = createVar({ value: 'rebeccapurple' });

export const foo = css`
	background-color: ${myColor};
`;

I get the following error message:

Argument of type 'CSSVariable' is not assignable to parameter of type 'string | number | CSSProperties | StyledMeta'. Type 'CSSVariable' is not assignable to type 'CSSProperties'. Index signature for type 'string' is missing in type 'CSSVariable'.

[jantimon]

the problem is that linaria does not support String inside css declaration (only string with lowercase s)

can you please try ${myColor.val()}?

[tomahl]

can you please try ${myColor.val()}?

That worked fine. 👍 But, in a large code-base it would be nice if one where able to use the short version.

[jantimon]

absolutely - could you please ask the linaria team if it would be possible to extend linaria in this direction?

Right now a CSSVariable instance is a String:

https://github.com/jantimon/css-variable/blob/e04c619130c076c4bd3dd25dcf8be959985f3e1f/src/index.ts#L37-L41

adjusting the type here would probably already fix the issue:

https://github.com/callstack/linaria/blob/9bb782d0b875a75c9a9b5051b1fbca03db8b554a/packages/core/src/css.ts#L6-L9