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

Comparing version 1.10.1-0 to 1.10.1-1

lib/index.js

@@ -29,4 +29,9 @@ "use strict";
     visitor: {
-      JSXAttribute(path, state) {
-        (0, _transpileCssProp.default)(t)(path, state);
+      Program(path, state) {
+        path.traverse({
+          JSXAttribute(path, state) {
+            (0, _transpileCssProp.default)(t)(path, state);
+          }
+
+        }, state);
       },
@@ -33,0 +38,0 @@

lib/utils/detectors.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.isPureHelper = exports.isHelper = exports.isKeyframesHelper = exports.isInjectGlobalHelper = exports.isCreateGlobalStyleHelper = exports.isCSSHelper = exports.isStyled = exports.isValidTopLevelImport = void 0;
+exports.isPureHelper = exports.isHelper = exports.isKeyframesHelper = exports.isInjectGlobalHelper = exports.isCreateGlobalStyleHelper = exports.isCSSHelper = exports.isStyled = exports.importLocalName = exports.isValidTopLevelImport = void 0;
 var VALID_TOP_LEVEL_IMPORT_PATHS = ['styled-components', 'styled-components/no-tags', 'styled-components/native', 'styled-components/primitives'];
@@ -18,5 +18,6 @@
 var importLocalName = function importLocalName(name, state) {
+  var bypassCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var cacheKey = name + state.file.opts.filename;
 
-  if (localNameCache[cacheKey]) {
+  if (!bypassCache && localNameCache[cacheKey]) {
     return localNameCache[cacheKey];
@@ -75,2 +76,4 @@ }
 
+exports.importLocalName = importLocalName;
+
 var isStyled = function isStyled(t) {
@@ -77,0 +80,0 @@ return function (tag, state) {

lib/visitors/transpileCssProp.js

@@ -10,32 +10,18 @@ "use strict";
 
+var _detectors = require("../utils/detectors");
+
 var _options = require("../utils/options");
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var getName = function getName(node, t, p) {
+// Most of this code was taken from @satya164's babel-plugin-css-prop
+// @see https://github.com/satya164/babel-plugin-css-prop
+var getName = function getName(node, t) {
   if (typeof node.name === 'string') return node.name;
 
   if (t.isJSXMemberExpression(node)) {
-    return `${getName(node.object, t, p)}.${node.property.name}`;
+    return `${getName(node.object, t)}.${node.property.name}`;
   }
 
-  throw p.buildCodeFrameError(`Cannot infer name from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`);
+  throw path.buildCodeFrameError(`Cannot infer name from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`);
 };
 
-var convertJSXExpressionToExpression = function convertJSXExpressionToExpression(node, t, p) {
-  if (t.isJSXIdentifier(node)) return t.identifier(node.name);
-
-  if (t.isJSXMemberExpression(node)) {
-    return t.memberExpression(convertJSXExpressionToExpression(node.object, t, p), convertJSXExpressionToExpression(node.property, t, p));
-  }
-
-  throw p.buildCodeFrameError(`Cannot convert from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`);
-};
-
 var _default = function _default(t) {
@@ -48,17 +34,25 @@ return function (path, state) {
 
-    var importName = state.customImportName; // Insert import if it doesn't exist yet
+    var importName = state.customImportName || t.identifier((0, _detectors.importLocalName)('default', state));
+    var bindings = program.scope.bindings; // Insert import if it doesn't exist yet
 
-    var bindings = program.scope.bindings;
-
-    if (!importName || !bindings[importName.name]) {
-      importName = (0, _helperModuleImports.addDefault)(path, 'styled-components', {
-        nameHint: importName ? importName.name : 'styled'
+    if (!bindings[importName.name]) {
+      (0, _helperModuleImports.addDefault)(path, 'styled-components', {
+        nameHint: 'styled'
       });
+      importName = t.identifier((0, _detectors.importLocalName)('default', state, true));
     }
 
-    if (!state.customImportName) state.customImportName = importName;
     var elem = path.parentPath;
-    var id = path.scope.generateUidIdentifier('Styled' + getName(elem.node.name, t, path).replace(/^([a-z])/, function (match, p1) {
+    var name = getName(elem.node.name, t);
+    var id = path.scope.generateUidIdentifier('Styled' + name.replace(/^([a-z])/, function (match, p1) {
       return p1.toUpperCase();
     }));
+    var styled;
+
+    if (/^[a-z]/.test(name)) {
+      styled = t.memberExpression(importName, t.identifier(name));
+    } else {
+      styled = t.callExpression(importName, [t.identifier(name)]);
+    }
+
     var css;
@@ -87,16 +81,3 @@
 
-    if (!css) return; // If the identifier is not primitive, we pass it in the 'as' prop
-
-    var isPrimitive = t.isJSXIdentifier(elem.node.name) ? /^[a-z]/.test(elem.node.name.name) : false;
-    var styled = t.callExpression(importName, [isPrimitive ? t.stringLiteral(elem.node.name.name) // Use a arbitrary string for the tag name so styled-component doesn't throw error
-    // I used hyphen since it'll never be a valid html tag
-    : t.stringLiteral('-')]);
-
-    if (!isPrimitive && !elem.node.attributes.some(function (attr) {
-      return attr.name.name === 'as';
-    })) {
-      // Add it to the beginning so that it can be overriden {...spread} attributes etc.
-      elem.node.attributes.unshift(t.jSXAttribute(t.jSXIdentifier('as'), t.jSXExpressionContainer(convertJSXExpressionToExpression(elem.node.name, t, path))));
-    }
-
+    if (!css) return;
     elem.node.attributes = elem.node.attributes.filter(function (attr) {
@@ -112,9 +93,4 @@ return attr !== path.node;
     css.expressions = css.expressions.reduce(function (acc, ex) {
-      if (Object.entries(bindings).some(function (_ref
-      /*: any */
-      ) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            b = _ref2[1];
-
-        return b.referencePaths.find(function (p) {
+      if (Object.keys(bindings).some(function (key) {
+        return bindings[key].referencePaths.find(function (p) {
           return p.node === ex;
@@ -125,6 +101,7 @@ });
       } else {
-        var name = path.scope.generateUidIdentifier('css');
+        var _name = path.scope.generateUidIdentifier('css');
+
         var p = t.identifier('p');
-        elem.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(name.name), t.jSXExpressionContainer(ex)));
-        acc.push(t.arrowFunctionExpression([p], t.memberExpression(p, name)));
+        elem.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(_name.name), t.jSXExpressionContainer(ex)));
+        acc.push(t.arrowFunctionExpression([p], t.memberExpression(p, _name)));
       }
@@ -131,0 +108,0 @@

package.json

 {
-  "version": "1.10.1-0",
+  "version": "1.10.1-1",
   "name": "babel-plugin-styled-components",
@@ -18,14 +18,14 @@ "description": "Improve the debugging experience and add server-side rendering support to styled-components",
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-test": "^0.1.2",
-    "jest": "^23.6.0",
-    "jest-file-snapshot": "^0.3.2",
-    "prettier": "^1.14.2",
-    "rimraf": "^2.6.2",
-    "styled-components": "^4.0.0"
+    "babel-test": "^0.2.1",
+    "jest": "^24.8.0",
+    "jest-file-snapshot": "^0.3.6",
+    "prettier": "^1.18.2",
+    "rimraf": "^2.6.3",
+    "styled-components": "^4.3.1"
   },
@@ -36,3 +36,3 @@ "dependencies": {
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "lodash": "^4.17.10"
+    "lodash": "^4.17.11"
   },
@@ -39,0 +39,0 @@ "resolutions": {

No alert changes

Worsened metrics

Total package byte prevSize

36312

decreased by-3.94%

Lines of code

713

decreased by-1.38%

Dependency changes

• Updatedlodash@^4.17.11