`css` prop is not working when used on non-components elements

[glekner]

repro - https://github.com/glekner/vitejs-vite-tusww5

function App() {
  return (
    <div className="App">
      {moduleElement}
      {moduleElement2}
    </div>
  );
}

const moduleElement = (
  <span
    css={`
      font-size: 20rem;
    `}
  >
    content
  </span>
);

const moduleElement2 = (
  <span
    css={{
      fontSize: "20rem",
    }}
  >
    content
  </span>
);

produces the warning

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The element seems to be undefined when React.createElement is being called:

// _StyledSpan is still undefined in this point
const moduleElement = /*#__PURE__*/ _jsxDEV(_StyledSpan, {
    children: "content"
}, void 0, false, {
    fileName: "/Users/glekner/coding/misc/vitejs-vite-tusww5/src/App.tsx",
    lineNumber: 13,
    columnNumber: 3
}, this);
const moduleElement2 = /*#__PURE__*/ _jsxDEV(_StyledSpan2, {
    children: "content"
}, void 0, false, {
    fileName: "/Users/glekner/coding/misc/vitejs-vite-tusww5/src/App.tsx",
    lineNumber: 23,
    columnNumber: 3
}, this);
export default App;
var _StyledSpan = _styled("span").withConfig({
    displayName: "App___StyledSpan",
    componentId: "sc-56963c61-0"
})`
      font-size: 20rem;
    `;

[ArnaudBarre]

Is this an allowed thing? I get the same crash of used before initialise with the babel plugin (which is provided by styled components team themself.)

[glekner]

this could very well be something that is not allowed, I wonder why with babel it did not throw this warning I think this can be closed? cc @bengry

[bengry]

this could very well be something that is not allowed, I wonder why with babel it did not throw this warning I think this can be closed? cc @bengry

Yea, this seems to crash when using babel as well, so I think the case is closed and the issue can be closed.

[glekner]

Thanks @ArnaudBarre

[FezVrasta]

css properties on HTML elements are definitely allowed by the styled components babel plugin.

[ArnaudBarre]

The reproduction provided failed with the Babel plugin. I think the issue is using it on nodes outside of a component.

[FezVrasta]

What do you mean by "outside a component"?

In my case it's failing (actually, not doing anything, no errors though) with a simple:

const App = () => {
  return (
    <div 
      css={css`
        width: 100vw;
        height: 100%;
        display: flex;
      `}
    >foo</div>
  );
}

[ArnaudBarre]

Please open a new issue. But the probability of being an issue with this plugin is low. The SWC plugin provided by the SWC team maybe not be 100% compatible with the Babel, although for now people seems to have no issues with it

[FezVrasta]

It looks like it was just a version problem, I was on 3.0.0, upgrading fixed it