Merge pull request #162 from styled-components/adjust-version-detector

looser version detection method

Author: quantizor

package.json

@@ -26,8 +26,7 @@
     "styled-components": "^3.4.5"
   },
   "dependencies": {
-    "lodash": "^4.17.10",
-    "semver": "^5.5.1"
+    "lodash": "^4.17.10"
   },
   "resolutions": {
     "babel-core": "7.0.0-bridge.0"
@@ -56,4 +55,4 @@
       "<rootDir>/test/whitespaceTrimmingSerializer.js"
     ]
   }
-}
+}

src/utils/options.js

@@ -1,6 +1,3 @@
-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
@@ -19,4 +16,8 @@ export const useTranspileTemplateLiterals = state =>
  * 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')
+export const useNoTags = () =>
+  parseInt(
+    require('styled-components/package.json').version.split('.')[0],
+    10
+  ) >= 4

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

@@ -1,21 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should swap out the import if styled-components v4+ is detected 1`] = `
-"\\"use strict\\";
-
-var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
+exports[`should not swap out the import if styled-components v3 is detected 1`] = `
+"import styled from 'styled-components';
+const Named = styled(\\"div\\").withConfig({
+  displayName: \\"example__Named\\",
+  componentId: \\"ghf2ss-0\\"
+})([\\"width:100%;\\"]);
+const NamedWithInterpolation = styled(\\"div\\").withConfig({
+  displayName: \\"example__NamedWithInterpolation\\",
+  componentId: \\"ghf2ss-1\\"
+})([\\"color:\\", \\";\\"], props => props.color);
+const Wrapped = styled(Inner).withConfig({
+  displayName: \\"example__Wrapped\\",
+  componentId: \\"ghf2ss-2\\"
+})([\\"color:red;\\"]);"
+`;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports[`should swap out the import if styled-components v4 beta is detected 1`] = `
+"import styled from \\"styled-components/no-tags\\";
+const Named = styled(\\"div\\").withConfig({
+  displayName: \\"example__Named\\",
+  componentId: \\"ghf2ss-0\\"
+})([\\"width:100%;\\"]);
+const NamedWithInterpolation = styled(\\"div\\").withConfig({
+  displayName: \\"example__NamedWithInterpolation\\",
+  componentId: \\"ghf2ss-1\\"
+})([\\"color:\\", \\";\\"], props => props.color);
+const Wrapped = styled(Inner).withConfig({
+  displayName: \\"example__Wrapped\\",
+  componentId: \\"ghf2ss-2\\"
+})([\\"color:red;\\"]);"
+`;
 
-var Named = _styledComponents.default.div\`
-  width: 100%;
-\`;
-var NamedWithInterpolation = _styledComponents.default.div\`
-  color: \${function (props) {
-  return props.color;
-}};
-\`;
-var Wrapped = (0, _styledComponents.default)(Inner)\`
-  color: red;
-\`;"
+exports[`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: \\"example__Named\\",
+  componentId: \\"ghf2ss-0\\"
+})([\\"width:100%;\\"]);
+const NamedWithInterpolation = styled(\\"div\\").withConfig({
+  displayName: \\"example__NamedWithInterpolation\\",
+  componentId: \\"ghf2ss-1\\"
+})([\\"color:\\", \\";\\"], props => props.color);
+const Wrapped = styled(Inner).withConfig({
+  displayName: \\"example__Wrapped\\",
+  componentId: \\"ghf2ss-2\\"
+})([\\"color:red;\\"]);"
 `;

test/no-tags/example/.babelrc

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    [
+      "../../../src"
+    ]
+  ]
+}

test/no-tags/example.js renamed to test/no-tags/example/index.js

@@ -1,10 +1,34 @@
 import { transformFileSync } from '@babel/core'
 import * as path from 'path'
 
-jest.mock('styled-components/package.json', () => ({ version: '4.0.0' }))
+let mockVersion
+
+jest.mock('styled-components/package.json', () => ({ version: mockVersion }))
+
+beforeEach(() => jest.resetModules())
+
+it('should not swap out the import if styled-components v3 is detected', () => {
+  mockVersion = '3.0.0'
+
+  const fixturePath = path.join(__dirname + '/example/index.js')
+  const fixture = transformFileSync(fixturePath).code
+
+  expect(fixture).toMatchSnapshot()
+})
 
 it('should swap out the import if styled-components v4+ is detected', () => {
-  const fixturePath = path.join(__dirname + '/example.js')
+  mockVersion = '4.0.0'
+
+  const fixturePath = path.join(__dirname + '/example/index.js')
+  const fixture = transformFileSync(fixturePath).code
+
+  expect(fixture).toMatchSnapshot()
+})
+
+it('should swap out the import if styled-components v4 beta is detected', () => {
+  mockVersion = '4.0.0-beta.0'
+
+  const fixturePath = path.join(__dirname + '/example/index.js')
   const fixture = transformFileSync(fixturePath).code
 
   expect(fixture).toMatchSnapshot()

test/no-tags/index.test.js

@@ -3596,7 +3596,7 @@ sax@^1.2.4:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
+semver@^5.4.1, semver@^5.5.0:
   version "5.5.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"