emotion-js · tkh44 · Nov 26, 2017 · Nov 24, 2017 · Nov 24, 2017 · Nov 24, 2017
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ emotion is a high performance, lightweight css-in-js library that supports both
 ### Quick Start
 Get up and running with a single import.
 ```bash
-npm install --save emotion 
+npm install --save emotion
 ```
 
 ```javascript
@@ -69,7 +69,7 @@ const app = () => (
 
 ### About
 
-The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/glam) library and its philosophy is laid out [here](https://gist.github.com/threepointone/0ef30b196682a69327c407124f33d69a). 
+The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/glam) library and its philosophy is laid out [here](https://gist.github.com/threepointone/0ef30b196682a69327c407124f33d69a).
 
 -- [Introduction Article](https://medium.com/@tkh44/emotion-ad1c45c6d28b)
 
@@ -81,7 +81,7 @@ The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/g
 - Create composable styles with [`css` classes and props](docs/css.md)
 
   - [`composition`](docs/composition.md)
-  
+
 - [Object styles](docs/object-styles.md)
 
 - Combine styles and class names with [`cx`](docs/cx.md)
@@ -95,7 +95,7 @@ The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/g
 - [Version 7 docs](https://github.com/emotion-js/emotion/tree/v7.3.2)
 
 ### Ecosystem
-  
+
   - [facepaint](https://github.com/emotion-js/facepaint)
   - [emotion-vue](https://github.com/egoist/emotion-vue)
   - [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)

diff --git a/docs/babel.md b/docs/babel.md
@@ -34,3 +34,6 @@ import { css, keyframes, fontFace, injectGlobal, flush, hydrate } from 'emotion/
 ```
 
 [create-react-app issue discussing macros](https://github.com/facebookincubator/create-react-app/issues/2730).
+
+### Components as selectors
+The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [react-emotion docs](./styled.md#targeting-another-emotion-component).
diff --git a/docs/nested.md b/docs/nested.md
@@ -42,4 +42,4 @@ const paragraph = css`
 `
 ```
 
-The result of `css` is a class name _without_ the dot (`.`), so we prepended it. 
+The result of `css` is a class name _without_ the dot (`.`), so we prepended it.
diff --git a/docs/styled.md b/docs/styled.md
@@ -14,7 +14,7 @@ const H1 = styled('h1')`
 
 function Greeting ({ name }) {
   // blue, 48px, and scaled 2x text
-  return <H1 scale={2}>Hello {name}</H1> 
+  return <H1 scale={2}>Hello {name}</H1>
 }
 
 // Component
@@ -42,6 +42,28 @@ const Sidebar = Content.withComponent('aside')
 
 ```
 
+### Targeting another emotion component
+
+Similar to the implementation in [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for a previously-defined emotion component to be targeted like a regular CSS selector when using the [babel plugin](./babel.md):
+
+```jsx
+const Child = styled.div`
+  color: red;
+`;
+
+const Parent = styled.div`
+  ${Child} {
+    color: green;
+  }
+`;
+```
+
+This will generate a class selector something like:
+
+```css
+.css-{ParentDynamicHash} .css-{ChildStableHash}-{ChildComponentPositionInFile} { color: green; }
+```
+
 ### pass refs down using innerRef
 
 ```jsx

diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.3.0",
     "eslint-plugin-standard": "^3.0.1",
+    "find-root": "^1.1.0",
     "hoist-non-react-statics": "^2.3.1",
     "jest": "^21.2.1",
     "jest-cli": "^20.0.4",
@@ -167,7 +168,7 @@
     },
     {
       "path": "./packages/react-emotion/dist/emotion.umd.min.js",
-      "threshold": "8.9 Kb"
+      "threshold": "8.95 Kb"
     }
   ]
 }
diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md
@@ -12,12 +12,13 @@ The Babel Plugin is highly recommended, but not required in version 8 and above.
 | `css(...)`               |    ✅   |                       | Generally used for object styles.                                                                                                            |
 | styled('div')`` syntax |    ✅   |                       | Both string and object styles work without this plugin.                                                                                      |
 | styled.div`` syntax    |        |           ✅           | Supporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle.                |
+| components as selectors    |        |           ✅           | Allows an emotion component to be [used as a CSS selector](https://github.com/emotion-js/emotion/blob/master/docs/styled.md#targeting-another-emotion-component).                |
 | Minification             |        |           ✅           | Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.   |
 | Dead Code Elimination    |        |           ✅           | Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination. |
 | Static Extraction        |        |           ✅           | Generated CSS that is eligible for extraction can be moved to an external css file.                                                          |
 | Source Maps              |        |           ✅           | When enabled, navigate directly to the style declaration in your javascript file.                                                            |
 | `css` as Prop            |        |           ✅           | Convenient helper for calling `css` and appending the generated className during compile time.                                               |
-| Contextual Class Names   |        |           ✅           | Generated class names include the name of the variable or component they were defined in. 
+| Contextual Class Names   |        |           ✅           | Generated class names include the name of the variable or component they were defined in.
 ## Example
 
 **In**
@@ -74,7 +75,7 @@ With options:
 ```json
 {
   "plugins": [
-    ["emotion", { 
+    ["emotion", {
       "hoist": false,
       "sourceMap": false,
       "autoLabel": false,
@@ -92,7 +93,7 @@ With options:
 }
 ```
 
-Recommended Setup 
+Recommended Setup
 
 Use [Babel's `env` property](https://babeljs.io/docs/usage/babelrc/#env-option)
 
@@ -132,11 +133,11 @@ require("@babel/core").transform("code", {
 
 This option enables the following:
 
- - Any argument supplied to `css` or `styled` is hoisted. 
+ - Any argument supplied to `css` or `styled` is hoisted.
 
-By hoisting the argument, or assigning the value to a variable, 
+By hoisting the argument, or assigning the value to a variable,
 emotion is able to leverage the use of a [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)
-[cache](https://github.com/emotion-js/emotion/blob/6257f0c9cb00db9cbd08a9d6995f335730808329/packages/emotion/src/index.js#L85-L116) to increase performance. Users of object styles will benefit the most from enabling this option.  
+[cache](https://github.com/emotion-js/emotion/blob/6257f0c9cb00db9cbd08a9d6995f335730808329/packages/emotion/src/index.js#L85-L116) to increase performance. Users of object styles will benefit the most from enabling this option.
 
 **In**
 
@@ -168,7 +169,7 @@ This option enables the following:
 
 This option enables the following:
 
- - Automatically adds the `label` property to styles so that class names generated by `css` or `styled` include the name of the variable the result is assigned to.  
+ - Automatically adds the `label` property to styles so that class names generated by `css` or `styled` include the name of the variable the result is assigned to.
 
 #### css
 
@@ -235,7 +236,7 @@ This option enables the following:
 
 [**Documentation**](docs/extract-static.md)
 
-### `importedNames` 
+### `importedNames`
 
 
 `object`, defaults to
@@ -254,6 +255,6 @@ This option enables the following:
 This option enables the following:
 
  - Configurable import names
- 
+
 [**Documentation**](docs/configurable-imports.md)
 
diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json
@@ -19,6 +19,7 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "convert-source-map": "^1.5.0",
     "emotion-utils": "^8.0.11",
+    "find-root": "^1.1.0",
     "source-map": "^0.5.7",
     "touch": "^1.0.0"
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,4 +42,4 @@ const paragraph = css` @@
     `
     ```
-    The result of `css` is a class name _without_ the dot (`.`), so we prepended it.
+    The result of `css` is a class name _without_ the dot (`.`), so we prepended it.