Format CSS prop for emotion
parent
d80728b5ff
commit
a9be90c5d4
|
@ -94,7 +94,9 @@ function fromBabylonFlowOrTypeScript(path, print, options) {
|
||||||
|
|
||||||
switch (node.type) {
|
switch (node.type) {
|
||||||
case "TemplateLiteral": {
|
case "TemplateLiteral": {
|
||||||
const isCss = [isStyledJsx, isStyledComponents].some(isIt => isIt(path));
|
const isCss = [isStyledJsx, isStyledComponents, isCssProp].some(isIt =>
|
||||||
|
isIt(path)
|
||||||
|
);
|
||||||
|
|
||||||
if (isCss) {
|
if (isCss) {
|
||||||
// Get full template literal with expressions replaced by placeholders
|
// 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) {
|
function isStyledIdentifier(node) {
|
||||||
return node.type === "Identifier" && node.name === "styled";
|
return node.type === "Identifier" && node.name === "styled";
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,69 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// 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`] = `
|
exports[`expressions.js 1`] = `
|
||||||
const long = \`long \${a//comment
|
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\`;
|
.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