Support styled-components with existing component (#2552)

Supports the syntax:

```js
styled(ExistingComponent)`
  css: property;
`;
```

Fixes #2545
master
Lucas Azzola 2017-07-28 19:04:17 +10:00 committed by GitHub
parent 3eed1933e1
commit af6b020f7e
4 changed files with 17 additions and 1 deletions

View File

@ -163,7 +163,8 @@ function massageAST(ast) {
(ast.tag.type === "Identifier" && (ast.tag.type === "Identifier" &&
(ast.tag.name === "gql" || (ast.tag.name === "gql" ||
ast.tag.name === "graphql" || ast.tag.name === "graphql" ||
ast.tag.name === "css"))) ast.tag.name === "css")) ||
(ast.tag.type === "CallExpression" && ast.tag.callee.name === "styled"))
) { ) {
newObj.quasi.quasis.forEach(quasi => delete quasi.value); newObj.quasi.quasis.forEach(quasi => delete quasi.value);
} }

View File

@ -292,6 +292,7 @@ function isStyledJsx(path) {
/** /**
* Template literal in these contexts: * Template literal in these contexts:
* styled.button`color: red` * styled.button`color: red`
* styled(Component)`color: red`
* Foo.extend`color: red` * Foo.extend`color: red`
* css`color: red` * css`color: red`
* keyframes`0% { opacity: 0; }` * keyframes`0% { opacity: 0; }`
@ -306,6 +307,9 @@ function isStyledComponents(path) {
(parent.tag.object.name === "styled" || (parent.tag.object.name === "styled" ||
(/^[A-Z]/.test(parent.tag.object.name) && (/^[A-Z]/.test(parent.tag.object.name) &&
parent.tag.property.name === "extend"))) || parent.tag.property.name === "extend"))) ||
(parent.tag.type === "CallExpression" &&
parent.tag.callee.type === "Identifier" &&
parent.tag.callee.name === "styled") ||
(parent.tag.type === "Identifier" && parent.tag.name === "css")) (parent.tag.type === "Identifier" && parent.tag.name === "css"))
); );
} }

View File

@ -14,6 +14,9 @@ border-color : tomato
; ;
\`; \`;
styled(ExistingComponent)\`
color : papayawhip ; background-color: firebrick\`;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Button = styled.button\` const Button = styled.button\`
color: palevioletred; color: palevioletred;
@ -27,4 +30,9 @@ const TomatoButton = Button.extend\`
border-color: tomato; border-color: tomato;
\`; \`;
styled(ExistingComponent)\`
color: papayawhip;
background-color: firebrick;
\`;
`; `;

View File

@ -11,3 +11,6 @@ border-color : tomato
; ;
`; `;
styled(ExistingComponent)`
color : papayawhip ; background-color: firebrick`;