// App.js
import { styled } from "@egoist/vue-emotion";
import { css } from "emotion";

const bold = css`
  font-weight: bold;
`;

const red = css`
  color: red;
`;

const blue = css`
  color: blue;
`;

const otherComposition = css`
  ${bold};
  ${blue};
`;

const StyledComponent = styled("div")`
  ${bold};
  ${red};
`;

const StyledComponentTwo = styled("div")`
  ${bold};
  ${blue};
`;

export default {
  name: "App",
  render() {
    return (
      <div>
        <StyledComponent>Composition Doesn't Work</StyledComponent>
        <StyledComponentTwo>Composition Doesn't Work</StyledComponentTwo>
        <div class={otherComposition}>Composition Does Work</div>
      </div>
    );
  }
};