Skip to content

Commit

Permalink
Add labels for function declarations (#1240)
Browse files Browse the repository at this point in the history 
* Add labels for function declarations

* Change behaviour

* Add more tests
  • Loading branch information
@emmatown
emmatown authored Feb 25, 2019
1 parent 0a81cb9 commit 7ecf3ae
Show file tree
Hide file tree
Showing 8 changed files with 293 additions and 20 deletions.
13 changes: 13 additions & 0 deletions packages/babel-plugin-emotion/__tests__/__fixtures__/function-declaration.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// @flow
import * as React from 'react'
import { jsx } from '@emotion/core'

function Logo(props) {
return (
<a
css={{
display: 'block'
}}
/>
)
}
102 changes: 93 additions & 9 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ function doThing() {
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"k008qs\\",
styles: \\"display:flex;\\"
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\"
} : {
name: \\"k008qs\\",
styles: \\"display:flex;\\",
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\"
};
Expand All @@ -74,11 +74,11 @@ function doThing() {
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\"
};
Expand Down Expand Up @@ -182,11 +182,67 @@ function thing() {}
function doThing() {
return (
/*#__PURE__*/
_css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
_css(\\"display:\\", thing(), \\";label:doThing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
);
}"
`;
exports[`@emotion/babel-plugin-core css inside-anonymous-arrow-function 1`] = `
"import css from '@emotion/css'
export default () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\"
};
export default (() => {
_ref;
});"
`;
exports[`@emotion/babel-plugin-core css inside-anonymous-function 1`] = `
"import css from '@emotion/css'
export default () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\"
};
export default (() => {
_ref;
});"
`;
exports[`@emotion/babel-plugin-core css inside-class 1`] = `
"/** @jsx jsx */
import { Component } from 'react'
Expand Down Expand Up @@ -231,6 +287,34 @@ class SomeComponent extends Component {
}"
`;
exports[`@emotion/babel-plugin-core css inside-non-pascal-case-arrow-function 1`] = `
"import css from '@emotion/css'
let something = () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\"
};
let something = () => {
_ref;
};"
`;
exports[`@emotion/babel-plugin-core css label-1 1`] = `
"import css from '@emotion/css'
Expand Down
36 changes: 36 additions & 0 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,42 @@ const Svg = <rect style={{
}} />;"
`;
exports[`@emotion/babel-plugin-core function-declaration 1`] = `
"// @flow
import * as React from 'react'
import { jsx } from '@emotion/core'
function Logo(props) {
return (
<a
css={{
display: 'block'
}}
/>
)
}
↓ ↓ ↓ ↓ ↓ ↓
// @flow
import * as React from 'react';
import { jsx } from '@emotion/core';
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"jgxhdf-Logo\\",
styles: \\"display:block;label:Logo;\\"
} : {
name: \\"jgxhdf-Logo\\",
styles: \\"display:block;label:Logo;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9NIiwiZmlsZSI6ImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gTG9nbyhwcm9wcykge1xuICByZXR1cm4gKFxuICAgIDxhXG4gICAgICBjc3M9e3tcbiAgICAgICAgZGlzcGxheTogJ2Jsb2NrJ1xuICAgICAgfX1cbiAgICAvPlxuICApXG59XG4iXX0= */\\"
};
function Logo(props) {
return <a css={_ref} />;
}"
`;
exports[`@emotion/babel-plugin-core import-namespace-does-not-throw 1`] = `
"import * as emotionCore from '@emotion/core'
// could probably support this for real but it's pretty rare so I'm not gonna spend time on it now
Expand Down
7 changes: 7 additions & 0 deletions .../babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-anonymous-arrow-function.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import css from '@emotion/css/macro'

export default () => {
css`
color: hotpink;
`
}
7 changes: 7 additions & 0 deletions packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import css from '@emotion/css/macro'

export default () => {
css`
color: hotpink;
`
}
7 changes: 7 additions & 0 deletions ...-plugin-emotion/__tests__/css-macro/__fixtures__/inside-non-pascal-case-arrow-function.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import css from '@emotion/css/macro'

let something = () => {
css`
color: hotpink;
`
}
102 changes: 93 additions & 9 deletions packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ function doThing() {
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"k008qs\\",
styles: \\"display:flex;\\"
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\"
} : {
name: \\"k008qs\\",
styles: \\"display:flex;\\",
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\"
};
Expand All @@ -74,11 +74,11 @@ function doThing() {
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\"
};
Expand Down Expand Up @@ -182,11 +182,67 @@ function thing() {}
function doThing() {
return (
/*#__PURE__*/
_css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
_css(\\"display:\\", thing(), \\";label:doThing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
);
}"
`;
exports[`@emotion/css/macro inside-anonymous-arrow-function 1`] = `
"import css from '@emotion/css/macro'
export default () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\"
};
export default (() => {
_ref;
});"
`;
exports[`@emotion/css/macro inside-anonymous-function 1`] = `
"import css from '@emotion/css/macro'
export default () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\"
};
export default (() => {
_ref;
});"
`;
exports[`@emotion/css/macro inside-class 1`] = `
"/** @jsx jsx */
import { Component } from 'react'
Expand Down Expand Up @@ -231,6 +287,34 @@ class SomeComponent extends Component {
}"
`;
exports[`@emotion/css/macro inside-non-pascal-case-arrow-function 1`] = `
"import css from '@emotion/css/macro'
let something = () => {
css\`
color: hotpink;
\`
}
↓ ↓ ↓ ↓ ↓ ↓
import _css from \\"@emotion/css\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\"
} : {
name: \\"1lrxbo5\\",
styles: \\"color:hotpink;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\"
};
let something = () => {
_ref;
};"
`;
exports[`@emotion/css/macro label-1 1`] = `
"import css from '@emotion/css/macro'
Expand Down
Loading

0 comments on commit 7ecf3ae

Please sign in to comment.