Add option for label formatting

[sgal]

What:
New option for babel-plugin-emotion that allows to configure label format in generated class names. Implements #563

Why:
Details are in #563, but in general when debugging it is nice to have the file name in the class names (especially, for composed styles). The potential of the format is quite big. The feature and solution itself are inspired by localIdentName option in webpack's css-loader.

How:
New function that handles label generation for all cases (autoLabel, labelFormat, nothing).

Checklist:

• Documentation
• Tests
• Code complete

[codecov]

Codecov Report

Merging #566 into master will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
packages/babel-plugin-emotion/src/babel-utils.js	96.92% <100%> (+0.25%)	⬆️
packages/babel-plugin-emotion/src/index.js	96.92% <100%> (+0.03%)	⬆️

[tkh44]

Thank you for your contribution! I took a quick look and it looks fine, but I'd like to have @mitchellhamilton look at it as well.

[sgal]

@tkh44 Thanks for the feedback! I'm currently thinking about how to handle cases when label format does not include [local] cause it might result in colliding class names.

One way would be to print warning and append [local] value automatically.
Another way is to throw an error with explanation that [local] is mandatory. But something in this one rubs me the wrong way.

What do you think?

[emmatown]

@sgal Collisions won't matter since there will be a hash as well and if the hash is the same then the style will be the same.

[emmatown]

Thanks!!

[emmatown]

Should "but allows to" be "but allows you to"?

[sgal]

@mitchellhamilton Ah, thanks for clarifying the hashing. I fixed the phrasing in the docs.

[emmatown]

I've been thinking about this more and maybe the labelFormat option should default to [local] and only insert labels when the autoLabel option is true. So rather than having two options that enable labels where one of them also lets you configure the labels, just one to enable labels and one to configure the labels.

[sgal]

@mitchellhamilton That does sound reasonable and I think it is easier to understand as well. I'll update the PR tonight.

[matpaul]

@sgal, Hi! maybe also add path/folder or getLocalIdent function? In our project we use component/index.js, so filename - doesn't help here

[sgal]

@matpaul Which arguments do you think getLocalIdent function should take?

[matpaul]

@sgal
full path to file (from project root) and local for example ?