How to use the styled-jsx/css.resolve function in styled-jsx

/* styles.js */
import css from 'styled-jsx/css'

/* should be identified as styled jsx style and hightlight */
// Scoped styles
export const button = css`button { color: hotpink; }`

// Global styles
export const body = css.global`body { margin: 0; }`

// Resolved styles
export const link = css.resolve`a { color: green; }`

/* shouldn't break original syntax highlight */
const resources = `partials.scss`

padding: ${ 'large' in props ? '50' : '20' }px;
          position: relative;
          background: ${props.theme.background};
        }
    `}
  
)

// Scoped styles
export const button = css`button { color: hotpink; }`

// Global styles
export const body = css.global`body { margin: 0; }`

// Resolved styles
export const link = css.resolve`a { color: green; }`

div {
    font-size: 3em;
  }
`

const a = global`
  div {
    font-size: ${size}em;
  }
`

export const uh = bar

export const foo = css`div { color: ${color}}`

css.resolve`
  div {
    color: ${colors.green.light};
  }
  a { color: red }
`

const b = resolve`
  div {
    color: ${colors.green.light};
  }
  a { color: red }
`

const dynamic = colors => {
  const b = resolve`
    div {

import React, { useState } from 'react';
import Link from 'next/link';
import css from 'styled-jsx/css';
import Highlighter from 'react-highlight-words';
import ProjectLink from 'components/link/Project';
import Box from 'components/style/Box';
import { bp, color, fontSize } from 'lib/variables';

const { className: boxClassName, styles: boxStyles } = css.resolve`
  .box {
    margin-bottom: 7px;

    .content {
      padding: 9px 20px 14px;
      @media ${bp.tinyUp} {
        display: flex;
      }
    }
  }
`;

const Projects = ({ projects = [] }) => {
  const [searchInput, setSearchInput] = useState('');

  const filteredProjects = projects.filter(key => {

import React from "react";
import Head from "next/head";
import css from "styled-jsx/css";

import Global from "../components/Global.js";
import Navigation from "../components/Navigation";
import env from "../env.config.js";
import styles from "./Index.scss";

const {className: testClassName, styles: testStyles} = css.resolve`p { color: red }`;

export default class extends React.Component {

  renderChild = (data) => {
    return (<div>
      <p>{data}</p>
    </div>);
  }

  render() {
    return (
      
        
          <title>Home</title>

RATIOS
} from '../../../utils/inputs';

import KeyboardNumberInput from '../../keyboard-number-input';

const advancedStyles = css`
  .advanced {
    height: 64px;
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 8px;
  }
`;

const {className: keyboardInputClass, styles: keyboardInputStyles} = css.resolve`
  height: 32px;
  border: 1px solid var(--input-border-color);
  background: var(--input-background-color);
  color: var(--title-color);
  text-align: left;
  font-size: 12px;
  transition: border 0.12s ease-in-out;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px;
  margin-right: 8px;
  width: 64px;

  :focus {
    outline: none;
    border: 1px solid var(--input-focus-border-color);

import css from 'styled-jsx/css'

export const heroContainer = css.resolve`
  div {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
`

export const hero = css.resolve`
  div {
    width: 70%;
    max-width: 700px;
    text-align: center;
    flex-basis: 30%;
  }

{environments.map(environment => {
        const bgImage = R.propOr(
          bgImages.none,
          environment.deployType,
          bgImages
        );
        const { className: bgClassName, styles: bgStyles } = css.resolve`
          .content {
            background-image: ${bgImage.normal};

            &:hover {
              background-image: ${bgImage.hover};
            }
          }
        `;

        return (
          <div>
            
              </div>

import React, { useState } from 'react';
import css from 'styled-jsx/css';
import useFormal from '@kevinwolf/formal-web';
import * as yup from 'yup';
import { gql } from 'apollo-boost';
import { useMutation } from 'react-apollo-hooks';

import colors from '../lib/colors';
import { loginRequest, login } from '../lib/auth';
import Button from 'components/Button';
import FormField from 'components/FormField';

const { className, styles } = css.resolve`
  button {
    margin-top: 8px;
  }
`;

const schema = yup.object().shape({
  username: yup.string().required(),
  password: yup.string().required(),
  email: yup
    .string()
    .email()
    .required(),
  displayName: yup.string().required(),
});

const REGISTER_USER_QUERY = gql`

import React, { useState } from 'react';
import { useApolloClient } from 'react-apollo-hooks';
import css from 'styled-jsx/css';
import useFormal from '@kevinwolf/formal-web';
import * as yup from 'yup';

import { loginRequest, login, HTTPError } from '../lib/auth';
import Button from 'components/Button';
import FormField from 'components/FormField';

const { className, styles } = css.resolve`
  button {
    margin-top: 8px;
  }
`;

const schema = yup.object().shape({
  username: yup.string().required(),
  password: yup.string().required(),
});

const LogInForm = ({ onBack }) => {
  const apolloClient = useApolloClient();
  const [loginError, setLoginError] = useState(null);

  const formal = useFormal(
    {