search

rtsao / csjs

:sparkles: Modular, scoped CSS with ES6
MIT License
575 stars 32 forks source link

Dead code elimination #59

Closed neurosnap closed 7 years ago

neurosnap commented 8 years ago

If we don't use a class, can we eliminate it from the injectify/extractify output?

rtsao commented 8 years ago

Yeah, this is possible but it's a bit tricky. I had worked on a basic version of this a long time ago with CSS modules: https://github.com/css-modules/css-modules-loader-core/pull/20. That said I imagine doing something similar at runtime with csjs would probably be pretty expensive. It basically necessitates truly parsing all the CSS.

I'm wondering if this would be possible at build time, possibly with a Babel plugin, sorta how https://github.com/rtsao/babel-plugin-csjs-postcss works.

rtsao commented 8 years ago

I think long-term, I want csjs to work without any tooling, but also have the option of using a single Babel plugin to do as much as possible at build-time for enhancements and optimizations like this.

rtsao commented 8 years ago

Actually, I think this should be pretty easy to implement as a babel plugin and/or webpack loader as long as a tree-shaking bundler is used.

serapath commented 7 years ago

I'm not sure if it makes sense, but after reading about styletron, maybe a minimal version can be used for csjs? It seems styletron does those kind of things already according to your blog post.

An important part of CSS optimization is separating critical from non-critical CSS and eliminating unused CSS...