Customise target node that styles are injected into #395

joneslloyd · 2021-04-16T19:15:05Z

joneslloyd
Apr 16, 2021

Hello!

I was wondering if it's possible to change the node that styles are injected into?

I'm coding an embeddable widget, and I'd like to encapsulate styles using Shadow DOM.

I can do everything I want with Preact (preact-custom-element), but using Twin the styles are still injected into the document head of the web page.

I'd like to specify the node so that I can give my custom (shadow dom) element.

Is this possible? If not, how easy/difficult would this be to implement?

I'm using Goober with Twin (styled components and GlobalStyles) and I see it's possible to do this with Goober – Just wondering if there's a specific way to do this with Twin and Goober though.

ben-rogerson · 2021-04-17T07:27:01Z

ben-rogerson
Apr 17, 2021
Maintainer

Hey there 👋

I think this injection feature might be in goober territory - twin just replaces the tailwind styles with css objects and then passes them over to Goober.
And with the global styles, when the <GlobalStyles /> element is used, twin swaps it with the styles injected using goobers createGlobalStyles.

2 replies

joneslloyd Apr 17, 2021
Author

Hello! Thanks for getting back to me, I appreciate it.

And okay, got it! I've seen the Goober example (in my link). I'm just trying to figure out the best way to implement this on a project that's otherwise entirely using Twin (with Goober and Tailwind).

I'll dig deeper and probably figure it out. If I do, I'll post the solution here.

Thanks again.

joneslloyd Apr 19, 2021
Author

I've had a very long look around the source code (and examples) of Goober and Twin, and I believe that because of the way that Twin uses styled (and the GlobalStyles component) it's not possible to use this node targeting.

I hope I'm wrong, and I'm still looking to find a way, but so far I can't see how I can make it work.

That's because there are two methods, styled and css.

Styled

It appears that styled could be customised like this:

const newTarget = document.getElementsByClassName('whatever')[0];
const styled = goober.styled.bind({ target: newTarget })
const Button = styled('button')`
  color: red;
`;

But using Twin we style things using tw or styled as imports from Twin.

CSS

And with the css Goober method, there doesn't appear to be an appropriate place to call it when using Goober via Twin.

I tried this:

const shadowRoot = document.getElementsByTagName('my-shadow-element')[0] || false;

if (shadowRoot) {
  goober.css.call({ target: shadowRoot }, 'p {color: black;}');
}

...and it does actually add the p { color: black;} styles to the my-shadow-element, but it also gives a console error: goober.modern.js:1 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

extractCss

There is also an extractCss Goober function, which 'Returns the <style> tag that is rendered in a target and clears the style sheet'. I was thinking I could pull the styles out out the <head> and inject them into my shadow dom element/component.

However when I run const styleTag = ``<style id="_goober">${extractCss()}</style>``; anywhere in the app, I only get the styles for that particular component (rather than all, global styles).

I don't know if this is normal Goober behaviour or something 'magic' related to Twin(?).

–

I guess you're right that this is Goober territory, but if you had any pointers about how to make it 'play ball' with Twin, using this sort of customisation, that'd be great.

(By that I mean that I think I could get it working if I were just using Goober, but I'm not sure how to do it while using Goober 'through' Twin).

felixroos · 2021-08-25T09:40:23Z

felixroos
Aug 25, 2021

I am having the same problem using parcel + react + emotion.

I use react-shadow to prevent leaking styles out of an embeddable widget. Unfortunately, twin.macro only works without shadow DOM because the GlobalStyles are injected into the head. I just made a fork of the react-emotion example and added react-shadow to show that the styles won't work.

Would it be possible to place the styles at the exact position the GlobalStyles component is added? Or is there another way to inject the styles locally?

1 reply

ben-rogerson Aug 25, 2021
Maintainer

Twin also has a newer globalStyles import which gets replaced by a css object containing the same styles as the <GlobalStyles /> import.
This means you can add the global styles anywhere you need - but you'll need to pass this to a function that can work with the vanilla styles.

import { globalStyles } from 'twin.macro'

globalStyles
// ↓ ↓ ↓ ↓ ↓ ↓

({
  "*, ::before, ::after": {
    "boxSizing": "border-box",
    "borderWidth": "0",
    "borderStyle": "solid",
    "--tw-border-opacity": "1",
    "borderColor": "rgba(229, 231, 235, var(--tw-border-opacity))",
    "--tw-translate-x": "0",
    // ...
})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customise target node that styles are injected into #395

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Customise target node that styles are injected into #395

joneslloyd Apr 16, 2021

Replies: 2 comments · 3 replies

ben-rogerson Apr 17, 2021 Maintainer

joneslloyd Apr 17, 2021 Author

joneslloyd Apr 19, 2021 Author

Styled

CSS

extractCss

felixroos Aug 25, 2021

ben-rogerson Aug 25, 2021 Maintainer

joneslloyd
Apr 16, 2021

Replies: 2 comments 3 replies

ben-rogerson
Apr 17, 2021
Maintainer

joneslloyd Apr 17, 2021
Author

joneslloyd Apr 19, 2021
Author

felixroos
Aug 25, 2021

ben-rogerson Aug 25, 2021
Maintainer