Merge pull request #117 from osamajandali/add-uglify-pure

Add Uglify Pure Comments

Author: mxstbr

package.json

@@ -34,6 +34,7 @@
     "displayName"
   ],
   "dependencies": {
+    "@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
     "babel-types": "^6.26.0",
     "stylis": "^3.0.0"
   },

src/index.js

@@ -1,16 +1,19 @@
+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'
 
+
 export default function({ types: t }) {
   return {
     visitor: {
       ImportDeclaration(path, state) {
         noParserImportDeclaration(path, state)
       },
       CallExpression(path, state) {
+        uglifyPure(path, state)
         noParserRequireCallExpression(path, state)
       },
       TaggedTemplateExpression(path, state) {

src/utils/options.js

@@ -8,3 +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')

src/visitors/templateLiterals/index.js

@@ -1,6 +1,7 @@
 import {
   useCSSPreprocessor,
-  useTranspileTemplateLiterals
+  useTranspileTemplateLiterals,
+  useUglifyPure
 } from '../../utils/options'
 
 import preprocess from './preprocess'

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,72 @@ const WithAttrsWrapped = styled(Inner).attrs({ some: \'value\' }).withConfig({
 })\`\`;"
 `;
 
+exports[`fixtures should annotate css with uglify pure comments 1`] = `
+"const Simple = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__Simple\"
+})([[\"{width:100%;}\"]]);
+
+const Nested = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__Nested\"
+})([[\"{width:100%;}\"], [\":hover{color:papayawhip;}\"], [\" > div{background:white;}\"]]);
+
+const Interpolations = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__Interpolations\"
+})([[\"{width:\", props => props.width, \";}\"]]);
+
+const NestedAndInterpolations = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__NestedAndInterpolations\"
+})([[\"{width:\", props => props.width, \";}\"], [\":hover{color:\", props => props.color, \";}\"]]);
+
+const SelectorInterpolation = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__SelectorInterpolation\"
+})([[\"{width:\", props => props.width, \";}\"], [\" \", props => props.selector, \"{color:papayawhip;}\"]]);
+
+const RulesetInterpolationA = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__RulesetInterpolationA\"
+})([[\"{width:\", props => props.width, \";\", props => props.ruleset, \";}\"], [\":hover{color:papayawhip;}\"]]);
+
+const RulesetInterpolationB = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__RulesetInterpolationB\"
+})([[\"{\", props => props.ruleset, \";width:\", props => props.width, \";}\"], [\":hover{color:papayawhip;}\"]]);
+
+const Prefixes = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__Prefixes\"
+})([[\"{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\"]]);
+
+const DoubleInterpolation = /*#__PURE__*/styled.div.withConfig({
+  displayName: \"before__DoubleInterpolation\"
+})([[\"{margin:\", props => props.vert, \" \", props => props.hori, \";}\"]]);"
+`;
+
+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
     }]
   ]
 }