annotate injectGlobal

- annotate injectGlobal
- tests now include all cases (css, keyframes, injectGlobal)

Author: Osama Jandali

src/visitors/uglifyPure.js

@@ -1,16 +1,18 @@
 import annotateAsPure from "@babel/helper-annotate-as-pure"
 
 import { useUglifyPure } from '../utils/options'
-import { isStyled, isHelper } from '../utils/detectors'
+import { isStyled, isHelper, isInjectGlobalHelper } 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) 
+          isHelper(path.node.callee,state) ||
+          isInjectGlobalHelper(path.node.callee,state) 
         ){
             if(path.parent.type == 'VariableDeclarator' || 
-              path.parent.type == 'TaggedTemplateExpression'
+              path.parent.type == 'TaggedTemplateExpression' ||
+              path.parent.type =='ExpressionStatement'
             ){
                 annotateAsPure(path)
             }

test/__snapshots__/index.test.js.snap

@@ -79,6 +79,46 @@ 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 inject global with uglify pure comments 1`] = `"/*#__PURE__*/injectGlobal([[\"\", glob, \"\\n/*! preserve comment */html,body{margin:100000px;padding:\", test, \";}@media (max-width:999px){html,body{margin:0;}}.root{width:100%;}\"]]);"`;
+
 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`] = `

test/fixtures/22-annotate-css-with-uglify-pure-comments/.babelrc

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["../../../src", {
+      "preprocess": true,
+      "ssr": false,
+      "uglifyPure":true
+    }]
+  ]
+}

test/fixtures/22-annotate-css-with-uglify-pure-comments/before.js

@@ -0,0 +1,61 @@
+const Simple = styled.div`width: 100%;`;
+
+const Nested = styled.div`
+  width: 100%;
+
+  &:hover {
+    color: papayawhip;
+  }
+
+  > div {
+    background: white;
+  }
+`;
+
+const Interpolations = styled.div`
+  width: ${props => props.width};
+`;
+
+const NestedAndInterpolations = styled.div`
+  width: ${props => props.width};
+
+  &:hover {
+    color: ${props => props.color};
+  }
+`;
+
+const SelectorInterpolation = styled.div`
+  width: ${props => props.width};
+
+  ${props => props.selector} {
+    color: papayawhip;
+  }
+`;
+
+const RulesetInterpolationA = styled.div`
+  width: ${props => props.width};
+  ${props => props.ruleset}
+
+  &:hover {
+    color: papayawhip;
+  }
+`;
+
+const RulesetInterpolationB = styled.div`
+  ${props => props.ruleset}
+  width: ${props => props.width};
+
+  &:hover {
+    color: papayawhip;
+  }
+`;
+
+
+const Prefixes = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const DoubleInterpolation = styled.div`
+  margin: ${props => props.vert} ${props => props.hori};
+`;

test/fixtures/23-annotate-inject-global-with-uglify-pure-comments/.babelrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["../../../src", {
+      "preprocess": true,
+      "ssr": true
+    }]
+  ]
+}

test/fixtures/23-annotate-inject-global-with-uglify-pure-comments/before.js

@@ -0,0 +1,20 @@
+injectGlobal`
+  ${glob}
+
+  // comment
+  /* comment */
+  /*! preserve comment */
+
+  html, body {
+    margin: 100000px;
+    padding: ${test};
+
+    @media (max-width: 999px) {
+      margin: 0;
+    }
+  }
+
+  .root {
+    width: 100%;
+  }
+`;