Pass value to content style property in pseudo element

[javierrey]

Hi I need to pass a number to a shopping cart icon with a number on a badge.
The style defined in typescript file MyComponent.css.ts looks like this (simplified):

selectors: {
    ['&::after']: {
        content: updatedValue // this value must be passed at rendering time
    }
}

Is there a way to pass the required value from the component when it's rendered, i.e. not when buit?

If I import a dummy value at build time it shows the value in the badge correctly, but that's not valid when the value is defined in the component at the time of being rendered.

Edit: I ended up using a different approach that doesn't require the content property, but I'm still interested in knowing if this is possible with vanilla-extract.

[askoufis]

You could use a css variable combined with assignInlineVars. Something like this:

// MyComponent.css.ts
import { createVar } from '@vanilla-extract/css';

export const contentVar = createVar();

export const shoppingCartIcon = style({
  selectors: {
    ['&:after']: {
      content: contentVar
    }
  }
});

// MyComponent.tsx
import * as styles from "./MyComponent.css";
import { assignInlineVars } from "@vanilla-extract/dynamic";

const MyComponent = () => {
  const content = getShoppingCartItems();

  return (
    <div
      className={styles.shoppingCartIcon}
      style={assignInlineVars({ [styles.contentVar]: content })}
    />
  );
};

[javierrey]

Thanks Adam, that's a great code example.