Emotion: Styles are getting injected in the classname

[pimmey]

• emotion version: 8.0.12
• react version: 16.2.0

Relevant code.

const InvisibleRadio = styled.input`
  display: none;

  & + label::before {
    position: absolute;
  }
`

What you did:
Tried to style a radio button.

What happened:
The style gets injected into the class name. Worked well with 8.0.2 or something. It outputs kinda like this:

<input type="radio" name="mood" id="okay" class="css-ww20ts-:before,-:before,-:before," value="on">

Reproduction:
CodeSandbox reproduction

Problem description:
After updating to the latest version that selectors combination doesn't seem to work anymore.

[mitchellhamilton]

It looks like this is caused by the label regex.

I think we can fix this by only supporting semicolons instead of semicolons and newlines to end label property declarations, especially since we're going to require semicolons in css declarations going forward anyway. The label property is generally inserted by babel-plugin-emotion anyway so it shouldn't cause any problems.

If you could submit a PR to change the regex on this line to this and add tests that would be great!

https://github.com/emotion-js/emotion/blob/47ec91192b0b5aef8094f19ed0ee14fa6bf4d993/packages/emotion/src/index.js#L150

/label:\s*([^\s;\n]+)\s*;/g

[pimmey]

I think that new pattern doesn't cut it either.

The output of styles is the following:

  console.log packages/emotion/src/index.js:313
    styles & + label::after{color:pink;background:orange;content:'';}

  console.log packages/emotion/src/index.js:313
    styles after replace & + background:orange;content:'';}

And the snapshot therefore looks like this:

exports[`input and label selectors input + label styled 1`] = `
<div>
  <input
    className="css-1vn7mrm-:after{color:pink css-1h8gnp00"
  />
  <label>
    Label
  </label>
</div>
`;

Things kinda get better after adding a closing curly bracket as such /label:\s*([^\s;\n]+)\s*;}/g, but only for this test. The auto-label.test.js begins to fail, with label being a css property. Didn't really get that and couldn't find anything about label css property in documentation.

[mitchellhamilton]

Could you try this? I added an opening brace to the negated character set. Sorry about the lack of documentation around the label property, basically it adds a readable name to the class name, it's generally not manually written but instead added with the autoLabel option in babel-plugin-emotion.

/label:\s*([^\s;\n{]+)\s*;/g