accept CSS string in registerPreviewStyle

decaporg · Mar 7, 2018 · fa23226 · fa23226
1 parent 1808809
commit fa23226
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git 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} 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
@@ -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/customization.md b/website/site/content/docs/customization.md
@@ -17,39 +17,42 @@ NetlifyCMS is a collection of React components and exposes two constructs global
 
 ## `registerPreviewStyle`
 
-Register a custom stylesheet to use on the preview pane.
+Register a custom stylesheet to use on the preview pane. Each call to this registry method will result in a separate `link` or `style` tag in the preview pane.
 
 ```js
-CMS.registerPreviewStyle(file);
+CMS.registerPreviewStyle(file, opts);
 ```
 
 **Params:**
 
 * **file:** css file path
+* **opts:** (optional)
+  * **raw:** (boolean) if truthy, `file` is expected to be a CSS string
 
-**Example:**
+**Example (basic):**
 
 ```html
 // index.html
 <script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script>
 <script>
   CMS.registerPreviewStyle("/example.css");
+  CMS.registerPreviewStyle("body{background:black;}", { raw: true });
 </script>
 ```
 
-```css
-/* example.css */
+**Example (webpack):**
 
-html,
-body {
-  color: #444;
-  font-size: 14px;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-body {
-  padding: 20px;
-}
+```js
+/**
+ * cms.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 })
 ```
 
 ## `registerPreviewTemplate`