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

Comparing version 0.0.3-1 to 1.0.0

lib/index.js

@@ -12,77 +12,6 @@ 'use strict';
     visitor: {
-      ImportDeclaration: {
-        enter: function enter(path) {
-          // Is the styled-components import!
-          if (path.node.source.value === 'styled-components') {
-            // If the default is imported it's at defaultImport[0], otherwise defaultImport is empty
-            var defaultImport = path.node.specifiers.filter(function (specifier) {
-              return t.isImportDefaultSpecifier(specifier);
-            });
-            if (defaultImport.length > 0) {
-              // Save the imported name
-              importedVariableName = defaultImport[0].local.name;
-            }
-          }
-        }
-      },
-      TaggedTemplateExpression: {
-        enter: function enter(path, _ref2) {
-          var opts = _ref2.opts;
-
-          var addDisplayName = opts.displayName === undefined || opts.displayName === null ? true : opts.displayName;
-          var addIdentifier = opts.ssr === undefined || opts.ssr === null ? true : opts.ssr;
-          var tag = path.node.tag;
-
-          if (!isStyled(tag)) return;
-
-          var displayName = void 0;
-
-          path.find(function (path) {
-            // const X = styled
-            if (path.isAssignmentExpression()) {
-              displayName = path.node.left;
-              // const X = { Y: styled }
-            } else if (path.isObjectProperty()) {
-              displayName = path.node.key;
-              // let X; X = styled
-            } else if (path.isVariableDeclarator()) {
-              displayName = path.node.id;
-            } else if (path.isStatement()) {
-              // we've hit a statement, we should stop crawling up
-              return true;
-            }
-
-            // we've got an displayName (if we need it) no need to continue
-            if (displayName) return true;
-          });
-
-          // foo.bar -> bar
-          if (t.isMemberExpression(displayName)) {
-            displayName = displayName.property;
-          }
-
-          // Get target
-          var target = (0, _getTarget2.default)(path.node.tag);
-
-          // identifiers are the only thing we can reliably get a name from
-          if (!t.isIdentifier(displayName)) {
-            displayName = undefined;
-          } else {
-            displayName = displayName.name;
-          }
-
-          id++;
-          // Prefix the identifier with a character if no displayName exists because CSS classes cannot start with a number
-          var identifier = (displayName || 's') + '-' + (0, _hash2.default)('' + id + displayName);
-          // Put together the final code again
-          var call = buildStyledCall({
-            STYLED: t.identifier(importedVariableName),
-            TARGET: target,
-            DISPLAYNAME: addDisplayName && displayName && t.stringLiteral(displayName) || t.identifier('undefined'),
-            IDENTIFIER: addIdentifier && identifier && t.stringLiteral(identifier) || t.identifier('undefined')
-          });
-          // Put together the styled call with the template literal
-          // to get the finished styled({ })`` form! 🎉
-          path.node.tag = call.expression;
-        }
+      TaggedTemplateExpression(path, state) {
+        (0, _minify2.default)(path, state);
+        (0, _displayNameAndId2.default)(path, state);
+        (0, _transpileTemplateLiterals2.default)(path, state);
       }
@@ -93,25 +22,14 @@ }
 
-var _babelTemplate = require('babel-template');
+var _minify = require('./visitors/minify');
 
-var _babelTemplate2 = _interopRequireDefault(_babelTemplate);
+var _minify2 = _interopRequireDefault(_minify);
 
-var _hash = require('./utils/hash');
+var _displayNameAndId = require('./visitors/displayNameAndId');
 
-var _hash2 = _interopRequireDefault(_hash);
+var _displayNameAndId2 = _interopRequireDefault(_displayNameAndId);
 
-var _getTarget = require('./utils/get-target');
+var _transpileTemplateLiterals = require('./visitors/transpileTemplateLiterals');
 
-var _getTarget2 = _interopRequireDefault(_getTarget);
+var _transpileTemplateLiterals2 = _interopRequireDefault(_transpileTemplateLiterals);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var buildStyledCall = (0, _babelTemplate2.default)('STYLED({\n  target: TARGET,\n  displayName: DISPLAYNAME,\n  identifier: IDENTIFIER\n})');
-
-// Default imported variable name to "styled", adjust based on import below
-var importedVariableName = 'styled';
-
-var isStyled = function isStyled(tag) {
-  return tag.object && tag.object.name === importedVariableName || tag.callee && tag.callee.name === importedVariableName;
-};
-
-var id = 0;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
-  "version": "0.0.3-1",
+  "version": "1.0.0",
   "name": "babel-plugin-styled-components",
@@ -11,6 +11,9 @@ "description": "Improve the debugging experience and add server-side rendering support to styled-components",
   "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.4.5",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
+    "babel-preset-env": "^1.1.8",
     "jest": "^17.0.3"
@@ -32,6 +35,3 @@ },
     "displayName"
-  ],
-  "dependencies": {
-    "babel-template": "^6.16.0"
-  }
+  ]
 }

README.md

@@ -65,2 +65,67 @@ # `babel-plugin-styled-components`
 
+### Minify styles
+
+By default, plugin minifies styles in template literals. This operation may potentially break your styles in some rare cases, so we recommend to keep this option enabled in development if it's enabled in the production build. You will not see the effect of minification in generated style tags, it solely affects the presentation of styles inside js code.
+
+You can disable minification if you don't need it with minify option:
+
+```JSON
+{
+  "plugins": [
+    ["styled-components", {
+      "minify": false
+    }]
+  ]
+}
+```
+
+### Transpile template literals
+
+Template literals are not supported yet by some browsers. You'll probably transpile your code with some preset that includes `babel-plugin-transform-es2015-template-literals` to make it work in older browsers, but there is one tiny caveat. Output of that plugin is quite wordy. It's done this way to meet specification requirements.
+
+```JS
+// processed with babel-preset-latest
+
+var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;']);
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Simple = _styledComponents2.default.div(_templateObject);
+```   
+
+Styled-components do not require full spec compatibility. So in order to reduce bundle size this plugin will  transpile template literals attached to styled-component to the form that works in older browsers but have smaller footprint.
+
+```JS
+// processed with babel-preset-latest
+// and babel-plugin-styled-components with { transpileTemplateLiterals: true } option
+
+var Simple = _styledComponents2.default.div(['width: 100%;']);
+```
+
+Take a note that it will keep other template literals not related to styled-components as is.
+
+```JS
+// following will be converted:
+styled.div``
+keyframe``
+css``
+
+// But this will not be converted and will arise syntax error in IE:
+`some text`
+
+// In next example outer template literal will be converted because it's attached to component factory,
+// but inner template literals will not be touched and will generate syntax error in older browsers.
+styled.div`color: ${ light ? `white` : `black`};`
+```
+
+You can disable this feature with `transpileTemplateLiterals` option:
+
+```JSON
+{
+  "plugins": [
+    ["styled-components", {
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
+```
+
 ## License
@@ -67,0 +132,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

Improved metrics

Dependency count

0

decreased by-100%

Dev dependency count

3

decreased by-25%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

135

increased by92.86%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

18165

decreased by-85.11%

Number of package files

11

decreased by-57.69%

Lines of code

273

decreased by-26.42%

Dependency changes

• - Removedbabel-template@^6.16.0

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedbabel-code-frame@6.26.0(transitive)

• - Removedbabel-messages@6.23.0(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedbabel-template@6.26.0(transitive)

• - Removedbabel-traverse@6.26.0(transitive)

• - Removedbabel-types@6.26.0(transitive)

• - Removedbabylon@6.18.0(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removeddebug@2.6.9(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedesutils@2.0.3(transitive)

• - Removedglobals@9.18.0(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedinvariant@2.2.4(transitive)

• - Removedjs-tokens@3.0.2(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedms@2.0.0(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.0(transitive)

• - Removedto-fast-properties@1.0.3(transitive)