Separate css in production build about reactscrollbar HOT 7 CLOSED

👍 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;

from reactscrollbar.

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

from reactscrollbar.

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?

from reactscrollbar.

@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.

from reactscrollbar.

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';

from reactscrollbar.

Ok, i'll do that.

from reactscrollbar.

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

is supported since now in version v0.4.0

from reactscrollbar.