babel-plugin-styled-components - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1-test

lib/visitors/transpileCssProp.js

@@ -108,4 +108,5 @@ "use strict";
 
-  if (!css) return;
-  elem.node.attributes = elem.node.attributes.filter(attr => attr !== path.node);
+  if (!css) return; // strip off css prop from final output
+
+  elem.node.attributes = elem.node.attributes.filter(x => t.isJSXAttribute(x) ? x.name.name !== 'css' : false);
   elem.node.name = t.jSXIdentifier(id.name);
@@ -132,3 +133,4 @@
       t.isIdentifier(property.key) && path.scope.hasBinding(property.key.name) && ( // but not a object reference shorthand like css={{ color }}
-      t.isIdentifier(property.value) ? property.key.name !== property.value.name : true)) {
+      t.isIdentifier(property.value) ? property.key.name !== property.value.name : true) && // and not a tricky expression
+      !t.isLogicalExpression(property.value) && !t.isConditionalExpression(property.value)) {
         replaceObjectWithPropFunction = true;
@@ -160,5 +162,25 @@ const identifier = getLocalIdentifier(path);
         replaceObjectWithPropFunction = true;
-        const identifier = getLocalIdentifier(path);
-        elem.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(identifier.name), t.jSXExpressionContainer(property.value)));
-        acc.push(t.objectProperty(property.key, t.memberExpression(p, identifier)));
+
+        if ( // handle tricky expressions
+        t.isConditionalExpression(property.value) || t.isLogicalExpression(property.value)) {
+          const jSXIdentifier = getLocalIdentifier(path);
+          const injectedIdentifier = getLocalIdentifier(path);
+          let insertionPoint = elem;
+
+          while (insertionPoint.key !== 'body') {
+            insertionPoint = insertionPoint.parentPath;
+          } // convert complicated expressions into hoisted local variables
+          // TODO: add logic to put the injected variables just above JSXOpeningElement instead of at the root in case there is
+          // any variable manipulation happening
+
+
+          insertionPoint.unshiftContainer('body', t.variableDeclaration('var', [t.variableDeclarator(injectedIdentifier, property.value)]));
+          elem.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(jSXIdentifier.name), t.jSXExpressionContainer(injectedIdentifier))); // now push the properties back into the assembled object
+
+          acc.push(t.objectProperty(t.identifier(property.key.name), t.memberExpression(p, jSXIdentifier)));
+        } else {
+          const identifier = getLocalIdentifier(path);
+          elem.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(identifier.name), t.jSXExpressionContainer(property.value)));
+          acc.push(t.objectProperty(property.key, t.memberExpression(p, identifier)));
+        }
       } else {
@@ -165,0 +187,0 @@ // some sort of primitive which is safe to pass through as-is

package.json

 {
-  "version": "2.0.0",
+  "version": "2.0.1-test",
   "name": "babel-plugin-styled-components",
@@ -4,0 +4,0 @@ "description": "Improve the debugging experience and add server-side rendering support to styled-components",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41660

increased by3.31%

Lines of code

737

increased by2.22%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes