create goober instance?

[zhaoyao91]

I want to use goober for libraries, but the setup is global and there is module level cache etc which may not be suit for that purpose. Is there a way/plan to support create a completely isolated goober instance?

[cristianbote]

Hey @zhaoyao91 thanks for opening this issue.

Depends on your library needs. goober supports custom target to be defined for each css context. For example, let's say you have your own <style> tag that you'd like to append to and not the <style id="_goober"> one. So, you can do this:

import { css as gooberCss, styled as gooberStyled } from 'goober';

const myTarget = document.getElementById('my-style-tag');
const css = gooberCss.bind({ target: myTarget });
const styled = gooberStyled.bind({ target: myTarget });

// So with the above css bounded with a custom target
// the `css` call will update your target.

const p10 = css`
  padding: 10px;
`;

const Button = styled('button')`
  margin: 0;
  background: tomato;
`;

// Later on

<Button className={p10}>
  Clickey
</Button>

After the above render pass, your styles are gonna live inside your previously bound target. There's a section inside README that talks about it. https://github.com/cristianbote/goober#targets

Let me know if this is what you are looking for.

[zhaoyao91]

@cristianbote thanks for your reply. I've noticed the target binding, but there are other global things such as setup (which uses a global parser) and a module level cache (see code), these design are not much suit for isolated use case since we want to make sure all effect are grouped into instances.

[matzeeable]

@zhaoyao91 did you found a solution for this? :-)

[zhaoyao91]

@zhaoyao91 did you found a solution for this? :-)

No, later I created some other lib like goober to fulfill our needs.