Compiling with Babel plugin for SASS, LESS and prefixing

[RickWong]

One major annoyance is the lack of automatic vendor prefixing of certain CSS attributes. It doesn't really make sense to add them at run-time. It would be beneficial to the performance to pre-compile the written CSS much like JSX. At that point it might be a small step to include a SASS/LESS hook so it's possible to make the inline CSS stylesheets shorter and more composed.

[moret]

Hello @RickWong . I read this issue and tried an experiment of running the building steps via webpack loaders. Something like this:

component.js

import React from 'react';
import InlineCss from 'react-inline-css';
let css = require('!raw!sass!./component.scss');

class Component extends React.Component {
  render() { return <InlineCss stylesheet={css}>Mao! Mao! Mao!</InlineCss>; }
};

export default Transmit.createContainer(Component);

component.css

& {
  color: red;
}

But the sass-loader complains about the use of & right in the file. I think that if on react-inline-css.js, instead of replacing only the & we could use some other keyword like base or mao :smile: instead of supporting this in React Inline Css anyone could just do building by themselves.

[RickWong]

Thanks @moret I merged your PR. It's now possible to require SASS and LESS stylesheets to use with the <InlineCss> component.

However it would still be cool to write SASS and JSX in the same file. That's the main purpose of this project: to style components inline.

I would love to hear your take on how to accomplish that.

[moret]

Great to see it merged, I'll start using it immediately!

Yeah, I can't find yet a better trade-off. On the plus side, having a fully valid external stylesheet file plays nice with most basic syntax highliting. 8)

I was checking on Radium as well to see how they are going with both inline styles and Javascript declaration. They have another set of trade-offs with the Javascript declaration - not easily pre-compiling is one of them.

Within React Inline CSS other approaches could be tried. Perhaps moving the processing to a dedicated loader would allow both pre-processing the component JS file itself - like React Inline does - and allow style bundling to those who like it.

I'll keep thinking about it. 8)