Format CSS prop for emotion
parent
d80728b5ff
commit
a9be90c5d4
|
@ -94,7 +94,9 @@ function fromBabylonFlowOrTypeScript(path, print, options) {
|
|||
|
||||
switch (node.type) {
|
||||
case "TemplateLiteral": {
|
||||
const isCss = [isStyledJsx, isStyledComponents].some(isIt => isIt(path));
|
||||
const isCss = [isStyledJsx, isStyledComponents, isCssProp].some(isIt =>
|
||||
isIt(path)
|
||||
);
|
||||
|
||||
if (isCss) {
|
||||
// Get full template literal with expressions replaced by placeholders
|
||||
|
@ -534,6 +536,21 @@ function isStyledComponents(path) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* JSX element with CSS prop
|
||||
*/
|
||||
function isCssProp(path) {
|
||||
const parent = path.getParentNode();
|
||||
const parentParent = path.getParentNode(1);
|
||||
return (
|
||||
parentParent &&
|
||||
parent.type === "JSXExpressionContainer" &&
|
||||
parentParent.type === "JSXAttribute" &&
|
||||
parentParent.name.type === "JSXIdentifier" &&
|
||||
parentParent.name.name === "css"
|
||||
);
|
||||
}
|
||||
|
||||
function isStyledIdentifier(node) {
|
||||
return node.type === "Identifier" && node.name === "styled";
|
||||
}
|
||||
|
|
|
@ -1,5 +1,69 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`css-prop.js 1`] = `
|
||||
function SomeComponent (props) {
|
||||
// Create styles as if you're calling css and the class will be applied to the component
|
||||
return (<div css={\`
|
||||
color: blue;
|
||||
font-size: 17 px;
|
||||
|
||||
&:hover {
|
||||
color: green;
|
||||
}
|
||||
|
||||
& .some-class {
|
||||
font-size: 20px;
|
||||
}
|
||||
\`}>
|
||||
This will be blue until hovered.
|
||||
<div className="some-class">
|
||||
This font size will be 20px
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
const TestComponent = ({ children, ...props }) => (
|
||||
<div css={\`color: white; background: black\`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
function SomeComponent(props) {
|
||||
// Create styles as if you're calling css and the class will be applied to the component
|
||||
return (
|
||||
<div
|
||||
css={\`
|
||||
color: blue;
|
||||
font-size: 17 px;
|
||||
|
||||
&:hover {
|
||||
color: green;
|
||||
}
|
||||
|
||||
& .some-class {
|
||||
font-size: 20px;
|
||||
}
|
||||
\`}
|
||||
>
|
||||
This will be blue until hovered.
|
||||
<div className="some-class">This font size will be 20px</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TestComponent = ({ children, ...props }) => (
|
||||
<div
|
||||
css={\`
|
||||
color: white;
|
||||
background: black;
|
||||
\`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
`;
|
||||
|
||||
exports[`expressions.js 1`] = `
|
||||
const long = \`long \${a//comment
|
||||
.b} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long long\`;
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
function SomeComponent (props) {
|
||||
// Create styles as if you're calling css and the class will be applied to the component
|
||||
return (<div css={`
|
||||
color: blue;
|
||||
font-size: 17 px;
|
||||
|
||||
&:hover {
|
||||
color: green;
|
||||
}
|
||||
|
||||
& .some-class {
|
||||
font-size: 20px;
|
||||
}
|
||||
`}>
|
||||
This will be blue until hovered.
|
||||
<div className="some-class">
|
||||
This font size will be 20px
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
const TestComponent = ({ children, ...props }) => (
|
||||
<div css={`color: white; background: black`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
Loading…
Reference in New Issue