Using Aphrodite in react-storybook renders empty styles declaration

[lifeiscontent]

For some reason the style that Aphrodite generates doesn't get populated for me when using react-storybook.

Also, I tried adding a :before selector and that doesn't seem to be working in react-storybook either.

Any guidance here would be greatly appreciated, thanks!

[majapw]

I am also seeing this empty <style> tag in both a storybook and a non-storybook environment.

The styles are still getting applied, but inspecting in Chrome, FF, and even downloading the page as an HTML file does not give me what must be the real contents of the style tag.

I imagine this has something to do with the Aphrodite 2.0 upgrade.

[majapw]

Okay so taking a deeper dive into this issue, this appears to be due to https://github.com/Khan/aphrodite/blob/master/src/inject.js#L46-L58.

Basically, in modern browsers that support it, Aphrodite is using insertRule on the CSSStyleSheet object attached to the style tag. insertRule notably does not affect the DOM (which is probably part of the reason why it's more performance) but rather attaches CSS rules as metadata to the style tag.

@lifeiscontent if you look at the console, and do document.querySelector('[data-aphrodite]').cssRules.rules, you should be able to take a look at all the style definitions that are being inserted into the page.

[kevinbarabash]

@lifeiscontent can you post a link to an example of this?

[lifeiscontent]

@kevinbarabash issue is too old, I don't even remember which project I was working in. 🗡