Skip to content

Commit

Permalink
accept CSS string in registerPreviewStyle
Browse files Browse the repository at this point in the history
  • Loading branch information
erquhart committed Mar 7, 2018
1 parent 1808809 commit dff401e
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 3 deletions.
7 changes: 6 additions & 1 deletion src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
Expand Down
7 changes: 5 additions & 2 deletions src/lib/registry.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 15 additions & 0 deletions website/site/content/docs/beta-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
```

0 comments on commit dff401e

Please sign in to comment.