Separate css in production build

[avanes]

Hi. Thank you for nice component.
I faced with issue with react server rendering, when runtime can't access navigator.userAgent and rendering fails. I looked into and found that it is style-loader and its isOldIE method (https://github.com/webpack/style-loader/blob/6664a954/addStyles.js#L13).
I used quick and dirty workaround — custom production build config with ExtractTextPlugin to build css into separate file.
Maybe it is good to do so in your component. Or maybe you can explain, why you choose inline css.

[marksyzm]

👍 Also agreed - webpack's styling methods are really not great for production work. I have found that I can't get around the styling without using !important so I'd suggest building it as avanes said, and allow people to control how they would like the built CSS file in webpack themselves.

i.e. I can access the style sheet separately if I were using less via:

import 'react-scrollbar/src/less/scrollbar.less';
import 'react-scrollbar/src/less/site.less';

And this way I have options. I don't think people expect CSS to be built inline like this. You could also expose a main file that uses the inline style and create another file without it i.e.

import 'react-scrollbar/src/less/scrollbar.less';
import 'react-scrollbar/src/less/site.less';
import ScrollArea from './scrollArea.jsx';
export default ScrollArea;

And the one without:

import ScrollArea from './scrollArea.jsx';
export default ScrollArea;

[marksyzm]

As my colleague pointed out, obviously people can get around this with CSS specificity but I expect most would rather not.

[souhe]

Hi,
The main reason to use builtin inline styles is that I like when I can import some library or component only with one import/require() statement. For me it's annoying to localize where the main styles are in node_modules and to include them separately. So that's the main reason for doing it that way. But maybe only for me bundling css styles together with component is better solution ;)

@marksyzm I like your idea about creating two dist files. One(default) with inline styles and another without it. So do you think that it's a good solution or you prefer only one, default file without inline styles?

[avanes]

@souhe I think it'll be great to have main file with inline styles, and another one without inline css (plus third extracted css, or we can still use less from src). It's easy to add resolve.alias to webpack's config to import new files from node_modules folder with short syntax.

[marksyzm]

Yeah, same, main file with, optional one without, so I could do:

var ScrollArea = require('react-scrollbar/no-css');

or

import ScrollArea from 'react-scrollbar/no-css';

[souhe]

Ok, i'll do that.

[souhe]

require('react-scrollbar/no-css');

is supported since now in version v0.4.0