Ad-hoc inline css for regular elements

[rafgraph]

I frequently create a styled component with 1 or 2 styles. For example const Container = styled('div', { margin: '10px 0' }); It would be nice if there was a way to write inline css in 1 step (like inline styles, but for css with theme tokens).

Currently it is a 2-step process:

const Container = styled('div', { margin: '10px 0' });
// OR
const containerCss = css({ margin: '10px 0' });

const App = () => (
<>
  <Container>{...}</Container>
  <div className={containerCss()}>{...}</div>
</>
)

Possible solution, an inlineCss function:

This would only accept css styles (no variants), but can use theme tokens in the styles. This would make it a 1-step process.

const App = () => (
  <div className={inlineCss({ margin: '10px 0' })}>{...}</div>
)

[peduarte]

You can create a low-level component for this. On my personal blog, I created a box component. it's a low level "primitive" that I can use to pass "inline styles"

Implementation: https://github.com/peduarte/ped.ro/blob/main/styles/box.tsx
Usage: https://github.com/peduarte/ped.ro/blob/main/pages/index.tsx#L18

[rafgraph]

Cool, thanks for the tip! Maybe I'll add inlineCss to my stitches.config.ts:

const _inlineCss = css({});
export const inlineCss = (css: CSS) => _inlineCss({ css });

In the future, maybe Stitches can export the inlineCss function itself and make it part of the official api?

Side note: It might just be me but I find the above use of the word "component" confusing. On first read I think you're talking about a React component, but I after clicking through to the links I see you're talking about a Stitches component, which is not a React component (if I didn't already know the difference I'd be even more confused). I think this stems from Stitches internal use of the word "component".

[peduarte]

Definitely something to consider. Let's keep this open.

[leo-petrucci]

Hey any chance you could post the source for your Box component? I think the link to your blog is now private!

[sandgraham]

@creativiii it's something like this:

const _box = css({ boxSizing: "border-box" });
export const box = (css: CSS) => _box({ css });

// usage...
document.write(`<div class="${box({ color: "pink" })}" />`);

Just be careful as it's probably the least performant way to build styles.

[rafgraph]

#632 also makes the case for this (or something like it)