Styling href attribute using compoundVariants

[ryanpark]

Hello pandas 👋

In the code below, I would like to apply a different color style if a component has an href attribute using compoundVariants
The href attribute can be of any string type. How can I apply these styles?

import { styled } from 'styled-system/jsx';
import { cva } from 'styled-system/css';

const buttonStyle = cva({
  base: {
    color: 'white',
  },
  variants: {
    styling: {
      primary: {
        bg: 'red',
      },
    },
    href: {
      true : {
        bg: 'blue'
      }
    },
  },
  compoundVariants: [
    {
      styling: 'primary',
      href: true,
      css: {
        color: 'red',
      },
    },
  ],
});

const StyledLinkWithHref = styled('a', buttonStyle);

export const App = () => {
  return (
    <>
      <StyledLinkWithHref styling="primary" href="http://panda.css">
        Link
      </StyledLinkWithHref>
      <StyledLinkWithHref styling="primary"> Link </StyledLinkWithHref>
    </>
  );
};

Here is playground link as well

https://play.panda-css.com/sk6z-KVUvH

Many thanks

[anubra266]

@ryanpark compoundvariants, only applies styles based on variant combinations, not html attributes or css properties.

[segunadebayo]

You can style elements with the attribute selector &[href]. I don't think this needs to be attached to a compound variant.

[ryanpark]

Thanks Pandas