Any workaround for addVariant?

[tettoffensive]

I was wanting to use addVariant which I'm aware that twin.macro doesn't support.

What I want is to access the sibling of an input radio type which is set to display:none to apply a border to the child when checked.

<label htmlFor="aChoice">
  <input tw="form-radio hidden cursor-pointer checked:sibling:border-primary"
    type="radio"
    id="aChoice"
    ...
    />
  <div tw="cursor-pointer rounded p-2 flex flex-col bg-white border-2">
   ...stuff here...
  </div>
</label>

[tettoffensive]

The workaround I found for now was to use patch-package on macro.js and add this:

var variantConfig = {
...
sibling: '~ *',
...
}

[ben-rogerson]

That sibling variant sounds useful, I'll add it in the next release.

If you don't mind dipping into css you could style the element using the css prop like this:

const whenChecked = styles => css({ "input:checked ~ &": styles })

<label htmlFor="aChoice">
  <input tw="form-radio hidden cursor-pointer"
    type="radio"
    id="aChoice"
    ...
    />
  <div css={[tw`cursor-pointer rounded p-2 flex flex-col bg-white border-2`, whenChecked(tw`border-primary`)]}>
   ...stuff here...
  </div>
</label>