Skip to content

Commit

Permalink
Relax requirement for label extraction - containing functions dont ha…
Browse files Browse the repository at this point in the history 
…ve to be PascalCased anymore
  • Loading branch information
@Andarist
Andarist committed Mar 16, 2020
1 parent 75e2f9e commit 9bddf18
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 64 deletions.
5 changes: 5 additions & 0 deletions .changeset/neat-geese-knock.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@emotion/babel-plugin': minor
---

Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.
75 changes: 51 additions & 24 deletions packages/babel-plugin/__tests__/__snapshots__/css.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"zjik7\\",
styles: \\"display:flex\\"
} : {
name: \\"zjik7\\",
styles: \\"display:flex\\",
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
Expand Down Expand Up @@ -82,8 +82,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
Expand Down Expand Up @@ -194,7 +194,7 @@ function thing() {}
function doThing() {
return (
/*#__PURE__*/
css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\")
);
}"
`;
Expand Down Expand Up @@ -305,14 +305,36 @@ class SomeComponent extends Component {
}"
`;
exports[`emotion-babel-plugin css inside-non-pascal-case-arrow-function 1`] = `
exports[`emotion-babel-plugin css label-1 1`] = `
"import { css } from '@emotion/react'
let something = () => {
css\`
color: hotpink;
\`
}
const thing = 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/react';
const thing = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
exports[`emotion-babel-plugin css label-arrow-function-expression 1`] = `
"import { css } from '@emotion/react'
const thing = () => css\`
color: hotpink;
\`
↓ ↓ ↓ ↓ ↓ ↓
Expand All @@ -325,38 +347,43 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
let something = () => {
_ref;
};"
const thing = () => _ref;"
`;
exports[`emotion-babel-plugin css label-1 1`] = `
exports[`emotion-babel-plugin css label-function-expression 1`] = `
"import { css } from '@emotion/react'
const thing = css\`
color: hotpink;
\`
const thing = function() {
return 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/react';
const thing = process.env.NODE_ENV === \\"production\\" ? {
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const thing = function () {
return _ref;
};"
`;
Expand Down Expand Up @@ -685,7 +712,7 @@ function media(...args) {
/*#__PURE__*/
css(\\"@media (min-width:100px){\\",
/*#__PURE__*/
css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
);
}
Expand Down
5 changes: 5 additions & 0 deletions packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { css } from '@emotion/react/macro'

const thing = () => css`
color: hotpink;
`
4 changes: 2 additions & 2 deletions .../inside-non-pascal-case-arrow-function.js → ...__fixtures__/label-function-expression.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@emotion/react/macro'

let something = () => {
css`
const thing = function() {
return css`
color: hotpink;
`
}
75 changes: 51 additions & 24 deletions packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"zjik7\\",
styles: \\"display:flex\\"
} : {
name: \\"zjik7\\",
styles: \\"display:flex\\",
name: \\"8v5aok-doThing\\",
styles: \\"display:flex;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
Expand Down Expand Up @@ -82,8 +82,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
name: \\"aarqni-doThing\\",
styles: \\"color:hotpink;label:doThing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
Expand Down Expand Up @@ -194,7 +194,7 @@ function thing() {}
function doThing() {
return (
/*#__PURE__*/
css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\")
);
}"
`;
Expand Down Expand Up @@ -305,14 +305,36 @@ class SomeComponent extends Component {
}"
`;
exports[`@emotion/react - css macro inside-non-pascal-case-arrow-function 1`] = `
exports[`@emotion/react - css macro label-1 1`] = `
"import { css } from '@emotion/react/macro'
let something = () => {
css\`
color: hotpink;
\`
}
const thing = 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/react\\";
const thing = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
exports[`@emotion/react - css macro label-arrow-function-expression 1`] = `
"import { css } from '@emotion/react/macro'
const thing = () => css\`
color: hotpink;
\`
↓ ↓ ↓ ↓ ↓ ↓
Expand All @@ -325,38 +347,43 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
let something = () => {
_ref;
};"
const thing = () => _ref;"
`;
exports[`@emotion/react - css macro label-1 1`] = `
exports[`@emotion/react - css macro label-function-expression 1`] = `
"import { css } from '@emotion/react/macro'
const thing = css\`
color: hotpink;
\`
const thing = function() {
return 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/react\\";
const thing = process.env.NODE_ENV === \\"production\\" ? {
var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const thing = function () {
return _ref;
};"
`;
Expand Down Expand Up @@ -677,7 +704,7 @@ function media(...args) {
/*#__PURE__*/
css(\\"@media (min-width:100px){\\",
/*#__PURE__*/
css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
);
}
Expand Down
16 changes: 3 additions & 13 deletions packages/babel-plugin/src/utils/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,6 @@ export function getLabelFromPath(path: *, state: *, t: *) {
)
}

let pascalCaseRegex = /^[A-Z][A-Za-z]+/

function getDeclaratorName(path, t) {
// $FlowFixMe
const parent = path.findParent(
Expand All @@ -80,27 +78,19 @@ function getDeclaratorName(path, t) {

// we probably have an inline css prop usage
if (parent.isFunctionDeclaration()) {
let { name } = parent.node.id
if (pascalCaseRegex.test(name)) {
return name
}
return ''
return parent.node.id.name || ''
}

// we could also have an object property
if (parent.isObjectProperty() && !parent.node.computed) {
return parent.node.key.name
}

let variableDeclarator = path.findParent(p => p.isVariableDeclarator())
let variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
if (!variableDeclarator) {
return ''
}
let { name } = variableDeclarator.node.id
if (pascalCaseRegex.test(name)) {
return name
}
return ''
return variableDeclarator.node.id.name
}

function getIdentifierName(path: *, t: *) {
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin/src/utils/transform-expression-with-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export let transformExpressionWithStyles = ({
return node
}

if (label) {
if (canAppendStrings && label) {
const labelString = `;label:${label};`

switch (autoLabel) {
Expand Down

0 comments on commit 9bddf18

Please sign in to comment.