How to use the astroturf function in astroturf

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;
`;

composes: p-2 alert alert-info from global;
  position: absolute;
  top: 0;
  right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  pointer-events: none;
  font-size: 70%;

  *:not(:focus) + & {
    opacity: 0;
  }
`

const StyledProvider = styled(LiveProvider)`
  @import '../styles/theme';

  background-color: $body-bg;
  margin-bottom: 3rem;
`

const StyledEditor = withProps(props => ({
  children: (
     (
        
          {ignoreTab ? (
            <>
              Press <kbd>enter</kbd> or type a key to enable tab-to-indent

@include media-breakpoint-up(md) {
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: calc(100vh - 4rem);
    background-color: #f7f7f7;
    border-right: 1px solid $divider;
  }

  & > * + * {
    border-top: 1px solid $divider;
  }
`;

const OverflowWrapper = styled('div')`
  @import '../css/theme';

  @include media-breakpoint-up(md) {
    overflow: hidden;
    display: block !important;
    height: 100% !important;
  }
`;

const TableOfContents = styled('nav')`
  @import '../css/theme';

  composes: pt-2 pb-4 from global;

  @include media-breakpoint-up(md) {
    height: 100% !important;

import { graphql } from 'gatsby';
import kebabCase from 'lodash/kebabCase';
import React from 'react';
import styled from 'astroturf';

import Heading from './Heading';
import Anchor from './Anchor';
import LinkToSource from './LinkToSource';
import PropTable from './PropTable';

const Keyword = styled('span')`
  color: #a626a4;
`;
const Code = styled('code')`
  padding: 0;
  display: block;
  color: #50a14f;
  background-color: transparent;
  margin-bottom: 1rem;
`;

const propTypes = {};

const Import = ({ name }) => (
  <code for="" aria-label="{`Import">
    import {name} from 'react-bootstrap/
    {name}'
  </code>
);

import styled from 'astroturf';
import { graphql } from 'gatsby';
import React from 'react';

const Wrapper = styled('span')`
  &.block {
    display: block;
    margin-top: 20px;
  }

  &:before,
  &:after {
    color: #969584;
  }
  &:before {
    content: '{ ';
  }
  &:after {
    content: ' }';
  }
`;