Support for style objects

[paulcretu]

Are style objects supported? They don't seem to work for me, and I can't find any examples in the issues or in the tests. I'm running the plugin using inside create-react-app using customize-cra, but I believe I have it (mostly) configured properly because when I change things into template literals, the namespace does get added correctly (both using styled and the css prop).

[paulcretu]

If anyone else is running across the same issue, a workaround seems to be wrapping the style objects inside of a template literal. For example:

const styles = {
    background: "palevioletred",
    height: "50px",
    width: "50px",
};
const Box = styled.div`
    ${styles}; /* <--- don't forget the trailing semicolon */
`;

The trailing semicolon seems to be necessary, probably related to #46 and #33 (comment).

This workaround seems to work for solving a variety of related issues—by wrapping things, I can pass in not just styled components, but other variables containing styles (plain strings, template literals, styles constructed with the css function, styles from twin.macro using tw).

[A11oW]

I have a similar problem with style object:

import React from "react";
import {css} from "styled-components";

const Style = css`
    color: #999;
`

const Component = () => (
    <span css={Style}>
        Some content
    </span>
);

Error: <css input>:2:5: Unknown word CSS: fake-element-placeholder-0