Optimize Babel output a little bit (#1656)

* Optimize Babel output a little bit * Fix label regression in dev nodes * Add `autoLabel` validation * Update more snapshots * Fix flow error * Rename auto to dev-only as autoLabel value * appendExpressionToArguments -> appendStringReturningExpressionToArguments * Add simple tests for new autoLabel values * Merge appendStringToArguments logic into appendStringReturningExpressionToArguments * Adjust docs about new autoLabel values * Add changeset

Author: Andarist

.changeset/polite-impalas-doubt.md

@@ -0,0 +1,12 @@
+---
+'babel-plugin-emotion': major
+'@emotion/babel-preset-css-prop': major
+---
+
+`autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+Each possible value for this option produces different output code:
+
+- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+- with `always` we always add labels when possible,
+- with `never` we disable this entirely and no labels are added.

packages/babel-plugin-emotion/README.md

@@ -132,7 +132,7 @@ _Defaults Shown_
  {
  // sourceMap is on by default but source maps are dead code eliminated in production
  "sourceMap": true,
- "autoLabel": process.env.NODE_ENV !== 'production',
+ "autoLabel": "dev-only",
  "labelFormat": "[local]",
  "cssPropOptimization": true
  }
@@ -183,7 +183,7 @@ This option enables the following:
 
 ### `autoLabel`
 
-`boolean`, defaults to `process.env.NODE_ENV !== 'production'`.
+`'dev-only' | 'always' | 'never'`, , defaults to `dev-only`.
 
 This option enables the following:
 
@@ -194,6 +194,12 @@ This option enables the following:
  (Eg. `iconStyles$1` will become `iconStyles1`) because `$` is not valid
  [CSS ClassName Selector](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#449000)
 
+Each possible value for this option produces different output code:
+
+- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+- with `always` we always add labels when possible,
+- with `never` we disable this entirely and no labels are added.
+
 #### css
 
 **In**
@@ -214,7 +220,7 @@ const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')
 
 `string`, defaults to `"[local]"`.
 
-This option only works when `autoLabel` is set to `true`. It allows you to
+This option only works when `autoLabel` is set to `'dev-only'` or `'always'`. It allows you to
 define the format of the resulting `label`. The format is defined via string where
 variable parts are enclosed in square brackets `[]`.
 For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced
@@ -235,7 +241,7 @@ be prepended automatically.
 
 ```javascript
 // BrownView.js
-// autoLabel: true
+// autoLabel: 'dev-only'
 // labelFormat: '[filename]--[local]'
 const brownStyles = css({ color: 'brown' })
 ```

packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap

@@ -1,5 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`babel css inline autoLabel set to always - complex expression 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+ 
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls =
+/*#__PURE__*/
+css(fooStyles, \\";label:cls\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzKVxuICAgICJdfQ== */\\"));"
+`;
+
+exports[`babel css inline autoLabel set to always - complex expression, last arg string 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles, 'color: hotpink;')
+ 
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls =
+/*#__PURE__*/
+css(fooStyles, \\"color: hotpink;;label:cls\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzLCAnY29sb3I6IGhvdHBpbms7JylcbiAgICAiXX0= */\\"));"
+`;
+
+exports[`babel css inline autoLabel set to always 1`] = `
+"
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+ 
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from 'emotion';
+let cls =
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"6kh100-cls\\",
+ styles: \\"color:hotpink;label:cls;\\"
+} : {
+ name: \\"6kh100-cls\\",
+ styles: \\"color:hotpink;label:cls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline autoLabel set to never - complex expression 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+ 
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls =
+/*#__PURE__*/
+css(fooStyles, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzKVxuICAgICJdfQ== */\\");"
+`;
+
+exports[`babel css inline autoLabel set to never 1`] = `
+"
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+ 
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from 'emotion';
+let cls =
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`babel css inline code already transpiled by emotion plugin (avoid double transpilation) 1`] = `
 "
  import { keyframes as _keyframes } from \\"emotion\\";
@@ -80,11 +176,11 @@ import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1rm02zb-CLS_CSS-REQUIRES-OPTIONS\\",
- styles: \\"color:hotpink;;label:CLS_CSS-REQUIRES-OPTIONS;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
 } : {
- name: \\"1rm02zb-CLS_CSS-REQUIRES-OPTIONS\\",
- styles: \\"color:hotpink;;label:CLS_CSS-REQUIRES-OPTIONS;\\",
+ name: \\"wiafqk-CLS_CSS-REQUIRES-OPTIONS\\",
+ styles: \\"color:hotpink;label:CLS_CSS-REQUIRES-OPTIONS;\\",
  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -104,11 +200,11 @@ import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
 } : {
- name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\",
+ name: \\"1azqn5t-my-css-__tests__-css-requires-options-cls\\",
+ styles: \\"color:hotpink;label:my-css-__tests__-css-requires-options-cls;\\",
  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -128,11 +224,11 @@ import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"jnyc7-my-css-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
 } : {
- name: \\"jnyc7-my-css-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\",
+ name: \\"12j84ju-my-css-css-requires-options-cls\\",
+ styles: \\"color:hotpink;label:my-css-css-requires-options-cls;\\",
  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -152,11 +248,11 @@ import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"v8qj0c-my-css-some-directory-cls\\",
- styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
 } : {
- name: \\"v8qj0c-my-css-some-directory-cls\\",
- styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\",
+ name: \\"1uf5d32-my-css-some-directory-cls\\",
+ styles: \\"color:hotpink;label:my-css-some-directory-cls;\\",
  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -176,11 +272,11 @@ import { css } from 'emotion';
 let cls =
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"ryhvpw-my-css-cls\\",
- styles: \\"color:hotpink;;label:my-css-cls;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
 } : {
- name: \\"ryhvpw-my-css-cls\\",
- styles: \\"color:hotpink;;label:my-css-cls;\\",
+ name: \\"1xiywpm-my-css-cls\\",
+ styles: \\"color:hotpink;label:my-css-cls;\\",
  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -210,5 +306,5 @@ import { css } from '@emotion/core';
 var templateObject_1;
 const someVar =
 /*#__PURE__*/
-css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"])));"
+css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\")])));"
 `;