css not being loaded about example-rollup-react-component-npm-package HOT 8 CLOSED

Hey @uriklar, thanks for reaching out!

Have you tried actually consuming these example components in an app and can verify the css get's injected?

You can see the example components and CSS being utilized here: https://stackblitz.com/edit/example-rollup-react-component-npm-package?file=package.json

It'd be great to get some more background into what issues you're seeing.

from example-rollup-react-component-npm-package.

Hi @jaebradley. Thanks for the ultra quick response :-)
It was my mistake. I wasn't aware I need to import the css separately.

from example-rollup-react-component-npm-package.

@uriklar no worries - it's not particular clear from the README that the CSS is built / imported separately. I'm hoping to add some more documentation in the future.

Cheers!

from example-rollup-react-component-npm-package.

While we're here.. I was wondering if during your research you've found a good resource on building a tree shakable component library with Rollup (or even Webpack)?
I'm trying to achieve that and though i've marked "sideEffects": false it seams like my consumer app is getting the whole bundle regardless of what i'm importing.
Thanks again for the response and for the great example!

from example-rollup-react-component-npm-package.

@uriklar are you tree-shaking ES6 modules only? Or are you transpiling ES6 modules into CommonJS?

from example-rollup-react-component-npm-package.

The latter, transpiling to common js too

from example-rollup-react-component-npm-package.

I think you need to tell Babel not to transpile ES6 modules so you can take advantage of static analysis.

https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/

I could definitely be missing the ball on something as I don't know exactly what your setup is.

from example-rollup-react-component-npm-package.

Thanks a lot! I'll try it out

from example-rollup-react-component-npm-package.