getting an error when import { css } from '@compiled/react

SyntaxError: /app/src/pages/Compiled.tsx: CallExpression isn't a supported CSS type - try using an object or string. (This is an error on an internal node. Probably an internal
error. Location has been estimated.)
  4 | import { css } from '@compiled/react';
  5 |
> 6 | const buttonCss = css`
    |                   ^^^
  7 |   border: 1px solid blue;
  8 |   border-radius: 3px;
  9 |   font-size: 10px;
    at File.buildCodeFrameError (/app/node_modules/@babel/core/lib/transformation/file/file.js:240:12)
    at NodePath.buildCodeFrameError (/app/node_modules/@babel/traverse/lib/path/index.js:138:21)
    at Object.buildCodeFrameError (/app/node_modules/@compiled/babel-plugin/src/utils/ast.tsx:77:42)
    at Object.buildCss (/app/node_modules/@compiled/babel-plugin/src/utils/css-builders.tsx:434:9)
    at Object.buildCss (/app/node_modules/@compiled/babel-plugin/src/utils/css-builders.tsx:360:20)
    at Object.visitCssPropPath (/app/node_modules/@compiled/babel-plugin/src/css-prop/index.tsx:42:21)
    at PluginPass.JSXOpeningElement (/app/node_modules/@compiled/babel-plugin/src/babel-plugin.tsx:216:9)
    at newFn (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:175:21)
    at NodePath._call (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:92:31)
    at TraversalContext.visitQueue (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:116:16)
    at TraversalContext.visitSingle (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:85:19)
    at TraversalContext.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:144:19)
    at Function.traverse.node (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/index.js:82:17)
    at NodePath.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:99:18)
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 16:11-18:5
 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

code :

import * as React from "react";
import { Layout } from "src/components/Layout";
import { css } from '@compiled/react';

const buttonCss = css`
  border: 1px solid blue;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  @media screen and (min-width: 300px) {
    border: 1px solid red;
  }
`;

const Compiled = (props:any) => {
  return (
    <Layout >
      <div css={buttonCss}>Hello</div>
    </Layout>
  )
}

export default Compiled

versons

    "@compiled/babel-plugin": "^0.6.13",
    "@compiled/css-in-js": "^0.4.7",
    "@compiled/react": "^0.6.10",

[itsdouges]

Hi! Nice find. Funnily enough we only tested with importing usages like this, we didn’t test when its already in scope. Oops! So - valid bug 👍.

I’ve replicated it - will investigate why it’s happening and put up a fix (unless anyone wants to beat me 😄).

Works

// bar.js
import { css } from '@compiled/react';
export const colorRed = css`color:red;`;

// foo.js
import { css } from '@compiled/react';
import { colorRed } from './styles';

<div css={css`color: red;`} />
<div css={colorRed} />

Doesn’t work

import { css } from '@compiled/react';

const colorRed = css`color:red;`;
<div css={colorRed} />

[cameronbraid]

I can get it to work with inline css={css`...`} https://codesandbox.io/s/magical-rain-ouioh

However the docs say that you can compose css from https://compiledcssinjs.com/docs/api-css

import { css } from '@compiled/react';

const largeText = css`
  font-size: 50px;
  color: black;
`;