Swiip

const BB8 = styled.div`
  animation: ${({ turn }) => turn ?
    `${spin} 0.8s infinite linear` : "none"};

  /* or */

  ${({ turn }) => turn && css`
    animation: ${spin} 0.8s infinite linear;
  `}
`;

Swiip

const BigBB8 = BB8.extend`
  zoom: 200%;
`;

Swiip

const BB8 = styled.div`
  &:before,
  &:after {
    display: block;
    content: "";
    position: absolute;
  }
`;

Swiip

import styled, { keyframes } from "styled-components";

const spin = keyframes`
  0 { transform: rotate(0deg) translateZ(0); }
  100% { transform: rotate(-360deg) translateZ(0); }
`;

const BB8 = styled.div`
  &:before {
    animation: ${({ turn }) =>

Swiip

const BigBB8 = BB8.extend`
  zoom: 200%;

  @media (max-width: 700px) {
    zoom: 150%;
  }

  @media (max-width: 500px) {
    zoom: 100%;
  }

Swiip

import { injectGlobal } from "styled-components";

injectGlobal`
  html {
    background: #444;
  }
`;

Swiip

import React from "react";
import styled from "styled-components";

const StyledView = styled.View`
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

Swiip

import { component, css, html, withState, withStyle, withMarkup } from "MyIdealFramework";

const MyComponent = component(
  withState(() => ({content: "hello world"})),
  withStyle(props => css`color: red;`),
  withMarkup(props => html`<div>${props.content}</div>`)
);

Swiip

import {
  html,
  css,
  createStore,
  component,
  withProp,
  withStore,
  withStyle,
  withMarkup,
} from 'compo-lib';

Swiip

Event {
  time: 2019-02-08T16:50:50.280Z,
  level: 'INFO',
  event: [ 'call', 9007117650364516, 'hs_init' ] }
Event {
  time: 2019-02-08T16:50:50.283Z,
  level: 'INFO',
  event:
   [ 'store',
     'i32',