@reshadow/styled - `background-image` is not displayed

[ilyalesik]

When I try to set the background through background-image with url(), it's not displayed:

import React from "react";
import styled from "@reshadow/styled";

import ExitImg from "./exit.svg";

const Exit = styled.button`
    width: 21px;
    height: 21px;

    background: url(${ExitImg}) no-repeat;
`;

Also, Chrome DevTools highlights background as an incorrect value:

background: url(var(--6v6tgc_1))

[lttb]

Hi @ilyalesik, thank you for the issue.

The quick fix is:

import React from "react";
import styled from "@reshadow/styled";

import ExitImg from "./exit.svg";

const Exit = styled.button`
    width: 21px;
    height: 21px;

    background: ${`${url(${ExitImg})}`) no-repeat;
`;

which is really ugly 😄

so it would be great to support css functions, that does not work with css-custom-properties

I think that the same trick as with units should work: https://github.com/lttb/reshadow/issues/23#issuecomment-498057603

[ilyalesik]

It is cool that there is a workaround. But it's a problem for using "@reshadow/styled" as a drop-in-replacement of styled-components. Maybe some migration script needed? Based on babel or jscodeshift.