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:

css-variable/src/index.ts

Lines 37 to 41 in e04c619

	export class CSSVariable<TValue = string> extends (
	// Inherit from String to be compatible to most CSS-in-JS solutions
	// Hacky cast to any for reduced autocomplete
	String as any as { new(base: string): { toString: () => string } }
	) {

adjusting the type here would probably already fix the issue:

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