-
|
I just rewrote a small project to use Stitches and I love it! There are still a few rough edges, but I really like the ideas behind this tool. For now, there is one thing that stands out to me the most. I was trying to figure out how to use
The common pattern that those solutions enable is to apply global styles conditionally; it's also clear when that happens - it's whenever those components render. In addition, when those components unmount, the styles disappear. If I understood correctly, neither the Would you be open to tackling this? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
@fatfisz hey! thanks so raising this :) I've moved it to a GH discussion so we can talk about and will then create an actionable issue if needed. For context: I'll lay out the API differences between latest css.global({
body: {
margin: 0
}
})so in canary we changed it to: const globalStyles = css.global({
body: {
margin: 0
}
})
export const App = () => {
globalStyles()
return <div />
}
Never thought about this before. Why would global styled be conditionally applied? Doesnt that defeits the point of it being global?
I don't understand why this is a good idea - for global styles I'm curious to see what's your use case, and hopefully, we can understand it more and take that into account. Thanks! |
Beta Was this translation helpful? Give feedback.
-
My favorite example is a modal window: when it's open, it's best to set const HideOverflow = css.global({
overflow: 'hidden',
});
function Modal() {
const [show, setShow] = useState(false);
...
return (
<>
{show && <HideOverflow />}
... // modal stuff
</>
)
}A second example would applying styles to elements outside of the React tree (it might sound contrived, but it's an actual case I encountered at work). There was a 3rd-party plugin that needed some global styles based on the data from the React part. So whenever the data changed, global styles would need to change too. const EditorStyles = css.global({
variants: {
light: {
'.3rd-party-class': {
color: 'magenta',
},
},
dark: {
'.3rd-party-class': {
color: 'cyan',
},
},
},
});
function EditorWrapper() {
const root = useRef();
useEffect(() => {
const editor = initEditor(root.current);
return () => editor.destroy();
}, []);
return (
<>
<div ref={root} />
<EditorStyles theme={useThemeNameFromContext()} />
</>
);
}Of course the actual code was different, but here I wanted to give an idea of what I expect So I'd sum it up like so: more flexibility is needed when global styles might change depending on the state of the app. Also sometimes we don't have a 100% React app and it would be great to be able to handle those scenarios too. In this case I'd argue that |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for that, very helpful insights <3 What API do you have in mind for this? |
Beta Was this translation helpful? Give feedback.
-
|
The one I used in my examples: |
Beta Was this translation helpful? Give feedback.
-
|
Hi! we've now released Stitches 0.1.0 and we have decided to stick with this API for now. Thanks! |
Beta Was this translation helpful? Give feedback.
Hi! we've now released Stitches 0.1.0 and we have decided to stick with this API for now. Thanks!