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 (