From abafc1c5f14a5956e814bd7bf41259144e54d601 Mon Sep 17 00:00:00 2001
From: Dan Freeman <dfreeman@salsify.com>
Date: Mon, 11 Jul 2016 23:13:10 -0400
Subject: [PATCH] Document global composition. Closes #20.

---
 README.md                                        | 16 ++++++++++++++++
 tests/acceptance/styles-lookup-test.js           |  2 ++
 .../styles.css                                   |  7 +++++++
 .../template.hbs                                 |  1 +
 4 files changed, 26 insertions(+)
 create mode 100644 tests/dummy/app/components/component-with-global-class-composition/styles.css
 create mode 100644 tests/dummy/app/components/component-with-global-class-composition/template.hbs

diff --git a/README.md b/README.md
index 7ff7a983..97522e5b 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,22 @@ In the template for `my-component`, an element with `local-class="component-titl
 
 Note that you may also use relative paths to specify the source modules for composition.
 
+Finally, you can compose local classes from global un-namespaced ones that are provided e.g. by a CSS framework by specifying `global` as the source of the class:
+
+```css
+/* vendor/some-lib.css */
+.super-important {
+  color: orange;
+}
+```
+
+```css
+/* app/components/my-component/styles.css */
+.special-button {
+  composes: super-important from global;
+}
+```
+
 ### Programmatic Styles Access
 
 Currently the `local-class` attribute is honored on HTML elements and component invocations with static values, e.g. `<div local-class="foo bar">` and `{{input local-class="baz"}}`. It is not (yet) supported with dynamic class values or subexpressions like the `(component)` helper.
diff --git a/tests/acceptance/styles-lookup-test.js b/tests/acceptance/styles-lookup-test.js
index 73fa7c6a..8eb1f850 100644
--- a/tests/acceptance/styles-lookup-test.js
+++ b/tests/acceptance/styles-lookup-test.js
@@ -13,6 +13,8 @@ var componentRoutes = [
   'addon-component',
   'pod-route/nested-pod-component',
   'pod-route/nested-pod-template-only-component',
+  'component-with-explicit-styles-reference',
+  'component-with-global-class-composition',
   'component-with-container-class'
 ].map(name => [name, `/render-component/${name}`]);
 
diff --git a/tests/dummy/app/components/component-with-global-class-composition/styles.css b/tests/dummy/app/components/component-with-global-class-composition/styles.css
new file mode 100644
index 00000000..e4b9ae6f
--- /dev/null
+++ b/tests/dummy/app/components/component-with-global-class-composition/styles.css
@@ -0,0 +1,7 @@
+:global(.global-component-class) {
+  font-family: 'component-with-global-class-composition';
+}
+
+.component-class {
+  composes: global-component-class from global;
+}
diff --git a/tests/dummy/app/components/component-with-global-class-composition/template.hbs b/tests/dummy/app/components/component-with-global-class-composition/template.hbs
new file mode 100644
index 00000000..e5041928
--- /dev/null
+++ b/tests/dummy/app/components/component-with-global-class-composition/template.hbs
@@ -0,0 +1 @@
+<div local-class="component-class" data-test-element>component with global class composition</div>