How to use the @emotion/core.css function in @emotion/core

function count(n = 9, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => css`
    &:nth-child(${i}) {
      animation: ${spin} 1s ${delay(0.12, n, i - 1)}s infinite linear;
    }
  `);
  return css(list.join('\n'));
}

/** @jsx jsx */
import { jsx, css } from '@emotion/core';

import { FormContainer, TextField } from '@/src/future';

const styles = {
  Label: css({
    fontWeight: '600',
  }),
  TextInput: css({
    border: '2px solid black',
  }),
};

function renderTag(renderKey, Tag, props) {
  if (styles[renderKey]) {
    return ;
  }
  return ;
}

function renderComponent(renderKey, Component, props) {
  if (renderKey === 'Field') {
    return ;
  }
  return ;

const getInputSizes = (theme: Theme) => ({
  sm: css({
    fontSize: theme.fontSizes[0],
    padding: "0.25rem 0.5rem"
  }),
  md: css({
    fontSize: theme.fontSizes[1],
    padding: "0.5rem 0.75rem"
  }),
  lg: css({
    fontSize: theme.fontSizes[2],
    padding: "0.65rem 1rem"
  })
});

export function itemSvgStyles() {
  return css({
    label: 'runway-dropdown__item-svg',
    width: '24px',
    fill: colours.darkerGrey
  });
}

function Article({ post, theme }) {
  const articlelink = 'writing/' + post.frontmatter.slug
  return (
    <div>
      <h2>
        <span aria-label="article" role="img">
          ✍️
        </span>
        
          {post.frontmatter.title}
        
      </h2>
      
        {post.excerpt}{' '}</div>

/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { atomDark } from 'react-syntax-highlighter/styles/prism';

const styles = {
  codeBlock: css({
    fontSize: 14,
  }),
};

const CodeBlock = props => (
  <div>
    
      {props.children}
    
  </div>
);

export default CodeBlock;

     css(normalize)} />
    {children}

borderColor: borderColor[mode]
    }
  });
};

const focusStyle = props => {
  const { theme } = props;

  return css({
    [focus]: {
      boxShadow: theme.shadows.outline
    }
  });
};

const readOnlyStyle = css({
  "&[readonly]": {
    backgroundColor: "transparent",
    boxShadow: "none !important",
    userSelect: "all"
  }
});

const sizeStyle = props => {
  const { theme, size } = props;
  return theme.sizes.input[size];
};

const useInputStyle = props => {
  const theme = useTheme();
  const { mode } = useUIMode();

marginBottom: 40,
    ...getMediaQueriesForWidths(
      {
        ...Typography['sub-head'],
        paddingTop: 20,
        paddingBottom: 20,
      },
      {
        ...Typography['main-head'],
        paddingTop: 60,
        paddingBottom: 60,
      }
    ),
  }),
  leadHeader: css({}),
  logo: css({
    display: 'block',
    margin: '0 auto 30px',
    width: 200,
    height: 200,
  }),
  lead: css({
    textAlign: 'center',
    ...Typography['main-head'],
  }),
  title: css({
    ...getMediaQueriesForWidths(
      {
        ...Typography['main-head'],
      },
      {
        ...Typography['mega-head'],