goober

goober copied to clipboard

Using styled in a Shadow DOM

4

Is there any way of having the styled pre-configured for a specific shadow root so we can use it everywhere importing it directly from 'goober'? What I'm doing right now...

xrofa

GlobalStyles not working

2

Does this package have any dependence?  I tried so mucho things, help me pls

pandasoli

Feature/modular custom parser

2

Summary: This PR build on my [previous PR](https://github.com/cristianbote/goober/pull/459) by breaking the custom parser in modular functions. Motivation: By splitting the custom parser into modular functions the end user can now...

ivoilic

Styling components with required props triggering an TypeScript error

4

When I try to wrap custom React components with goober's "styled" method, TypeScript shows error im cases when component have required props. ``` import React from 'react' import { styled...

theBork

create goober instance?

4

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...

zhaoyao91

CSP Nonce

7

We have a pretty strict [CSP-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) for our site and we would like to use a library which consumes `goober`. The problem is that goober will inject styles directly to...

jd-carroll

How to handle forward ref if it is created inside a component

1

I have a situation where I create a React component that has a shadow DOM inside using (https://github.com/Wildhoney/ReactShadow): ``` import { css, styled } from "goober"; import root from "react-shadow";...

vedantroy

is the css function supposed to also take an function as an argument

1

is the css function supposed to also take an function as an argument because it is not documented and there are no type definitions for it? ```ts import { css...

joseDaKing

Is it possible to define a different target for `createGlobalStyles` too?

2

Hey! I'm using goober with `solid-styled-components` with a web component and the shadow root as a custom target where goober injects the styles generated with `css`. I also need global...

m4rvr

background image is no work with base64 img

7

"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...

Ele-Lee