Make css inline
Closed this issue · 13 comments
Hi @xyc this module really helps! I'm wondering if you are thinking about move the css inline so that I can just install and use it!
Including an additional css is not hard but it would be cool if I don't need to do it at all!
Yes I'm considering inline styles too. One reason that I provided CSS though is that it'll be easier to customize.
Yes for that I agree as well. At least we might provide the very basic style inline, and people could update the style by passing in a {styles} props on the component?
@fraserxu The very basic style is provided inline (padding on deeper levels). {styles} props might be a solution. I'm looking at other options too.
I think we can adopt a similar approach to https://github.com/KyleAMathews/react-headroom. Moving styles inline and add a disableInlineStyles props to allow users to customize.
👍
There's also https://github.com/js-next/react-style.
There's another option: CSS modules. This way you can write plain CSS, but bundle your styles together with the JS (using webpack), and users of the library can override the styles using the appropriate class names (just take care that your CSS modules don't produce names with hashes) or they can even build the library without styles to reduce the bloat.
But well, you have so little styles that making them inline wold be fine too. Having everyone maintain yet one more dependency is cumbersome imho.
@mik01aj That's right. CSS modules' a great idea, but still requires the css file, not "just install and use it". The intent of this is to let you just plug the inspector in your app and see results. I'll just move'em inline :)
I got it. CSS modules are helpful, but I really meant webpack. With webpack you can pack your js and css into one file.
I see, so we don't necessarily need css modules for this task? I'll update the package with the loaders
Not necessarily, you can pack it even with css-raw-loader.
Thanks for the pointer. Tried it but move them all into inline styles for now
Resolved in 0.2.0