How to use astroturf - 10 common examples

import styled from 'astroturf';

const SIZE = 75;

// prettier-ignore
const FancyBox = styled('div', { someOption: true })`
  color: red;
  width: ${SIZE}px;

  @media (min-width: 420px) {
    width: 96px;
    height: 96px;
  }

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const options = {};

}
`;

const FancyBox = styled('div')`
  composes: foo from global;

  color: red;
  width: ${width}px;

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancierBox = styled('div')`
  color: ultra-red;

  > ${FancyBox} {
    padding: 4em;
  }

  ${styles.parent} > & {
    margin: 2em;
  }

  /* these are the same selector */
  & > ${Button} {
    margin-left: 4px;
  }
  & > ${Buttons.Button} {
    margin-left: 8px;

import styled, { css } from 'astroturf';

const SIZE = 75;

// prettier-ignore
const FancyBox = styled('div')`
  color: red;
  width: ${SIZE}px;

  @media (min-width: 420px) {
		width: 96px;
		height: 96px;
	}

  &.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancyHeader = styled('h2')`
  color: red;

const SIZE = 75;

const styles = require("./typescript-styles.css");

interface PropsType {
  children: JSX.Element;
  name: string;
}

function someMath(obj: T): T {
  console.log(Math.abs(obj.x));
  return obj as T;
}

const Button = /*#__PURE__*/ styled("button", null, {
  displayName: "Button",
  styles: require("./typescript-Button.css"),
  attrs: null,
  vars: []
});

class Component extends React.Component {
  render() {
    return (
      <>
        <h2>{this.props.children}</h2>
        <button>
          click</button>

import styled from 'astroturf';

const Foo = () => {};
const bar = 'Bar';
Foo[bar]['baz'] = styled('div')`
  color: red;
`;

export default styled(FancyBox)`
  color: ultra-red;
`;

&.primary {
    background: white;
    color: palevioletred;
  }
`;

const FancierBox = styled('div')`
  color: ultra-red;

  > ${FancyBox} {
    padding: 4em;
  }
`;

const Button = styled(Button)`
  composes: button-with-caret from global;
`;

import { styled } from "astroturf";

const RedPasswordInput = /*#__PURE__*/ styled("input", null, {
  displayName: "RedPasswordInput",
  styles: require("./with-props-RedPasswordInput.css"),
  attrs: props => ({ ...props, type: "password" }),
  vars: []
});

const RedPasswordInput2 = /*#__PURE__*/ styled("input", null, {
  displayName: "RedPasswordInput2",
  styles: require("./with-props-RedPasswordInput2.css"),
  attrs: p => ({
    type: "password"
  }),
  vars: []
});

import { styled } from 'astroturf';

const RedPasswordInput = styled('input').attrs({ type: 'password' })`
  background-color: red;
`;

const RedPasswordInput2 = styled('input').attrs(p => ({
  type: 'password',
}))`
  background-color: red;
`;

import { styled } from 'astroturf';

const ButtonBase = styled('button')`
  @import '~./styles/mixins.scss';

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
`;

import { styled } from 'astroturf';

const RedPasswordInput = styled('input').attrs({ type: 'password' })`
  background-color: red;
`;

const RedPasswordInput2 = styled('input').attrs(p => ({
  type: 'password',
}))`
  background-color: red;
`;