vanilla-extract.. 가상선택자

vanilla-extract에서 가상선택자를 이용해서 radio버튼 checkbox를 만들다가 이슈가 발생.

 

// css export const label = style([ sprinkles({ display: 'flex', flexDirection: 'row', alignItems: 'center', position: 'relative', gap: 8, }), ]); export const input = style([ sprinkles({ display: 'none', }), ]); export const radioIconWrapper = style([ sprinkles({ display: 'flex', placeItems: 'center', borderRadius: 'circle', }), { border: `1px solid ${vars.color['dark-light']}`, width: 16, height: 16, cursor: 'pointer', color: vars.color.white, selectors: { [`${label}:hover &`]: { borderColor: vars.color['dark-lightHover'], }, [`${input}:checked + &`]: { borderColor: vars.color['primary-normal'], }, [`${input}:checked + &::after`]: { backgroundColor: vars.color['primary-normal'], }, [`${input}:disabled + &`]: { borderColor: vars.color['dark-light'], }, [`${input}:disabled + &::after`]: { backgroundColor: vars.color['dark-light'], }, [`${label}:hover > ${input}:checked + &`]: { borderColor: vars.color['primary-normalHover'], }, [`${label}:hover > ${input}:checked + &::after`]: { backgroundColor: vars.color['primary-normalHover'], }, [`${label}:active > ${input}:checked + &`]: { borderColor: vars.color['primary-normalActive'], }, [`${label}:active > ${input}:checked + &::after`]: { backgroundColor: vars.color['primary-normalActive'], }, '&::after': { content: '', width: 8, height: 8, borderRadius: '50%', }, }, }, ]); // js export const radioLabel = style({ selectors: { [`${input}:disabled + ${radioIconWrapper} + &`]: { color: vars.color['grey-dark'], }, }, }); type RadioProps = { label?: string; } & ComponentProps<'input'>; export const Radio = forwardRef( ({ label, className, id, ...props }, ref): JSX.Element => { return (

{label} ); } ); Radio.displayName = 'radio';

 

 

 

vanilla-extract에서 sprinkles를 이요해서 프로젝트를 진행중인데 sprinkles는 미리 정의해놓고 사용중이다..

label을 선언했듯이 sprinkles만 가지고 정의가 되었는데.. 문제는 셀렉터를 사용하면서 발생..

sprinkles를 사용하게 되면 classname이 가상으로 만들어지는게 아니라 sprinkles에 정의된 스타일이 추가되어서 만들어진다. 이때 sprinkles만으로 스타일을 구성하게되면 가상으로 classname이 만들어지지 않아서 셀렉터에서 사용시 인식이 안됨... 

꼭!! 9번 16번 라인처럼 사용해야지만 classname이 생성됨.

export const label = style([
  sprinkles({
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    position: 'relative',
    gap: 8,
  }),
  {}
]);

export const input = style([
  sprinkles({
    display: 'none',
  }),
  {}
]);