diff --git a/src/clean-ast.js b/src/clean-ast.js index d85c11bb..6918baf4 100644 --- a/src/clean-ast.js +++ b/src/clean-ast.js @@ -229,6 +229,16 @@ function massageAST(ast, parent) { quasis.forEach(q => delete q.value); } + // CSS template literals in css prop + if ( + ast.type === "JSXAttribute" && + ast.name.name === "css" && + ast.value.type === "JSXExpressionContainer" && + ast.value.expression.type === "TemplateLiteral" + ) { + newObj.value.expression.quasis.forEach(q => delete q.value); + } + // styled-components, graphql, markdown if ( ast.type === "TaggedTemplateExpression" && diff --git a/src/multiparser.js b/src/multiparser.js index ade26630..70a770cb 100644 --- a/src/multiparser.js +++ b/src/multiparser.js @@ -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"; } diff --git a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap b/tests/template_literals/__snapshots__/jsfmt.spec.js.snap index 224b1043..79e3abf7 100644 --- a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap +++ b/tests/template_literals/__snapshots__/jsfmt.spec.js.snap @@ -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 (
+ This will be blue until hovered. +
+ This font size will be 20px +
+
) +} + +const TestComponent = ({ children, ...props }) => ( +
+ {children} +
+); +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +function SomeComponent(props) { + // Create styles as if you're calling css and the class will be applied to the component + return ( +
+ This will be blue until hovered. +
This font size will be 20px
+
+ ); +} + +const TestComponent = ({ children, ...props }) => ( +
+ {children} +
+); + +`; + 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\`; diff --git a/tests/template_literals/css-prop.js b/tests/template_literals/css-prop.js new file mode 100644 index 00000000..758c3d70 --- /dev/null +++ b/tests/template_literals/css-prop.js @@ -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 (
+ This will be blue until hovered. +
+ This font size will be 20px +
+
) +} + +const TestComponent = ({ children, ...props }) => ( +
+ {children} +
+);