Share styles in a performant way with good dx

[rafgraph]

When sharing styles across different components I currently need to choose between good performance and good dx (there could also be another way that I'm missing :). It would be great if there was a way to have both.

Good dx, bad performance:

EDIT: the dx of this way actually isn’t the greatest if you like to edit styles in chrome dev tools, there’s no way to target just the shared styles.

const sharedStyles: CSS = {
  margin: '10px'
}

// bad performance, every place `sharedStyles` is used this way the styles will need to be written to the document,
// instead of writing the styles once and adding a `class` to each element that uses the shared styles.
const MyComp = styled(BaseComp, {
  ...sharedStyles,
  color: 'green',
})

// good dx, every place I need to use <MyComp> I can just use it, no additional props needed
<MyComp {...props} />

Good performance, bad dx - way 1:

const sharedStyles = css({
  margin: '10px'
})

const MyComp = styled(BaseComp, {
  color: 'green',
})

// good performance, shared styles written once to the document, <MyComp> gets two classes added
// bad dx, every place I need to use <MyComp> with the shared styles I have to add a className
<MyComp className={sharedStyles()} {...props} />

Good performance, bad dx - way 2:

const const SharedStyles = styled('foo', {
  margin: '10px'
})

const MyComp = styled(SharedStyles, {
  color: 'green',
})

// good performance, shared styles written once to the document, <MyComp> gets two classes added
// bad dx, every place I need to use <MyComp> I have to add as={BaseComp}
<MyComp as={BaseComp} {...props} />

Possible solution: accept an array for styled's second argument

const sharedStyles = css({
  margin: '10px'
})

// good performance, MyComp will have two classes, one for sharedStyles and one for the style object
const MyComp = styled(BaseComp, [
  sharedStyles(),
  {
    color: 'green',
  },
]);

// good dx, every place I need to use <MyComp> I can just use it, no additional props needed
<MyComp {...props} />

[peduarte]

Hey!

This is currently possible. The styled function accepts infinite arguments. The first argument decides which node tag to render the element with. The other arguments will just pull out its styles and variants. The powerful thing here is that you can pass in css() or styled() instances.

This means you can do something like:

const sharedStyles = css({ margin: "50px" });

const BaseComp = styled("button", { border: "2px solid", padding: 15 });

const MyComp = styled(BaseComp, sharedStyles, {
  color: "green"
});

Demo: https://codesandbox.io/s/quizzical-kepler-2ipcj?file=/src/App.tsx:47-239

[btz530]

Hey @peduarte, loving Stitches so far! Looking to share css() styles similar to this answer, but by also applying variants. Thoughts?

const sharedStyles = css({ 
  margin: "50px",
  variants: {
    bg: {
      true: { backgroundColor: 'gray' },
    },
  },
});

const BaseComp = styled("button", { border: "2px solid", padding: 15 });

const MyComp = styled(BaseComp, sharedStyles({ bg: true }), {
  color: "green"
});

This doesn't seem to work currently, and I can't find any way to use the resulting className/selector in the styled api.