CSS: Support hover only on non-touch devices using media query

HoverSupported.css

/*
 * Compiled CSS:
  */
a {
  color: green;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
  }
}

HoverSupported.scss

@mixin hover-supported {    
   /* 
    * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
    * coarse: The primary input mechanism includes a pointing device of limited accuracy.
    */
    @media not all and (pointer: coarse) {
      &:hover {
        @content;
      }
    }
}

a {
    color:green;

    @include hover-supported() {
        color:blue;
    }
}

RandomAnchor.tsx

// RandomAnchor.tsx
import styled, { css } from "styled-components";
import { hoverSupported } from "./CssUtils";

export const RandomAnchor = styled.a`
  color: green;
  /*
   * Only use hover for the browsers we choose to support
   */
  ${hoverSupported(css`
    &:hover {
      color: blue;
    }
  `)};
`;

ReactCssUtils.ts

// Example for React-ts & Styled Components
import { css } from "styled-components";

export const hoverSupported = style => css`
  @media not all and (pointer: coarse) {
    ${style};
  }
`;

the original query that is mention that it breaks with 2018 Firefox, I tested the pen https://codepen.io/programmerper/pen/XqmWGP with desktop Firefox 87.0 and it works

Thanks @aquaductape, duly noted!