goober
goober copied to clipboard
cristianbote
Is it possible to define a different target for `createGlobalStyles` too?
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 styles for that component that should be generated in the same <style> with createGlobalStyles.
Currently the global styles are injected into the outer <head> which isn't what I want. I also tried to set the target with createGlobalStyles.bind({.target: myTarget }) but this doesn't seem to change something.
Am I missing something here? With my current approach I removed the createGlobalStyles completely and replaced it with a simple separate <style>. I'm not sure if I need goober for global styles at all?
This is what it looks like with my approach. It would be great to avoid the separate <style> completely:
Hey @m4rvr,
Thanks for opening this issue. I believe this might be trivial to implement. ThecreateGlobalStyles function is this:
export function createGlobalStyles() {
const fn = styled.call({ g: 1 }, 'div').apply(null, arguments);
/**
* This is the actual component that gets rendered.
*/
return function GlobalStyles(props) {
// Call the above styled.
fn(props);
// Returns a hole.
return null;
};
}
As you can see the fn calls the apply with null context and I believe passing this instead would make your use-case work. Do you feel like you wanna tackle this on your own and open up a PR? I would be more than happy to review it and merge it 🚀 .
Let me know, if not I can tackle it soon.
It doesn't seem to work just to change here, because styled needs an h function, but it doesn't seem to be provided in solidjs.
