Styled-system: Is it possible use `css` from `styled-components` in variants?

[ghost]

I have this code:

import styled, { css } from "styled-components";
import { compose, space, typography, color, SpaceProps, ColorProps, TypographyProps, variant } from "styled-system";

const navigationVariant = css`
    background-color: red;
    font-weight: 600;
    text-decoration: none;
`;

export const LinkPrimitive = styled.a<LinkPrimitiveProps>`
    ${variant({
        variants: {
            navigation: navigationVariant,
        },
    })}
    ${compose(space, typography, color)}
`;

interface LinkPrimitiveProps extends SpaceProps, TypographyProps, ColorProps {
    variant?: "navigation";
}

But in browser it is translate to:

0: background-color:red;
    font-weight: 600;
    -webkit-text-decoration: none;
    text-decoration: none;

As you can see, the first property is translate to 0: background-color:red; when should it be background-color:red;.

[jxnblk]

No, variants only support objects as arguments

[ghost]

Could it be a new feature?

[sbekrin]

@jxnblk sorry for the comment on the closed issue, but are there any limitations on template literals support? If not, would you be open for a PR implementing it? Cheers!