Repository: tkh44/emotion (js)

Issue:
Nested selectors don't work if the parent doesn't contains at least one CSS declaration
- `emotion` version: 7.0.13

I wanted to apply a style to all elements of class `foo` that are inside `bar`:

```javascript
import { css } from 'emotion';

const foo = css`
  color: blue;
`;
const bar = css`
  & .${foo} {
    color: red;
  }
`;
```

but instead this was all of the output styles:

```css
.css-bithoy{color:blue;}
```

as if I wrote this:

```js
const foo = css`
  color: blue;
`;
const bar = css`
  ${foo};
`;
```

However, if I add a declaration for `bar`:

```js
const bar = css`
  color: black;
  & .${foo} {
    color: red;
  }
`;
```

it works as expected:

```css
.css-bithoy{color:blue;}
.css-6fp6m3{color:black;}
.css-6fp6m3 .css-bithoy{color:red;}
```

Pull request description:
Fix nested selectors without parent declaration
<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**: Fix nested selectors without parent declaration
<!-- Why are these changes necessary? -->
**Why**: Closes #255 

<!-- How were these changes implemented? -->
**How**: Change the `emotionClassRegex` to only match if the class is at the start of the string.

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->


Patch:
diff --git a/src/index.js b/src/index.js
index 7e2a0ac5..d7e03540 100644
--- a/src/index.js
+++ b/src/index.js
@@ -189,9 +189,9 @@ function _css(rules) {
   return toRule(spec)
 }
 
-const emotionClassRegex = /css-([a-zA-Z0-9]+)/
+const emotionClassRegex = /^css-([a-zA-Z0-9]+)/
 
-// of shape { 'data-css-<id>': '' }
+// of shape { 'css-<id>': '' }
 export function isLikeRule(rule: EmotionRule) {
   const ruleKeys = keys(rule)
   if (ruleKeys.length !== 1) {


Test patch:
diff --git a/test/__snapshots__/css.test.js.snap b/test/__snapshots__/css.test.js.snap
index 7d7a02d9..8719530e 100644
--- a/test/__snapshots__/css.test.js.snap
+++ b/test/__snapshots__/css.test.js.snap
@@ -222,6 +222,24 @@ exports[`css nested at rules 1`] = `
 />
 `;
 
+exports[`css nested selector without parent declaration 1`] = `
+.glamor-0 {
+  color: blue;
+}
+
+.glamor-1 .glamor-0 {
+  color: red;
+}
+
+<div
+  className="glamor-1"
+>
+  <div
+    className="glamor-0"
+  />
+</div>
+`;
+
 exports[`css null rule 1`] = `
 <div
   className="css-nil"
diff --git a/test/css.test.js b/test/css.test.js
index f407dcae..0b5e0ae8 100644
--- a/test/css.test.js
+++ b/test/css.test.js
@@ -161,6 +161,24 @@ describe('css', () => {
     const tree2 = renderer.create(<div className={cls2} />).toJSON()
     expect(tree2).toMatchSnapshot()
   })
+  test('nested selector without parent declaration', () => {
+    const cls1 = css`
+      color: blue;
+    `
+    const cls2 = css`
+      & .${cls1} {
+        color: red;
+      }
+    `
+    const tree = renderer
+      .create(
+        <div className={cls2}>
+          <div className={cls1} />
+        </div>
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
   test('null rule', () => {
     const cls1 = css()