How to dynamically style :after?

[aldibatyr]

We currently transition from styled-components to vanilla-extract. I am looking for a way to style &:after using sprinkles or vanilla-extract. We currently assign some props to the component that determine the overall look. Like background image and font-size based on the props. I was wondering if this can be done dynamically using vanilla-extract and sprinkles?

what we have right now for the component with styled-components looks something like:

const Component = styled.div`
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : "none")};
  width: ${prop("size")};
  height: ${prop("size")};
// other styles
&:after {
  visibility: ${({ bgImage }) => (bgImage ? "hidden" : "visible")};
  font-size: ${withProp("size", (size) => `calc(${size} / 2.5)`)};
// other styles
}
` 

any advice is appreciated!

Thanks!

[m0ngr31]

I think you could do it something like this:

component.css.ts:

import {createVar, style} from '@vanilla-extract/css';
import {calc} from '@vanilla-extract/css-utils';

export const afterFontSize = createVar();
const fontSizeCalc = calc(afterFontSize).divide(2.5).toString();

export const afterVisible = style({
  selectors: {
    '&:after': {
      fontSize: fontSizeCalc,
      visibility: 'visible',
    }
  },
});

export const afterHidden = style({
  selectors: {
    '&:after': {
      fontSize: fontSizeCalc,
      visibility: 'hidden',
    }
  },
});

component.tsx

import {assignInlineVars} from '@vanilla-extract/dynamic';

import * as styles from './component.css';

export const Component = (props) => {
  return (
    <div
      style={{
        ...assignInlineVars({
          [styles.afterFontSize]: props.size,
        }),
        width: props.size,
        height: props.size,
        backgroundImage: props.bgImage ? `url(${props.bgImage})` : 'none',
      }}
      className={props.bgImage ? styles.afterHidden : styles.afterVisible}
    >Something in here I presume</div>
  );
};