Add support for Sass/SCSS and CJSX

[ezekg]

In addition to https://github.com/electronjs/electron-compile/pull/55, this pull request adds support for Sass and SCSS compilation via node-sass; used like:

-// Include via link tag
link(rel="stylesheet" type="text/sass" href="index.sass")

-// Or inline styles
style(type="text/scss").
  div {
    display: none;

    a {
      display: block;
    }
  }

style(type="text/sass").
  div
    display: none

    section
      prop: val

As well as support for inline CJSX via coffee-react-transform; used like:

Car = React.createClass
  render: ->
    <Vehicle doors={4} locked={isLocked()} data-colour="red" on>
      <Parts.FrontSeat />
      <Parts.BackSeat />
      <p className="seat">Which seat can I take? {@props?.seat or 'none'}</p>
      {# also, this is a comment }
    </Vehicle>

Also via inline script tag:

script(type="text/cjsx").
  render: -> <div {... this.props}>hello</div>

Let me know if you'd like me to break these up. I've tested them locally via npm link and they seem to work perfectly. Thanks!

[ezekg]

I just noticed that I committed the version bump. Sorry, I used that while testing. Let me know if that's a problem and I'll take it out.

[anaisbetts]

@ezekg This was pulled from electron-compile explicitly because node-sass doesn't work with Electron because of their use of node-pre-gyp, and it also break npm install on Linux completely :( Have you got this running in Electron successfully?

[ezekg]

Gotcha. I'm running it successfully on my machine (Yosemite). I can both include Sass files as well as use it inline. Could that issue be resolved now? I'm using Node 5.4 and npm 3.4.2.

[anaisbetts]

@ezekg I'll give it another try - I'm not opposed to it if it works now but it caused us a lot of problems in the past

[ezekg]

Yeah, looking back at previous issues, I completely understand. If it is still broken for other platforms, then perhaps adding an interface to define custom compiler packages – I think this is a good move regardless, so that the community can create whatever kind of compilers they want – but I know that's a lot of work. Not sure what your vision is for this whole thing. Let me know what I can do to move it along.

[anaisbetts]

@ezekg Being able to add custom compilers is :gem: but we have to figure out how to handle this mime-types bizness. Shouldn't be so bad though. I wish node-sass would just fix it so it'd Just Work, that's the best scenario by far

[ezekg]

What's the issue with mime-types? Isn't that declared per-compiler? I'm assuming that it could be as easy as modifying the filenames constant to be an object containing key->value pairs of the compiler name and its install path (rather than assuming it is relative to the current directory). Of course, it wouldn't be a constant any longer, but then you could allow anybody to append new compilers to the object. In the end, it could have an easy API with something like:

{ compilers } = require("electron-compilers/compilers");
compilers["text/haml"] = require("path/to/haml/compiler");

Or it could even be defined within the .compilerc file, using npm package names.

[anaisbetts]

What's the issue with mime-types? Isn't that declared per-compiler?

It is, but code everywhere relies on the mime-types npm package to look up types and map to extensions, and some of these files don't have MIME types in mime-db. It's not a super-hard problem to solve, we just have to Do It

[anaisbetts]

As I suspected, node-sass is still broken:

require('electron-compilers/node_modules/node-sass')
C:\Users\paulb\code\paulcbetts\electron-compilers\node_modules\node-sass\lib\extensions.js:158 Uncaught Error: The `libsass` binding was not found in C:\Users\paulb\code\paulcbetts\electron-compilers\node_modules\node-sass\vendor\win32-x64-47\binding.node(…)

I think we have to close this for now, but I'll push up my fixed up version of this branch and if we can unbreak node-sass, I'll include this

[anaisbetts]

https://github.com/electronjs/electron-compilers/tree/node-sass-support is the fixed up version of this branch

[ezekg]

@paulcbetts okay, thanks for creating a separate branch. Hopefully we can get this issue with Sass resolved eventually. Can we at least merge in the CJSX additions from this pull request into master? I'm developing an app using React+Coffee and my fork has been working flawlessly so far (it's just a simple transform). I can create a new pull request for just CJSX, if you'd like. I should have split these 2 up in the first place, so my bad on that one.

[anaisbetts]

@ezekg Yeah no problem, just copy-paste the relevant bits from the node-sass-support branch (I added tests and improved things a bit)