Fix codemirror shim load order, auto import required styles 🎆

README.md

@@ -17,20 +17,6 @@ This addon requires Node >= v4.3
 ember install ember-component-playground
 ```
 
-Styles and fonts are not included by default for maximum configurability. They are exported at `ember-component-playground/_styles.scss`. If you're using [ember-cli-sass](https://github.com/aexmachina/ember-cli-sass): you can import them:
-
-`@import 'ember-component-playground/styles'`;
-
-Source Sans Pro is the default font and can be imported:
-
-```
-<!-- In your index.html -->
-<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
-
-// In your SASS
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
-```
-
 ***
 
 ## Usage
@@ -47,10 +33,10 @@ This will create an empty code editor with a render preview. You can supply star
 {{component-playground code="<h4>This is a totally radical component in my project:</h4> {{radical-component}}"}}
 ```
 
-This will create a code editor with your code pre-populated with a preview in the render preview.
+This will create a code editor with your code pre-populated and a rendered template in the render preview.
 
 **Configuring the Editor**
-The editor is a Ember DDAU version of [codemirror](https://codemirror.net/) created by [Ivy](https://github.com/IvyApp/ivy-codemirror). The editor is configured to use handlebars syntax with the very beautiful [Panda Theme](https://github.com/PandaTheme) created by [Siamek Mokhtari](https://github.com/siamak) by default. Changing these defaults requires two steps, importing assets during the build and passing configurations to an editor instance.
+The editor is a Ember DDAU version of the [CodeMirror](https://codemirror.net/) editor. The editor is configured to use handlebars syntax with the very beautiful [Panda Theme](https://github.com/PandaTheme) created by [Siamek Mokhtari](https://github.com/siamak) by default. Changing these defaults requires two steps, importing assets during the build and passing configurations to an editor instance.
 
 Import the assets during the build by specifying which modes and themes you'd like to import in you `ember-cli-build` file:
 
@@ -74,7 +60,7 @@ Then pass props `mode` and `theme` to an instance of the playground:
 
 ## How it Works
 
-This addon provides a `{{component-playground}}` component. An instance of the [Ivy CodeMirror](https://github.com/IvyApp/ivy-codemirror) component drives the text editor inside the component. The component will attempt to compile any text entered and if successful it will render the output using a `{{partial}}`.
+This addon provides a `{{component-playground}}` component. An instance of the [CodeMirror](https://codemirror.net/) editor component drives the text editor inside the playground. The component will attempt to compile any text entered and if successful it will render the output using a `{{partial}}`.
 
 ***
 
@@ -101,9 +87,10 @@ Contributions are welcome! Project development is documented below:
 - [x] Make `htmlhandlebars` the default mode
 - [x] Make codemirror theme configurable
 - [x] Document Node >= 4.3 requirements
-- [] Document adding `Source Sans Pro` for fonts
 - [] Ability to set default themes. Maybe by exporting your own component-playground instance pulled from the addon namespace
 - [] Better how it works documentation for a high level overview
 - [] Include picture in README of actual usage
 - [x] Include `htmlhandlebars`
 - [] Create block form instance with yielded partial name for extra context magics
+- [x] Import css in treeForVendor b/c it's just structural
+- [x] This addon MUST run before the cli-shim for configs to work

app/styles/ember-component-playground/_styles.scss

@@ -2,6 +2,15 @@
 // Ember Component Playground Styles
 // ========================================================
 
+// ========================================================
+// NOTE: Because these styles are structural for the
+// component playground, we are including a built css
+// version of them in the /vendor directory so they are
+// automagically pulled into consuming apps. If you change
+// this file you must build and update the vendor css
+// file as well
+// ========================================================
+
 .ember-component-playground {
   width: 100%;
   display: flex;

index.js

@@ -59,5 +59,7 @@ module.exports = {
     app.import('bower_components/ember/ember-template-compiler.js');
     // Required for ember template highlighting
     app.import(`${vendor}/htmlhandlebars.js`);
+    // Structural styles for the playground
+    app.import(`${vendor}/ember-component-playground/styles.css`);
   }
 };

package.json

@@ -53,6 +53,7 @@
     "ember-cli-htmlbars-inline-precompile": "^0.3.1"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "configPath": "tests/dummy/config",
+    "before": "ember-cli-codemirror-shim"
   }
 }

vendor/ember-component-playground/styles.css

@@ -0,0 +1,41 @@
+/* CSS Styles Generated By Build */
+/* See /app/styles/ember-component-playground/_styles.scss for full sheet */
+.ember-component-playground {
+  width: 100%;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  min-height: 330px;
+  font-size: 14px; }
+.ember-component-playground .playground-code,
+.ember-component-playground .playground-preview {
+  width: 50%;
+  border: 1px solid #e1e1e8; }
+.ember-component-playground .playground-preview {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-right: none; }
+.ember-component-playground .preview-wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column; }
+.ember-component-playground .partial-wrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+.ember-component-playground .compiler-error {
+  width: 100%;
+  background-color: #fcf8e3;
+  align-self: flex-end; }
+.ember-component-playground .compiler-error .error-message {
+  padding: 0 10px;
+  margin: 0;
+  font-size: 0.8rem; }
+.ember-component-playground .playground-code .code-mirror {
+  width: 100%;
+  height: 100%; }
+.ember-component-playground .playground-code .CodeMirror {
+  height: 100%; }
+.ember-component-playground .playground-code .code-input {
+  display: none; }