Dynamic variable syntax consistency

[n8sabes]

QUESTION: In the interest of consistency and ease of use, shouldn't the syntax below in RedText work the same as a VE attribute values? Or is my syntax below in RedText malformed?

// styles.css.ts
import { keyframes, style, createVar } from '@vanilla-extract/css';
import { styled } from 'qwik-styled-ve'

export const colorVar = createVar();
export const widthVar = createVar();

// qwik-styled-ve
export const RedText = styled.span`
  color: ${colorVar};
`

// vanilla-extract
export const container = style({
  border: `dashed ${widthVar} ${colorVar}`,
});

export default "CSS"

[shiroinegai]

Here's a minimal example I came up with to use variables with the styled syntax:

// *.css.ts
import { style, createVar, globalStyle } from '@vanilla-extract/css';
import { styled, css } from 'qwik-styled-ve'

export default ''

export const colorVar = createVar()

// using variables with regular vanilla-extract syntax
export const RedText = style({
  vars: {
    [colorVar]: "red"
  },
  color: `${colorVar}`
})

// using variables with styled syntax
// this is essentially required as there doesn't seem to be a way to assign a value to the variable otherwise
globalStyle(':root', {
  vars: {
    [colorVar]: "red"
  }
})

// note the use of the css template string helper
export const RedTextWithStyled = styled.span(css`
  color: ${colorVar}
`)

// component.tsx
import { component$, useStyles$ } from '@builder.io/qwik';
import style, { RedTextWithStyled } from '*.css.ts';

export default component$(() => {
  useStyles$(style);

  return <RedTextWithStyled>This text should be red.</RedTextWithStyled>
});

[wmertens]

fixed in styled-vanilla-extract (name changed, import changed, now you import from styled-vanilla-extract/qwik)