cristianbote/goober

background image is no work with base64 img

Ele-Lee opened this issue · 7 comments

Ele-Lee commented

"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;
image

In addition,
it worked in the object syntax.

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

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 commented

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

  • ❤️1
monkeyphysics commented

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 commented

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

monkeyphysics commented

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 commented

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.

  • 👍1
monkeyphysics commented

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