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

m4rvr commented 2 years ago

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:

cristianbote commented 2 years ago

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.

liaodehui1 commented 2 years ago

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.

cristianbote / goober

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