Pure comments specific for styled typed only

- Move the function to separate file.
- Check for isStyled and isHelper to only annotate them and not to mess
up with normal calls
- Add new two fixtures to test the new function

Author: Osama Jandali

src/index.js

@@ -1,11 +1,10 @@
-import annotateAsPure from "@babel/helper-annotate-as-pure"
-
+import uglifyPure from './visitors/uglifyPure'
 import minify from './visitors/minify'
 import displayNameAndId from './visitors/displayNameAndId'
 import templateLiterals from './visitors/templateLiterals'
 import assignStyledRequired from './visitors/assignStyledRequired'
 import { noParserImportDeclaration, noParserRequireCallExpression } from './visitors/noParserImport'
-import { useUglifyPure } from './utils/options'
+
 
 export default function({ types: t }) {
   return {
@@ -14,11 +13,7 @@ export default function({ types: t }) {
         noParserImportDeclaration(path, state)
       },
       CallExpression(path, state) {
-        if(useUglifyPure(state)){
-          if(path.parent.type == 'VariableDeclarator' || path.parent.type == 'TaggedTemplateExpression'){
-            annotateAsPure(path.node)
-          }
-        }
+        uglifyPure(path, state)
         noParserRequireCallExpression(path, state)
       },
       TaggedTemplateExpression(path, state) {

src/utils/options.js

@@ -8,4 +8,4 @@ export const useFileName = (state) =>getOption(state, 'fileName')
 export const useMinify = (state) => getOption(state, 'minify')
 export const useCSSPreprocessor = (state) => getOption(state, 'preprocess', false) // EXPERIMENTAL
 export const useTranspileTemplateLiterals = (state) => getOption(state, 'transpileTemplateLiterals')
-export const useUglifyPure = (state) => getOption(state, 'uglifyPure', false)
+export const useUglifyPure = (state) => getOption(state, 'uglifyPure')

src/visitors/uglifyPure.js

@@ -0,0 +1,19 @@
+import annotateAsPure from "@babel/helper-annotate-as-pure"
+
+import { useUglifyPure } from '../utils/options'
+import { isStyled, isHelper } from '../utils/detectors'
+
+export default (path, state) => {
+    if(useUglifyPure(state)){
+        if(isStyled(path.node,state) || 
+          isStyled(path.node.callee,state) || 
+          isHelper(path.node.callee,state) 
+        ){
+            if(path.parent.type == 'VariableDeclarator' || 
+              path.parent.type == 'TaggedTemplateExpression'
+            ){
+                annotateAsPure(path)
+            }
+        }
+    }
+}

test/__snapshots__/index.test.js.snap

@@ -79,6 +79,34 @@ const WithAttrsWrapped = styled(Inner).attrs({ some: \'value\' }).withConfig({
 })\`\`;"
 `;
 
+exports[`fixtures should annotate keyframes with uglify pure comments 1`] = `"const Animation = /*#__PURE__*/keyframes([[\"@-webkit-keyframes \"], [\"{0%{opacity:0;}100%{opacity:1;}}@keyframes \"], [\"{0%{opacity:0;}100%{opacity:1;}}\"]]);"`;
+
+exports[`fixtures should annotate styled calls with uglify pure comments 1`] = `
+"const Test = /*#__PURE__*/styled.div.withConfig({
+  displayName: \'Test\'
+})\`width:100%;\`;
+const Test2 = /*#__PURE__*/styled(\'div\').withConfig({
+  displayName: \'Test2\'
+})\`\`;
+const Test3 = true ? /*#__PURE__*/styled.div.withConfig({
+  displayName: \'Test3\'
+})\`\` : /*#__PURE__*/styled.div.withConfig({
+  displayName: \'Test3\'
+})\`\`;
+const styles = { One: /*#__PURE__*/styled.div.withConfig({
+    displayName: \'One\'
+  })\`\` };
+let Component;
+Component = /*#__PURE__*/styled.div.withConfig({
+  displayName: \'Component\'
+})\`\`;
+const WrappedComponent = /*#__PURE__*/styled(Inner).withConfig({
+  displayName: \'WrappedComponent\'
+})\`\`;
+const notStyled = /*#__PURE__*/styled.div(\'\'); // not transpiled by styled components but should add pure comment
+const normalFunc = add(5, 3);"
+`;
+
 exports[`fixtures should minify css in helpers 1`] = `
 "import { css, keyframes } from \'styled-components\';
 

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

@@ -4,7 +4,8 @@
       "ssr": false,
       "fileName": false,
       "transpileTemplateLiterals": false,
-      "preprocess": false
+      "preprocess": false,
+      "uglifyPure":false
     }]
   ]
 }

test/fixtures/02-add-identifier/.babelrc

@@ -4,7 +4,8 @@
       "displayName": false,
       "fileName": false,
       "transpileTemplateLiterals": false,
-      "ssr": true
+      "ssr": true,
+      "uglifyPure":false
     }]
   ]
 }

test/fixtures/03-add-identifier-and-display-name/.babelrc

@@ -3,7 +3,8 @@
     ["../../../src", {
       "fileName": false,
       "transpileTemplateLiterals": false,
-      "ssr": true
+      "ssr": true,
+      "uglifyPure":false
     }]
   ]
 }

test/fixtures/04-track-the-imported-variable/.babelrc

@@ -3,7 +3,8 @@
     ["../../../src", {
       "fileName": false,
       "transpileTemplateLiterals": false,
-      "ssr": true
+      "ssr": true,
+      "uglifyPure":false
     }]
   ]
 }

test/fixtures/05-use-file-name/.babelrc

@@ -2,7 +2,8 @@
   "plugins": [
     ["../../../src", {
       "transpileTemplateLiterals": false,
-      "ssr": true
+      "ssr": true,
+      "uglifyPure":false
     }]
   ]
 }

test/fixtures/06-work-with-hoisted-default-as-import/.babelrc

@@ -2,7 +2,8 @@
   "plugins": [
     ["../../../src", {
       "transpileTemplateLiterals": false,
-      "ssr": true
+      "ssr": true,
+      "uglifyPure":false
     }]
   ]
 }