V4: classes not properly forwarded in some cases

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel® Core™ i7-6920HQ CPU @ 2.90GHz
• Memory: 459.63 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.12.0 - /usr/local/bin/node
• Yarn: 1.10.1 - /usr/local/bin/yarn
• npm: 6.4.1 - /usr/local/bin/npm
• Watchman: 4.7.0 - /usr/local/bin/watchman

npmPackages:

• babel-plugin-styled-components: ^1.8.0 => 1.8.0
• styled-components: ^3.4.9 => 3.4.10

Reproduction

https://codesandbox.io/s/w32730pr5

Steps to reproduce

Try to extend the styles of a button from semantic-ui-react:

import { Button as SemanticBtn } from "semantic-ui-react";
import styled from "styled-components"; // latest v4

import "semantic-ui-css/semantic.min.css";

const Button = styled(SemanticBtn)`
  &&& {
    background: green;
  }
`;

// inside render:
<Button primary>test </Button> // this gets the updated styles with semantic-ui styles properly
<Button as="a" primary> // this fails to have semantic-ui styles because the class does not get forwarded

Expected Behavior

The second button should render as an anchor with the classes forwarded so that it is still styled properly like a button (Notice the expected “ui primary button” classes) <a class="ui primary button sc-bdVaJa kmcmFQ" />

Here is an example running styled-components v3.4.10 where this was previously working https://codesandbox.io/s/62l6z2j02z

Actual Behavior

Notice that the second button renders like this (button classes not forwarded): <a class="sc-bZQynM bMlcym">test </a>

So it ends up losing some styles and does not render like a button

[probablyup]

Are you saying that in v4 styled-components has its own handler for the as prop and that it is conflicting with semantic’s (hence why it breaks)?

Exactly. But we will have a way around this soon.

[kusmierz]

Hey @probablyup, have you time to look at this?