Merge stijl functions

[fverloop]

TLDR: How do I setup a base component with responsive styling and expand that with more responsive styling in instances of that component? Should there be something like a .merge function, or is there another way I can set this up?

---

Example

I often setup base components that have some basic styling. I then use the base component to setup variations with extra styling. Consider the following setup:

const Header: React.SFC<HeaderProps> = ({ tag, children }) => {
  const Tag = tag;

  // Setup responsive style
  var style = Style({
    weight: 500,
    marginBottom: 20
  });

  style.mediaQuery(minWidth(Screen.tablet), {
    marginBottom: 40
  });

  return <Tag css={style}>{children}</Tag>;
};

const H1: React.SFC<{}> = ({ children }) => {

  // Setup responsive style for this component
  var style = Style({
    fontSize: 48
  });

  style.mediaQuery(minWidth(Screen.tablet), {
    fontSize: 72
  });

  // I'd love to add custom styling here, without overriding the styling of <Header/>
  return <Header tag="h1" css={style}>{children}</Header>;
};

Currently this won't work. There's no way to merge styling of two components. When not using Style() it might be possible to set up a base style object and use that to build upon, but I need the mediaQuery setup.

[koenbok]

I would propose to add .update and .copy.

[fverloop]

That would be great. An .extend() function would be great too. Basically a convenience function for:

const style = Style({padding:10})
const style2 = style.copy()
style2.update({fontSize:24})

vs.

const style = Style({padding:10})
const style2 = style.extend({fontSize: 24})

[koenbok]

Can you verify this is fixed with: https://github.com/koenbok/stijl/commit/c36d2bed18961cbc223b205864f160a899279d93