Problems with require([styles])

I’m building spectacle presentation with Brunch. There are problem here. Brunch can’t handle requireing of styles properly, so I get an error:

The cause of problem is that spectacle/lib/components/component-playground.js require styles, Brunch doesn’t require.registers them as modules, so error occurs. Here’s where we have problems:

import "../themes/default/playground.css";
import "../themes/default/codemirror.css";

// ...

  if (useDarkTheme) {
    require("../themes/default/dark.codemirror.css");
  } else {
    require("../themes/default/light.codemirror.css");
  }

These problems present with spectacle@^2, in case with ^1 everything works fine because of Radium.

Could you, please, consider replacement of these require by simple <style> tags in HTML or with some kind of css-in-js library (Radium in your case)? Keep in mind that this problem weren’t present prior to ^2, so people that use Spectacle with other build systems can’t upgrade to new fancy version because of that.

Also, I understand, particularly this is problem with Brunch itself since it doesn’t consider css files as modules. We, at Brunch team, are considering it. Here are related issues: brunch/brunch#1684 and brunch/brunch#1473.

Besides, thanks for amazing presentation framework! Really awesome job!

[kitten]

@ryan-roemer those other CSS imports are gone in the new react-live based version 😉

Edited to add some proof: https://github.com/FormidableLabs/spectacle/blob/master/src/components/component-playground.js#L1-L4

[denysdovhan]

Seems like legit. Thanks for the great support!