Skip to content

Commit 2c3e468

Browse files
quantizorquantizor
authored
Merge pull request #163 from styled-components/add-uglifypure-back
reintroduce "pure" tagging
2 parents 73ba584 + 681660d commit 2c3e468

File tree

17 files changed

+299
-160
lines changed

17 files changed

+299
-160
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
"devDependencies": {
1818
"@babel/cli": "^7.0.0",
1919
"@babel/core": "^7.0.0",
20+
"@babel/plugin-proposal-class-properties": "^7.0.0",
2021
"@babel/preset-env": "^7.0.0",
2122
"babel-core": "7.0.0-bridge.0",
22-
"babel-plugin-transform-class-properties": "^6.24.1",
23-
"jest": "^23.5.0",
23+
"jest": "^23.6.0",
2424
"prettier": "^1.14.2",
2525
"rimraf": "^2.6.2",
26-
"styled-components": "^3.4.5"
26+
"styled-components": "^3.4.6"
2727
},
2828
"dependencies": {
2929
"lodash": "^4.17.10"

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import pureAnnotation from './visitors/pure'
12
import minify from './visitors/minify'
23
import displayNameAndId from './visitors/displayNameAndId'
34
import templateLiterals from './visitors/templateLiterals'
@@ -10,6 +11,7 @@ export default function({ types: t }) {
1011
minify(t)(path, state)
1112
displayNameAndId(t)(path, state)
1213
templateLiterals(t)(path, state)
14+
pureAnnotation(t)(path, state)
1315
},
1416
VariableDeclarator(path, state) {
1517
assignStyledRequired(t)(path, state)

‎src/utils/detectors.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ const VALID_TOP_LEVEL_IMPORT_PATHS = [
88
export const isValidTopLevelImport = x =>
99
VALID_TOP_LEVEL_IMPORT_PATHS.includes(x)
1010

11-
12-
const localNameCache = {};
11+
const localNameCache = {}
1312

1413
const importLocalName = (name, state) => {
15-
const cacheKey = name + state.file.opts.filename;
14+
const cacheKey = name + state.file.opts.filename
1615

1716
if (localNameCache[cacheKey]) {
1817
return localNameCache[cacheKey]
@@ -100,3 +99,8 @@ export const isKeyframesHelper = t => (tag, state) =>
10099

101100
export const isHelper = t => (tag, state) =>
102101
isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state)
102+
103+
export const isPureHelper = t => (tag, state) =>
104+
isCSSHelper(t)(tag, state) ||
105+
isKeyframesHelper(t)(tag, state) ||
106+
isCreateGlobalStyleHelper(t)(tag, state)

‎src/utils/options.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,4 @@ export const useMinify = state => getOption(state, 'minify')
1111
export const useTranspileTemplateLiterals = state =>
1212
getOption(state, 'transpileTemplateLiterals')
1313

14-
/**
15-
* When using the babel plugin, we desugar styled.div to styled('div'), which means we can
16-
* then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
17-
* ahead of time.
18-
*/
19-
export const useNoTags = () =>
20-
parseInt(
21-
require('styled-components/package.json').version.split('.')[0],
22-
10
23-
) >= 4
14+
export const usePureAnnotation = state => getOption(state, 'pure', false)

‎src/visitors/pure.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import annotateAsPure from '@babel/helper-annotate-as-pure'
2+
3+
import { usePureAnnotation } from '../utils/options'
4+
import { isStyled, isPureHelper } from '../utils/detectors'
5+
6+
export default t => (path, state) => {
7+
if (usePureAnnotation(state)) {
8+
if (
9+
isStyled(path.node, state) ||
10+
isStyled(path.node.callee, state) ||
11+
isPureHelper(path.node.callee, state)
12+
) {
13+
if (
14+
path.parent.type == 'VariableDeclarator' ||
15+
path.parent.type == 'TaggedTemplateExpression'
16+
) {
17+
annotateAsPure(path)
18+
}
19+
}
20+
}
21+
}

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,78 @@ const WithAttrsWrapped = styled(Inner).attrs({
9797
})\`\`;"
9898
`;
9999
100+
exports[`fixtures should annotate create global style with pure comments 1`] = `
101+
"const GlobalStyle =
102+
/*#__PURE__*/
103+
createGlobalStyle\`
104+
body {
105+
color: red;
106+
}
107+
\`;"
108+
`;
109+
110+
exports[`fixtures should annotate css with pure comments 1`] = `
111+
"const partial =
112+
/*#__PURE__*/
113+
css([\\"color:red;\\"]);
114+
const Component =
115+
/*#__PURE__*/
116+
styled.div.withConfig({
117+
displayName: \\"annotate-css-with-pure-comments__Component\\",
118+
componentId: \\"sc-17hq72a-0\\"
119+
})([\\"\\", \\";background:blue;\\"], partial);"
120+
`;
121+
122+
exports[`fixtures should annotate keyframes with pure comments 1`] = `
123+
"const Animation =
124+
/*#__PURE__*/
125+
keyframes([\\"0%{opacity:0;}100%{opacity:1;}\\"]);"
126+
`;
127+
128+
exports[`fixtures should annotate styled calls with pure comments 1`] = `
129+
"const Test =
130+
/*#__PURE__*/
131+
styled.div.withConfig({
132+
displayName: \\"annotate-styled-calls-with-pure-comments__Test\\",
133+
componentId: \\"sc-6tnjs3-0\\"
134+
})([\\"width:100%;\\"]);
135+
const Test2 =
136+
/*#__PURE__*/
137+
styled('div').withConfig({
138+
displayName: \\"annotate-styled-calls-with-pure-comments__Test2\\",
139+
componentId: \\"sc-6tnjs3-1\\"
140+
})([\\"\\"]);
141+
const Test3 = true ? styled.div.withConfig({
142+
displayName: \\"annotate-styled-calls-with-pure-comments__Test3\\",
143+
componentId: \\"sc-6tnjs3-2\\"
144+
})([\\"\\"]) : styled.div.withConfig({
145+
displayName: \\"annotate-styled-calls-with-pure-comments__Test3\\",
146+
componentId: \\"sc-6tnjs3-3\\"
147+
})([\\"\\"]);
148+
const styles = {
149+
One: styled.div.withConfig({
150+
displayName: \\"annotate-styled-calls-with-pure-comments__One\\",
151+
componentId: \\"sc-6tnjs3-4\\"
152+
})([\\"\\"])
153+
};
154+
let Component;
155+
Component = styled.div.withConfig({
156+
displayName: \\"annotate-styled-calls-with-pure-comments__Component\\",
157+
componentId: \\"sc-6tnjs3-5\\"
158+
})([\\"\\"]);
159+
const WrappedComponent =
160+
/*#__PURE__*/
161+
styled(Inner).withConfig({
162+
displayName: \\"annotate-styled-calls-with-pure-comments__WrappedComponent\\",
163+
componentId: \\"sc-6tnjs3-6\\"
164+
})([\\"\\"]);
165+
const notStyled =
166+
/*#__PURE__*/
167+
styled.div('')\`\`; // not transpiled by styled components but should add pure comment
168+
169+
const normalFunc = add(5, 3);"
170+
`;
171+
100172
exports[`fixtures should does not desugar styled assignment 1`] = `
101173
"const domElements = ['div'];
102174

‎test/fixtures/add-display-names/.babelrc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
"transpileTemplateLiterals": false
99
}
1010
],
11-
"transform-class-properties"
11+
["@babel/plugin-proposal-class-properties", { "loose": true }]
1212
]
13-
}
13+
}

‎test/fixtures/annotate-create-global-style-with-pure-comments/.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"plugins": [
3+
[
4+
"../../../src",
5+
{
6+
"pure": true
7+
}
8+
]
9+
]
10+
}

‎test/fixtures/annotate-create-global-style-with-pure-comments/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const GlobalStyle = createGlobalStyle`
2+
body {
3+
color: red;
4+
}
5+
`

‎test/fixtures/annotate-css-with-pure-comments/.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"plugins": [
3+
[
4+
"../../../src",
5+
{
6+
"pure": true
7+
}
8+
]
9+
]
10+
}

0 commit comments

Comments
 (0)