Sass/Less support

[ebryn]

It should be possible to use with CSS preprocessors like Sass/Less

[JackCA]

😀 I'd love to help but am not sure where to start... Do preprocessors self-identify or would there need to be one-offs for each one?

[ebryn]

I think we would start by identifying additional file suffixes that we need to care about and then perhaps generate files with @imports rather than concatenating ourselves.

[runspired]

Just make sure stylus is supported ;)

[chriseppstein]

@ebryn if you support legal css, then you support every compiler's output.

[JackCA]

yeah we'll run into an issue with the & in at least sass won't we?

Would somehow using css comments as a placeholder for class name injection work better?

[chriseppstein]

comments are a bad api.

I would suggest just adhering to the css spec. E.g.

component {
  ...
}

would work just fine because it's a legal selector.

If you need to control behavior, you can invent your own at rules... those will survive the compiler.

[JackCA]

Ah, that seems like a great solution

[indirect]

I really want to use this, but I really don't want to go back to regular CSS :P 👍 from me

[Globegitter]

I tried to monkey-patch sass support in by just using node-sass to compile scss files to css see https://github.com/Globegitter/ember-component-css/blob/master/index.js#L58, but when I serve my app I get the following error:

ENOENT: no such file or directory, scandir 'client/tmp/caching-writer-dest-dir_xPIU0A.tmp/app/'
Error: ENOENT: no such file or directory, scandir 'client/tmp/caching-writer-dest-dir_xPIU0A.tmp/app/'
    at Error (native)
    at Object.fs.readdirSync (fs.js:805:18)
    at walkSync (client/node_modules/ember-component-css/node_modules/walk-sync/index.js:14:20)
    at Funnel.processFilters (client/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:140:15)
    at Funnel.handleReadTree (client/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:129:10)
    at lib$rsvp$$internal$$tryCatch (client/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/rsvp/dist/rsvp.js:489:16)
    at lib$rsvp$$internal$$invokeCallback (client/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/rsvp/dist/rsvp.js:501:17)
    at lib$rsvp$$internal$$publish (client/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/rsvp/dist/rsvp.js:472:11)
    at lib$rsvp$asap$$flush (client/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/rsvp/dist/rsvp.js:1290:9)
    at process._tickCallback (node.js:349:13)

This was just meant to be getting a quick and dirty solution, since I was looking for a solution like this for quite some time, but no idea what this error means.

[buschtoens]

Really looking forward for using this in combination with Sass. Doesn't the new addon system allow for a simple integration of pre- / post-processors?

[ebryn]

Implementation strategy outlined here, if anyone wants to give it a go: #10 (comment)

[trentmwillis]

Opened a PR with one potential approach to solving this. Thoughts and opinions welcome!

[ebryn]

Closed via #20 for Sass. Opening #21 for less.