Merge pull request #156 from styled-components/undo-v4-requirement

 only rewrite the styled-components import if >= v4

Author: kitten

README.md

@@ -23,16 +23,6 @@ Then add it to your babel configuration:
 }
 ```
 
-## styled-components v4 beta
-
-If you are using the styled-components v4 beta, you'll also need to use the beta version of this plugin:
-
-```
-npm install --save-dev babel-plugin-styled-components@beta
-```
-
-Older versions should technically work, but some of the bundle size reduction benefits are only realized with the newer code!
-
 ## Documentation
 
 **The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**

package.json

@@ -20,14 +20,15 @@
     "babel-preset-env": "^1.2.2",
     "jest": "^17.0.3",
     "prettier": "^1.12.1",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "styled-components": "^3.4.5"
   },
   "dependencies": {
-    "@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
-    "lodash": "^4.17.10"
+    "lodash": "^4.17.10",
+    "semver": "^5.5.1"
   },
   "peerDependencies": {
-    "styled-components": ">= 4.0"
+    "styled-components": ">= 2"
   },
   "scripts": {
     "clean": "rimraf lib",
@@ -50,4 +51,4 @@
       "<rootDir>/test/whitespaceTrimmingSerializer.js"
     ]
   }
-}
+}

src/utils/options.js

@@ -1,3 +1,6 @@
+import semver from 'semver'
+import styledPkg from 'styled-components/package.json'
+
 function getOption({ opts }, name, defaultValue = true) {
   return opts[name] === undefined || opts[name] === null
     ? defaultValue
@@ -10,3 +13,10 @@ export const useFileName = state => getOption(state, 'fileName')
 export const useMinify = state => getOption(state, 'minify')
 export const useTranspileTemplateLiterals = state =>
   getOption(state, 'transpileTemplateLiterals')
+
+/**
+ * When using the babel plugin, we desugar styled.div to styled('div'), which means we can
+ * then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
+ * ahead of time.
+ */
+export const useNoTags = () => semver.satisfies(styledPkg.version, '>= 4')

src/visitors/rewriteStyledImport.js

@@ -1,10 +1,12 @@
+import { useNoTags } from '../utils/options'
+
 /**
- * When using the Babel plugin, we desugar styled.div to styled('div'), which means we can
- * then use a lighter-weight version of s-c since those element names don't need to be kept around
+ * When using the babel plugin, we desugar styled.div to styled('div'), which means we can
+ * then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
  * ahead of time.
  */
 export default t => path => {
-  if (path.node.source.value === 'styled-components') {
+  if (useNoTags() && path.node.source.value === 'styled-components') {
     path.node.source = t.stringLiteral('styled-components/no-tags')
   }
 }

test/__snapshots__/index.test.js.snap

@@ -103,7 +103,7 @@ const TestCallExpression = styled_default.default(Test).withConfig({
 `;
 
 exports[`fixtures should minify css in helpers 1`] = `
-"import { css, keyframes } from \'styled-components/no-tags\';
+"import { css, keyframes } from \'styled-components\';
 
 const key = keyframes\`to{transform:rotate(360deg);}\`;
 
@@ -119,31 +119,31 @@ var _templateObject = _taggedTemplateLiteral([\'width:100%;\'], [\'width:100%;\'
     _templateObject4 = _taggedTemplateLiteral([\'color:red;\'], [\'color:red;\']),
     _templateObject5 = _taggedTemplateLiteral([\'&:hover{color:blue;}\'], [\'&:hover{color:blue;}\']);
 
-var _noTags = require(\'styled-components/no-tags\');
+var _styledComponents = require(\'styled-components\');
 
-var _noTags2 = _interopRequireDefault(_noTags);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Simple = (0, _noTags2.default)(\'div\')(_templateObject);
+var Simple = (0, _styledComponents2.default)(\'div\')(_templateObject);
 
-var Interpolation = (0, _noTags2.default)(\'div\')(_templateObject2, function (props) {
+var Interpolation = (0, _styledComponents2.default)(\'div\')(_templateObject2, function (props) {
   return props.text;
 });
 
-var SpecialCharacters = (0, _noTags2.default)(\'div\')(_templateObject3, function (props) {
+var SpecialCharacters = (0, _styledComponents2.default)(\'div\')(_templateObject3, function (props) {
   return props.text;
 });
 
-var Comment = (0, _noTags2.default)(\'div\')(_templateObject4);
+var Comment = (0, _styledComponents2.default)(\'div\')(_templateObject4);
 
-var Parens = (0, _noTags2.default)(\'div\')(_templateObject5);"
+var Parens = (0, _styledComponents2.default)(\'div\')(_templateObject5);"
 `;
 
 exports[`fixtures should minify css to use without transpilation 1`] = `
-"import styled from \'styled-components/no-tags\';
+"import styled from \'styled-components\';
 
 const Simple = styled(\'div\')\`width:100%;\`;
 
@@ -198,13 +198,13 @@ const Test7 = styled(\'div\').withConfig({
 `;
 
 exports[`fixtures should not use private api if not required 1`] = `
-"import styled from \'styled-components/no-tags\';
+"import styled from \'styled-components\';
 
 const Test = styled(\'div\')\`width:100%;\`;"
 `;
 
 exports[`fixtures should track the imported variable 1`] = `
-"import s from \"styled-components/no-tags\";
+"import s from \"styled-components\";
 
 const Test = s(\"div\").withConfig({
   displayName: \"Test\",
@@ -254,47 +254,47 @@ const TestCallExpression = styled_default.default(Test).withConfig({
 exports[`fixtures should transpile template literals with config 1`] = `
 "\'use strict\';
 
-var _noTags = require(\'styled-components/no-tags\');
+var _styledComponents = require(\'styled-components\');
 
-var _noTags2 = _interopRequireDefault(_noTags);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Named = (0, _noTags2.default)(\'div\').withConfig({
+var Named = (0, _styledComponents2.default)(\'div\').withConfig({
   displayName: \'transpile-template-literals-with-config__Named\'
 })([\'\\n  width: 100%;\\n\']);
 
-var NamedWithInterpolation = (0, _noTags2.default)(\'div\').withConfig({
+var NamedWithInterpolation = (0, _styledComponents2.default)(\'div\').withConfig({
   displayName: \'transpile-template-literals-with-config__NamedWithInterpolation\'
 })([\'\\n  color: \', \';\\n\'], function (color) {
   return props.color;
 });
 
-var Wrapped = (0, _noTags2.default)(Inner).withConfig({
+var Wrapped = (0, _styledComponents2.default)(Inner).withConfig({
   displayName: \'transpile-template-literals-with-config__Wrapped\'
 })([\'color: red;\']);"
 `;
 
 exports[`fixtures should transpile template literals without config 1`] = `
 "\'use strict\';
 
-var _noTags = require(\'styled-components/no-tags\');
+var _styledComponents = require(\'styled-components\');
 
-var _noTags2 = _interopRequireDefault(_noTags);
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Named = (0, _noTags2.default)(\'div\')([\'\\n  width: 100%;\\n\']);
+var Named = (0, _styledComponents2.default)(\'div\')([\'\\n  width: 100%;\\n\']);
 
-var NamedWithInterpolation = (0, _noTags2.default)(\'div\')([\'\\n  color: \', \';\\n\'], function (color) {
+var NamedWithInterpolation = (0, _styledComponents2.default)(\'div\')([\'\\n  color: \', \';\\n\'], function (color) {
   return props.color;
 });
 
-var Wrapped = (0, _noTags2.default)(Inner)([\'color: red;\']);"
+var Wrapped = (0, _styledComponents2.default)(Inner)([\'color: red;\']);"
 `;
 
 exports[`fixtures should use file name 1`] = `
-"import styled from \"styled-components/no-tags\";
+"import styled from \"styled-components\";
 
 const Test = styled(\"div\").withConfig({
   displayName: \"use-file-name__Test\",
@@ -319,5 +319,5 @@ exports[`fixtures should work with hoisted default as import 1`] = `
   displayName: \'work-with-hoisted-default-as-import__Test\',
   componentId: \'sc-1te5tgi-0\'
 })\`width:100%;\`;
-import { default as s, css } from \'styled-components/no-tags\';"
+import { default as s, css } from \'styled-components\';"
 `;

test/no-tags/__snapshots__/index.test.js.snap

@@ -0,0 +1,18 @@
+exports[`test should swap out the import if styled-components v4+ is detected 1`] = `
+"import styled from \'styled-components/no-tags\';
+
+const Named = styled(\'div\').withConfig({
+  displayName: \'unknown__Named\',
+  componentId: \'sc-2vipsm-0\'
+})([\'width:100%;\']);
+
+const NamedWithInterpolation = styled(\'div\').withConfig({
+  displayName: \'unknown__NamedWithInterpolation\',
+  componentId: \'sc-2vipsm-1\'
+})([\'color:\', \';\'], props => props.color);
+
+const Wrapped = styled(Inner).withConfig({
+  displayName: \'unknown__Wrapped\',
+  componentId: \'sc-2vipsm-2\'
+})([\'color:red;\']);"
+`;

test/no-tags/example.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+const Named = styled.div`
+  width: 100%;
+`
+
+const NamedWithInterpolation = styled.div`
+  color: ${props => props.color};
+`
+
+const Wrapped = styled(Inner)`
+  color: red;
+`

test/no-tags/index.test.js

@@ -0,0 +1,12 @@
+import { transform } from 'babel-core'
+import * as fs from 'fs'
+
+jest.mock('styled-components/package.json', () => ({ version: '4.0.0' }))
+
+it('should swap out the import if styled-components v4+ is detected', () => {
+  const fixture = transform(
+    fs.readFileSync(__dirname + '/example.js', 'utf8'),
+    { plugins: ['./src'] }
+  ).code
+  expect(fixture).toMatchSnapshot()
+})