From a31d48ef493dec6bb9fa04dd0ae726de4c933004 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Wed, 7 Mar 2018 17:17:03 -0500
Subject: [PATCH] accept CSS string in registerPreviewStyle

---
 .../Editor/EditorPreviewPane/EditorPreviewPane.js |  7 ++++++-
 src/lib/registry.js                               |  7 +++++--
 website/site/content/docs/beta-features.md        | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js b/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
index fd7654be7e14..bd55f659e4a6 100644
--- a/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
+++ b/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
@@ -138,7 +138,12 @@ export default class PreviewPane extends React.Component {
     };
 
     const styleEls = getPreviewStyles()
-       .map((style, i) => <link key={i} href={style} type="text/css" rel="stylesheet" />);
+      .map((style, i) => {
+        if (style.raw) {
+          return <style key={i}>{style.value}</style>
+        }
+        return <link key={i} href={style.value} type="text/css" rel="stylesheet" />;
+      });
 
     if (!collection) {
       return <Frame className="nc-previewPane-frame" head={styleEls} />;
diff --git a/src/lib/registry.js b/src/lib/registry.js
index b37cf73332d4..6679636d9a1d 100644
--- a/src/lib/registry.js
+++ b/src/lib/registry.js
@@ -32,9 +32,12 @@ export default {
 
 /**
  * Preview Styles
+ *
+ * Valid options:
+ *  - raw {boolean} if `true`, `style` value is expected to be a CSS string
  */
-export function registerPreviewStyle(style) {
-  registry.previewStyles.push(style);
+export function registerPreviewStyle(style, opts) {
+  registry.previewStyles.push({ ...opts, value: style });
 };
 export function getPreviewStyles() {
   return registry.previewStyles;
diff --git a/website/site/content/docs/beta-features.md b/website/site/content/docs/beta-features.md
index 4a1c1a7de04f..4ec5624861f5 100644
--- a/website/site/content/docs/beta-features.md
+++ b/website/site/content/docs/beta-features.md
@@ -44,3 +44,18 @@ init({
 // The registry works as expected, and can be used before or after init.
 registry.registerPreviewTemplate(...);
 ```
+
+## Raw CSS in `registerPreviewStyle`
+`registerPreviewStyle` can now accept a CSS string, in addition to accepting a url. The feature is activated by passing in an object as the second argument, with `raw` set to a truthy value.This is critical for integrating with modern build tooling. Here's an example using webpack:
+
+```js
+/**
+ * Assumes a webpack project with `sass-loader` and `css-loader` installed.
+ * Takes advantage of the `toString` method in the return value of `css-loader`.
+ */
+import CMS from 'netlify-cms';
+import styles from '!css-loader!sass-loader!../main.scss'
+
+CMS.registerPreviewStyle(styles.toString(), { raw: true })
+```
+