Dynamic variable syntax consistency

[n8sabes]

Dynamic variable syntax consistency

[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)