Problems with require([styles])

[denysdovhan]

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]

@denysdovhan another solution would be to use our prebundled UMD build. So instead of just importing spectacle directly, you could try to alias it to spectacle/dist/spectacle.js

The bundle in there is prebuilt using Webpack, so it doesn't actually call require to mount the CSS sheet.

[ryan-roemer]

@denysdovhan -- Can brunch just "include" them manually via a config? I'm pretty sure webpack can do that...

@philpl -- Is the order of those CSS files coming in significant?

[kitten]

@ryan-roemer it shouldn't no. Those files only add classes that we switch to for prism themes. In fact, we could also just inject them globally.

or we could alternatively add them using emotion:

const darkTheme = css`
  /* prism theme */
`

const lightTheme = css`
  /* prism theme */
`

const PlaygroundEditor = styled(Editor)`
  ${p => p.useDarkTheme && darkTheme}
  ${p => !p.useDarkTheme && lightTheme}
`

[ryan-roemer]

@philpl -- The emotion-based solution does seem a little cleaner to me. (We're still in for the import problem of the two CSS files at the top though, so not a solution to the issue here -- does perhaps make it easier to external import in / resolve them maybe if brunch works like webpack alias/externals do). Please ticket out if you like the idea!

[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!