As a css-in-js newbie, i have really no idea how to use this lib when i read only the website.

After study the code and the examples it got clearer. But big waste of time, if everybody has to do that.

You should add a sentence for which benefit this lib is absolute needed and superior to other solutions.
E.g. why should i use this and not the things inlcuded in styled-components like theming?
smaller virtual DOM updates for a newbie like me, how, what perfomance gain could i expect?

Example from Webpage:
What are tokens?
Why i need and define tokens?
Confusing example "Create themeable CSS Snipptes": What is gradientStartColor variable? is it mistyped startColor?

Describe the api:
Which parameters has createVar?
How to access them? with .val, with .toStyle(...)?
createGlobalTheme with scope without scope "", difference?

See: https://swc.rs/docs/plugin/selecting-swc-core#088x-

The update would be not too hard.
The commit for updating swc_core in official plugins is swc-project/plugins@b42da83

After the latest commits to this project I'm really hooked to improve it further.

One aspect that I noticed that bugs me is that when you switch from Babel to SWC or vice versa, there will be changes for the names of the variables (with and without displayNames).

I have a branch that changes the tests so that the interoperability is checked and I started with changing the babel plugin logic (to be the same as in SWC), because I think the visual names in SWC are much better.

I wanted to ask if this direction is generally a good idea or do you see issues?

if not specified the babel plugin will set displayName to true for development

we should add the same behaviour to the swc plugin - see also: swc-project/swc#3677

declaring multiple vars at once is quite repetitive right now e.g.:

const a = createVar()
const b = createVar()
const c = createVar()

maybe we could create a new helper createVars which would allow to use the spread operator to declare multiple vars at the same time:

export function* createVars<TValue = string> () { while(1) { yield createVar<TValue>() }}

const [a,b,c] = createVars();

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'.

we need to investigate why context.filename might be different for each environment and generate different diffs