styled-components and Glamorous support

Further to this discussion https://github.com/styleguidist/react-styleguidist/issues/37

If you are using styled-components, you may have a component similar to:

import styled, { css } from "styled-components";
import PropTypes from "prop-types";

const Button = styled.a`
  background: transparent;
  color: white;

  ${({primary}) =>
    !!primary &&
    css`
      background: white;
      color: palevioletred;
    `};
`;

Button.propTypes = {
  primary: PropTypes.bool
};

export default Button;

or, with Glamorous:

import glamorous from "glamorous";
import PropTypes from "prop-types";

const Button = glamorous.button({
  background: "transparent",
  color: "white"
},
  ({ primary }) => (!!primary && {
    background: "white",
    color: "palevioletred"
  })
);

Button.propTypes = {
  primary: PropTypes.bool
};

This doesn’t import React, so afaik is why the react-docgen resolver does not pick it up as a valid component.

No suitable component definition found.

Is there an existing way to get this to work e.g. with a custom resolver? Or is a bugfix/new feature needed?

#195 looks like it resolves this, and is marked as closed as the feature in v3. I’ve installed react-docgen@3.0.0-beta11 but still get the issue with the above 2 examples.

[jquense]

if anyone is interested this is what we came up with for css-literal-loader, but the syntax is the same for styled components or emotion, so this should work for them as well:

https://gist.github.com/jquense/c2a92f1c909552f295bb7953fcd2ce4d

[chpeters]

I am seeing this issue as well using styled-components (through styled-system’s system function).