accept CSS string in registerPreviewStyle

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} />;

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;

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(...);
 ```
+
+## Pass raw CSS string to `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 })
+```
+