decaporg / decaporg/decap-cms

Styling broken in the preview pane

Open
#1,599 3 comments 0 reactions 0 assignees View on GitHub
kind: bug pinned
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**- Do you want to request a *feature* or report a *bug*?**

bug

**- What is the current behavior?**

In-repo widget preview components, styled via Emotion, are unstyled in the preview pane.

**- If the current behavior is a bug, please provide the steps to reproduce.**

It's kind of hard to tell because the default preview components have barely any styling anyway. Just look at the preview component elements, notice how they have classes but no styling from those classes: https://cms-demo.netlify.com/#/collections/kitchenSink/entries/a-big-entry-with-all-the-things

**- What is the expected behavior?**

Should be styled.

**- Explanation**

The styles for these components are in the document head, unreachable through the iframe. We used to inject a stylesheet to the iframe, but we don't really have that option anymore. We'll likely need to use [create-emotion](https://emotion.sh/docs/create-emotion) to provide a second instance of emotion for the iframe, but I'm not sure of a clean way to make that instance available.

The ideal solution seems to be coming with Emotion 10, currently at `emotion@next`: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.