Skip to content

Commit 2bd778d

Browse files
quantizorquantizor
committed
only rewrite the styled-components import if >= v4
1 parent 9a7a1fc commit 2bd778d

File tree

8 files changed

+242
-31
lines changed

8 files changed

+242
-31
lines changed

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@
2020
"babel-preset-env": "^1.2.2",
2121
"jest": "^17.0.3",
2222
"prettier": "^1.12.1",
23-
"rimraf": "^2.6.2"
23+
"rimraf": "^2.6.2",
24+
"styled-components": "^3.4.5"
2425
},
2526
"dependencies": {
26-
"lodash": "^4.17.10"
27+
"lodash": "^4.17.10",
28+
"semver": "^5.5.1"
2729
},
2830
"peerDependencies": {
2931
"styled-components": ">= 2"
@@ -49,4 +51,4 @@
4951
"<rootDir>/test/whitespaceTrimmingSerializer.js"
5052
]
5153
}
52-
}
54+
}

‎src/utils/options.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import semver from 'semver'
2+
import styledPkg from 'styled-components/package.json'
3+
14
function getOption({ opts }, name, defaultValue = true) {
25
return opts[name] === undefined || opts[name] === null
36
? defaultValue
@@ -10,3 +13,10 @@ export const useFileName = state => getOption(state, 'fileName')
1013
export const useMinify = state => getOption(state, 'minify')
1114
export const useTranspileTemplateLiterals = state =>
1215
getOption(state, 'transpileTemplateLiterals')
16+
17+
/**
18+
* When using the babel plugin, we desugar styled.div to styled('div'), which means we can
19+
* then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
20+
* ahead of time.
21+
*/
22+
export const useNoTags = () => semver.satisfies(styledPkg.version, '>= 4')

‎src/visitors/rewriteStyledImport.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { useNoTags } from '../utils/options'
2+
13
/**
2-
* When using the Babel plugin, we desugar styled.div to styled('div'), which means we can
3-
* then use a lighter-weight version of s-c since those element names don't need to be kept around
4+
* When using the babel plugin, we desugar styled.div to styled('div'), which means we can
5+
* then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
46
* ahead of time.
57
*/
68
export default t => path => {
7-
if (path.node.source.value === 'styled-components') {
9+
if (useNoTags() && path.node.source.value === 'styled-components') {
810
path.node.source = t.stringLiteral('styled-components/no-tags')
911
}
1012
}

‎test/__snapshots__/index.test.js.snap‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const TestCallExpression = styled_default.default(Test).withConfig({
103103
`;
104104
105105
exports[`fixtures should minify css in helpers 1`] = `
106-
"import { css, keyframes } from \'styled-components/no-tags\';
106+
"import { css, keyframes } from \'styled-components\';
107107
108108
const key = keyframes\`to{transform:rotate(360deg);}\`;
109109
@@ -119,31 +119,31 @@ var _templateObject = _taggedTemplateLiteral([\'width:100%;\'], [\'width:100%;\'
119119
_templateObject4 = _taggedTemplateLiteral([\'color:red;\'], [\'color:red;\']),
120120
_templateObject5 = _taggedTemplateLiteral([\'&:hover{color:blue;}\'], [\'&:hover{color:blue;}\']);
121121
122-
var _noTags = require(\'styled-components/no-tags\');
122+
var _styledComponents = require(\'styled-components\');
123123
124-
var _noTags2 = _interopRequireDefault(_noTags);
124+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
125125
126126
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
127127
128128
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
129129
130-
var Simple = (0, _noTags2.default)(\'div\')(_templateObject);
130+
var Simple = (0, _styledComponents2.default)(\'div\')(_templateObject);
131131
132-
var Interpolation = (0, _noTags2.default)(\'div\')(_templateObject2, function (props) {
132+
var Interpolation = (0, _styledComponents2.default)(\'div\')(_templateObject2, function (props) {
133133
return props.text;
134134
});
135135
136-
var SpecialCharacters = (0, _noTags2.default)(\'div\')(_templateObject3, function (props) {
136+
var SpecialCharacters = (0, _styledComponents2.default)(\'div\')(_templateObject3, function (props) {
137137
return props.text;
138138
});
139139
140-
var Comment = (0, _noTags2.default)(\'div\')(_templateObject4);
140+
var Comment = (0, _styledComponents2.default)(\'div\')(_templateObject4);
141141
142-
var Parens = (0, _noTags2.default)(\'div\')(_templateObject5);"
142+
var Parens = (0, _styledComponents2.default)(\'div\')(_templateObject5);"
143143
`;
144144
145145
exports[`fixtures should minify css to use without transpilation 1`] = `
146-
"import styled from \'styled-components/no-tags\';
146+
"import styled from \'styled-components\';
147147
148148
const Simple = styled(\'div\')\`width:100%;\`;
149149
@@ -159,13 +159,13 @@ const UrlComments = styled(\'div\')\`color:red;background:red;border:1px solid g
159159
`;
160160
161161
exports[`fixtures should not use private api if not required 1`] = `
162-
"import styled from \'styled-components/no-tags\';
162+
"import styled from \'styled-components\';
163163
164164
const Test = styled(\'div\')\`width:100%;\`;"
165165
`;
166166
167167
exports[`fixtures should track the imported variable 1`] = `
168-
"import s from \"styled-components/no-tags\";
168+
"import s from \"styled-components\";
169169
170170
const Test = s(\"div\").withConfig({
171171
displayName: \"Test\",
@@ -215,47 +215,47 @@ const TestCallExpression = styled_default.default(Test).withConfig({
215215
exports[`fixtures should transpile template literals with config 1`] = `
216216
"\'use strict\';
217217
218-
var _noTags = require(\'styled-components/no-tags\');
218+
var _styledComponents = require(\'styled-components\');
219219
220-
var _noTags2 = _interopRequireDefault(_noTags);
220+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
221221
222222
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
223223
224-
var Named = (0, _noTags2.default)(\'div\').withConfig({
224+
var Named = (0, _styledComponents2.default)(\'div\').withConfig({
225225
displayName: \'transpile-template-literals-with-config__Named\'
226226
})([\'\\n width: 100%;\\n\']);
227227
228-
var NamedWithInterpolation = (0, _noTags2.default)(\'div\').withConfig({
228+
var NamedWithInterpolation = (0, _styledComponents2.default)(\'div\').withConfig({
229229
displayName: \'transpile-template-literals-with-config__NamedWithInterpolation\'
230230
})([\'\\n color: \', \';\\n\'], function (color) {
231231
return props.color;
232232
});
233233
234-
var Wrapped = (0, _noTags2.default)(Inner).withConfig({
234+
var Wrapped = (0, _styledComponents2.default)(Inner).withConfig({
235235
displayName: \'transpile-template-literals-with-config__Wrapped\'
236236
})([\'color: red;\']);"
237237
`;
238238
239239
exports[`fixtures should transpile template literals without config 1`] = `
240240
"\'use strict\';
241241
242-
var _noTags = require(\'styled-components/no-tags\');
242+
var _styledComponents = require(\'styled-components\');
243243
244-
var _noTags2 = _interopRequireDefault(_noTags);
244+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
245245
246246
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
247247
248-
var Named = (0, _noTags2.default)(\'div\')([\'\\n width: 100%;\\n\']);
248+
var Named = (0, _styledComponents2.default)(\'div\')([\'\\n width: 100%;\\n\']);
249249
250-
var NamedWithInterpolation = (0, _noTags2.default)(\'div\')([\'\\n color: \', \';\\n\'], function (color) {
250+
var NamedWithInterpolation = (0, _styledComponents2.default)(\'div\')([\'\\n color: \', \';\\n\'], function (color) {
251251
return props.color;
252252
});
253253
254-
var Wrapped = (0, _noTags2.default)(Inner)([\'color: red;\']);"
254+
var Wrapped = (0, _styledComponents2.default)(Inner)([\'color: red;\']);"
255255
`;
256256
257257
exports[`fixtures should use file name 1`] = `
258-
"import styled from \"styled-components/no-tags\";
258+
"import styled from \"styled-components\";
259259
260260
const Test = styled(\"div\").withConfig({
261261
displayName: \"use-file-name__Test\",
@@ -280,5 +280,5 @@ exports[`fixtures should work with hoisted default as import 1`] = `
280280
displayName: \'work-with-hoisted-default-as-import__Test\',
281281
componentId: \'sc-1te5tgi-0\'
282282
})\`width:100%;\`;
283-
import { default as s, css } from \'styled-components/no-tags\';"
283+
import { default as s, css } from \'styled-components\';"
284284
`;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
exports[`test should swap out the import if styled-components v4+ is detected 1`] = `
2+
"import styled from \'styled-components/no-tags\';
3+
4+
const Named = styled(\'div\').withConfig({
5+
displayName: \'unknown__Named\',
6+
componentId: \'sc-2vipsm-0\'
7+
})([\'width:100%;\']);
8+
9+
const NamedWithInterpolation = styled(\'div\').withConfig({
10+
displayName: \'unknown__NamedWithInterpolation\',
11+
componentId: \'sc-2vipsm-1\'
12+
})([\'color:\', \';\'], color => props.color);
13+
14+
const Wrapped = styled(Inner).withConfig({
15+
displayName: \'unknown__Wrapped\',
16+
componentId: \'sc-2vipsm-2\'
17+
})([\'color:red;\']);"
18+
`;

‎test/no-tags/example.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styled from 'styled-components'
2+
3+
const Named = styled.div`
4+
width: 100%;
5+
`
6+
7+
const NamedWithInterpolation = styled.div`
8+
color: ${color => props.color};
9+
`
10+
11+
const Wrapped = styled(Inner)`
12+
color: red;
13+
`

‎test/no-tags/index.test.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { transform } from 'babel-core'
2+
import * as fs from 'fs'
3+
4+
jest.mock('styled-components/package.json', () => ({ version: '4.0.0' }))
5+
6+
it('should swap out the import if styled-components v4+ is detected', () => {
7+
const fixture = transform(
8+
fs.readFileSync(__dirname + '/example.js', 'utf8'),
9+
{ plugins: ['./src'] }
10+
).code
11+
expect(fixture).toMatchSnapshot()
12+
})

0 commit comments

Comments
 (0)