Support styled-components with existing component (#2552)
Supports the syntax: ```js styled(ExistingComponent)` css: property; `; ``` Fixes #2545master
parent
3eed1933e1
commit
af6b020f7e
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
\`;
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -11,3 +11,6 @@ border-color : tomato
|
||||||
;
|
;
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
styled(ExistingComponent)`
|
||||||
|
color : papayawhip ; background-color: firebrick`;
|
||||||
|
|
Loading…
Reference in New Issue