From a31d48ef493dec6bb9fa04dd0ae726de4c933004 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart 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) => ); + .map((style, i) => { + if (style.raw) { + return + } + return ; + }); if (!collection) { return ; 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 }) +``` +