background image is no work with base64 img

[Ele-Lee]

"version": "2.1.10"

import { css } from 'goober';

const base64 =
  'data:image/png;base64,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';

const calssName = css`
  background-image: url(${base64});
`;

My base64 img url is right. I found that there is an extra colon in Chorme Dev Tool;

In addition, it worked in the object syntax.

const calssName = css({
  backgroundImage: `url(${base64})`,
});

[cristianbote]

Hey @Ele-Lee,

Thanks for opening this issue! Indeed this is a real issue with how the inner parser works for now. There's a workaround though, you can use the object syntax if that's possible:

const className = css({
  backgroundImage: `url(${base64})`
});

and this bypasses the css pair parsing. Would that make it work for your case?

[Ele-Lee]

thanks. The object syntax is effective. This problem caused some confusion when using solid-styled-components. Hope goober be better and better

[monkeyphysics]

I am running into the same issue, and don't have the option to use the object syntax as alternative at the moment. Is there no way to fix this within the parser?

[cristianbote]

hey @monkeyphysics, not without a full parser refactor. Can I ask what's blocking the option of using the object syntax? Linting?

[monkeyphysics]

My use case is a different background image for hover:

.item {
  background-image: url(${img-regular});

  &:hover {
    background-image: url(${img-hover});
  }
}

I've looked at the parser before to fix #375 and can dive in again, but forgot how I set it up so that I can use the source code of goober from /node_modules/. Any tips on setting this up so that I can make changes to the goober core in my project?

An ugly solution without touching the parser would be to restore the error after generating css by replacing the data:{mime};{encoding}:, pattern like so: css.replace(/(data:[a-z]+\/[a-z]+;[a-z0-9]+):,/, "$1,");

[cristianbote]

Regarding your use case, if you want to you can still use the object syntax:

const Foo = styled('div')({
  ".item": {
    backgroundImage: `url(${img-regular})`,
    "&:hover": {
      backgroundImage: `url(${img-hover})`
    }
  }
});

In fact that's exactly what the parser does internally.

Any tips on setting this up so that I can make changes to the goober core in my project?

Depends on your setup really. Is it a nextjs project? If it's v13 you could use the transpile package option otherwise there is a next-transpile-package module.

[monkeyphysics]

Thanks for this! Any consideration on the suggested regex replace?