Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flow doesn't return error with styled-components

See original GitHub issue

Environment

Binaries:

Node: 10.12.0 - /usr/bin/node
Yarn: 1.10.1 - /usr/bin/yarn
npm: 6.4.1 - /usr/bin/npm

npmPackages:

babel-plugin-styled-components: ^1.5.1 => 1.5.1
styled-components: ^4.0.0-beta.10 => 4.0.0-beta.10

Reproduction

git clone https://github.com/ravecat/styled-components-toolbox.git --single-branch --branch feature/migrate-to-flow
yarn
git commit --amend and can see console output

$ flow check Found 0 errors

Steps to reproduce

Create Button.js file with flow. Specifically indicated the wrong type for the variable (highlighted comment)

Button.js

/* @flow */
import React from "react";
import styled, { css, type ReactComponentStyled } from "styled-components";
import BaseComponent, { BaseProps } from "common/components/BaseComponent";

type ButtonProps = BaseProps & {
  type?: string,
  href?: string,
  disabled?: boolean
};

const Button = ({ children, ...rest }: ButtonProps) => (
  // TODO Set wrong type for test flow
  <Wrapper as="button" type={42} {...rest}>
    <span>{children}</span>
  </Wrapper>
);

const Wrapper: ReactComponentStyled<ButtonProps> = styled(BaseComponent).attrs({
  type: ({ type }) => type || "button"
})`
  display: inline-block;
  height: 32px;
  padding: 0 15px;
  line-height: 30px;
  text-align: center;
  letter-spacing: normal;
  cursor: pointer;
  outline: 0;
  white-space: nowrap;
  color: ${({ theme }) => theme.textColor};
  background: ${({ theme }) => theme.primaryColor};
  border: 1px solid ${({ theme }) => theme.primaryColor};
  border-radius: 0;

  :hover {
    background: ${({ theme }) => theme.textColor};
    color: ${({ theme }) => theme.primaryColor};
  }

  ${({ disabled }) =>
    disabled &&
    css`
      && {
        cursor: default;
        background: ${({ theme }) => theme.textColor};
        border-color: ${({ theme }) => theme.dividerColor};
        color: ${({ theme }) => theme.dividerColor};
      }
    `};
`;

export default Button;