Problem `as` and `css` when used together.

[Sergey]

Describe the bug

Hi, I have problem when used as and css together.

To Reproduce

import React from "react";
import tw, { styled } from "twin.macro";
import "styled-components/macro";

const StyledTag = styled.span`
  border: 1px solid black;
  ${({ theme }) => theme === "warning" && tw`text-green-500 bg-yellow-500`}
`;

function Tag(props) {
  return <StyledTag {...props} />;
}

const App = () => (
  <>
    <StyledTag as="div" theme="warning" css={{ color: "red" }}>
      Tag 3
    </StyledTag>
    <Tag as="div" theme="warning" css={{ color: "red" }}>
      Tag 4
    </Tag>
  </>
);

export default App;

Expected behavior

I want to see that Tag 3 will be to the same Tag 4. Got styles for border and background

Example

[Ben Rogerson]

I created an example using next.js + stitches using your example and couldn't see the same issue:

Could you perhaps pull down this example and see if it works for you?
https://github.com/ben-rogerson/next-stitches-as-example

[Sergey]

Hi @ben-rogerson, your example work normal, but you used component Tag from styled. When I add wrapper for Tag, I got same problem.

const STag = styled("span", {...})
const Tag = (props) => <STag {...props} />;

[Ben Rogerson]

Thanks for that - I'm able to see this too.

This functionality is handled by styled-components rather than twin.
In this situation the fix is to use forwardedAs instead of as:

- <Tag as="div" css={{ color: "red" }}>
+ <Tag forwardedAs="div" css={{ color: "red" }}>

Fix sandbox / Docs ref / Related reading