Relax requirement for label extraction - containing functions dont have to be PascalCased anymore

[Andarist]

It IMHO makes sense to relax this, otherwise styles from functions calling css dont receive labels.

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 9bddf18

We got this.

This PR includes changesets to release 8 packages

Name	Type
@emotion/babel-plugin	Major
@emotion/server	Major
@emotion/react	Major
@emotion/jest	Major
@emotion/primitives-core	Major
@emotion/styled	Major
@emotion/native	Major
@emotion/primitives	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9bddf18:

Sandbox	Source
Emotion	Configuration

[codecov]

Codecov Report

Merging #1805 into next will decrease coverage by <.01%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
...ugin/src/utils/transform-expression-with-styles.js	95.83% <100%> (ø)	⬆️
packages/babel-plugin/src/utils/label.js	97.82% <100%> (-0.29%)	⬇️

[emmatown]

Not sure this is good - labels are largely intended to be a way to find which component corresponds to which class name and this means if you have a helper function, it would show up all over the place and therefore make labels less helpful

[Andarist]

This only gives a label based on a function if there is no intermediate declaration, etc, in the ancestors' chain. Right now this gets a label:

const foo = css`color: green;`

but this doesnt

const foo = () => css`color: green;`

This is surprising for some (had a couple of questions regarding this on Slack and here on GitHub).

I don't see much difference between a "partial" styles (exhibit one) and a helper function creating such (exhibit two). Could you maybe prepare a case where you think this would become problematic?

[emmatown]

Okay sure. Could you check that that any valid variable name is also valid in a class name or otherwise, remove the bad characters or something? Other than that, LGTM

[Andarist]

@mitchellhamilton all "locals" are being sanitized when actually generating labels:

emotion/packages/babel-plugin-emotion/src/utils/label.js

Line 16 in a267a9a

if (!labelFormat) return sanitizeLabelPart(identifierName)

, so it's already covered