minifying keyframes

.changeset/breezy-months-leave.md

@@ -0,0 +1,6 @@
+---
+'@emotion/core': major
+'babel-plugin-emotion': patch
+---
+
+What: Keyframes are now minified in production build, which were not earlier.Why: Production build should always contain minified code so that resultant bundle size is minimum.How: -> Changes in the minify function of minify-utils.js file of babel-plugin-emotion.-> Addition of one new file i.e. macro.js file in @emotion/core.Note - Now, users need to import keyframe from @emotion/core/macro by using the following import, "import {keyframes} from '@emotion/core/macro' ".

.changeset/hot-taxis-destroy.md

@@ -0,0 +1,10 @@
+---
+'@emotion/core': major
+'babel-plugin-emotion': patch
+---
+
+What: Keyframes are now minified in production build, which were not earlier.
+Why: Production build should always contain minified code so that resultant bundle size is minimum.
+How: -> Changes in the minify function of minify-utils.js file of babel-plugin-emotion.
+-> Addition of one new file i.e. macro.js file in @emotion/core.
+Note - Now, users need to import keyframe from @emotion/core/macro by using the following import, "import {keyframes} from '@emotion/core/macro' ".

packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap

@@ -340,6 +340,57 @@ class Thing {
 }"
 `;
 
+exports[`@emotion/babel-plugin-core styled many-spaces 1`] = `
+"import styled from '@emotion/styled'
+
+function cssStyleGetter(input) {
+  input = input / 4
+  return input
+}
+
+const PageBox = styled.div\`
+  height: calc(
+    100% -
+      \${p => {
+        const absoluteValue = cssStyleGetter(100)
+        return 2 * absoluteValue + 4
+      }}
+  );
+  width: calc(
+    100% -
+      \${p => {
+        const absoluteValue = cssStyleGetter(80)
+        return 2 * absoluteValue + 8
+      }}
+  );
+\`
+
+export default PageBox
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled-base\\";
+
+function cssStyleGetter(input) {
+  input = input / 4;
+  return input;
+}
+
+const PageBox = _styled(\\"div\\", {
+  target: \\"e115ny3s0\\",
+  label: \\"PageBox\\"
+})(\\"height:calc( 100% - \\", p => {
+  const absoluteValue = cssStyleGetter(100);
+  return 2 * absoluteValue + 4;
+}, \\" );width:calc( 100% - \\", p => {
+  const absoluteValue = cssStyleGetter(80);
+  return 2 * absoluteValue + 8;
+}, \\" );\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1hbnktc3BhY2VzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8wQiIsImZpbGUiOiJtYW55LXNwYWNlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5mdW5jdGlvbiBjc3NTdHlsZUdldHRlcihpbnB1dCkge1xuICBpbnB1dCA9IGlucHV0IC8gNFxuICByZXR1cm4gaW5wdXRcbn1cblxuY29uc3QgUGFnZUJveCA9IHN0eWxlZC5kaXZgXG4gIGhlaWdodDogY2FsYyhcbiAgICAxMDAlIC1cbiAgICAgICR7cCA9PiB7XG4gICAgICAgIGNvbnN0IGFic29sdXRlVmFsdWUgPSBjc3NTdHlsZUdldHRlcigxMDApXG4gICAgICAgIHJldHVybiAyICogYWJzb2x1dGVWYWx1ZSArIDRcbiAgICAgIH19XG4gICk7XG4gIHdpZHRoOiBjYWxjKFxuICAgIDEwMCUgLVxuICAgICAgJHtwID0+IHtcbiAgICAgICAgY29uc3QgYWJzb2x1dGVWYWx1ZSA9IGNzc1N0eWxlR2V0dGVyKDgwKVxuICAgICAgICByZXR1cm4gMiAqIGFic29sdXRlVmFsdWUgKyA4XG4gICAgICB9fVxuICApO1xuYFxuXG5leHBvcnQgZGVmYXVsdCBQYWdlQm94XG4iXX0= */\\"));
+
+export default PageBox;"
+`;
+
 exports[`@emotion/babel-plugin-core styled more-than-10-interpolations 1`] = `
 "import styled from '@emotion/styled'
 

packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap

@@ -210,11 +210,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
 const cls1 =
 /*#__PURE__*/
 _css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"hn2j47-cls1\\",
-  styles: \\"content:'  {  }  ';;label:cls1;\\"
+  name: \\"17m8lkp-cls1\\",
+  styles: \\"content:' { } ';;label:cls1;\\"
 } : {
-  name: \\"hn2j47-cls1\\",
-  styles: \\"content:'  {  }  ';;label:cls1;\\",
+  name: \\"17m8lkp-cls1\\",
+  styles: \\"content:' { } ';;label:cls1;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 }); // prettier-ignore
@@ -223,11 +223,11 @@ _css(process.env.NODE_ENV === \\"production\\" ? {
 const cls2 =
 /*#__PURE__*/
 _css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"nh732h-cls2\\",
-  styles: \\"content:\\\\\\"  {  }  \\\\\\";;label:cls2;\\"
+  name: \\"1yy69pt-cls2\\",
+  styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\"
 } : {
-  name: \\"nh732h-cls2\\",
-  styles: \\"content:\\\\\\"  {  }  \\\\\\";;label:cls2;\\",
+  name: \\"1yy69pt-cls2\\",
+  styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/basic.js

@@ -0,0 +1,6 @@
+import { keyframes } from '@emotion/core/macro'
+
+const animationStyle = keyframes`
+  from {background-color: red;}
+  to {background-color: yellow;}
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/comments.js

@@ -0,0 +1,14 @@
+import { keyframes } from '@emotion/core/macro'
+
+const animationStyle = keyframes`
+
+// display:flex;
+
+/*
+wef
+
+dfwf */
+
+  from {background-color: red;}
+  to {background-color: yellow;}
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/function-interpolation.js

@@ -0,0 +1,12 @@
+import { keyframes } from '@emotion/core/macro'
+
+let endingRotation = window.whatever
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(${endingRotation});
+  }
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/many-extra-lines.js

@@ -0,0 +1,21 @@
+import { keyframes } from '@emotion/core/macro'
+
+function cssStyleGetter(input) {
+  input = input / 4
+  return input
+}
+
+const animation = keyframes`  
+
+    0% {    box-shadow:     10      56     
+
+                                                ${cssStyleGetter(20)}     }
+
+
+
+
+
+    100%{   box-shadow:     10      10    
+
+                                                ${cssStyleGetter(40)}     }
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/many-spaces.js

@@ -0,0 +1,13 @@
+import { keyframes } from '@emotion/core/macro'
+
+function cssStyleGetter(input) {
+  input = input / 4
+  return input
+}
+
+const animation = keyframes`  
+
+    0% {    box-shadow:     10      56     ${cssStyleGetter(20)}     }
+
+    100%{   box-shadow:     10      10     ${cssStyleGetter(40)}     }
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/more-than-10-interpolation.js

@@ -0,0 +1,20 @@
+import { keyframes } from '@emotion/core/macro'
+
+const animationStyle = keyframes`
+    from {
+        border-radius: ${'3px'};
+        padding: ${'25px'};
+        width: ${'500px'};
+        z-index: ${100};
+        font-size: ${'18px'};
+        text-align: ${'center'};
+    }
+    to {
+        border-radius: ${'4px'};
+        padding: ${'30px'};
+        width: ${'550px'};
+        z-index: ${80};
+        font-size: ${'20px'};
+        text-align: ${'right'};
+    }
+  `

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/multiple-calls.js

@@ -0,0 +1,21 @@
+import { keyframes } from '@emotion/core/macro'
+
+const animationStyle = keyframes`
+  from {background-color: red;}
+  to {background-color: yellow;}
+`
+
+const animation = keyframes`
+    from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
+    }
+    40%, 43% {
+    transform: translate3d(0, -30px, 0);
+    }
+    70% {
+    transform: translate3d(0, -15px, 0);
+    }
+    90% {
+    transform: translate3d(0,-4px,0);
+    }
+`

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/no-call.js

@@ -0,0 +1,3 @@
+import { keyframes } from '@emotion/core/macro'
+
+const animationStyle = keyframes

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/no-import.js

@@ -0,0 +1 @@
+import '@emotion/core/macro'

packages/babel-plugin-emotion/__tests__/keyframes-macro/__fixtures__/other-imports.js

@@ -0,0 +1,3 @@
+import { nonExistantImport } from '@emotion/core/macro'
+
+nonExistantImport()