cljss
cljss copied to clipboard
clj-commons
EXPERIMENTAL: Atomic styles
Pushed initial implementation into atomic-styles branch https://github.com/roman01la/cljss/commit/5b2cf7aad9d581908f811436acad4379044d4a99
The idea is to to have a unique class name per every rule/value pair so style declarations can be reused. In this implementation only static styles are atomized.
It is based on this atomic styles implementation which in turn is inspired by Styletron library
As described in the article linked above this approach has a potential to non-growing stylesheets which reduces output code size. Still this should be measured.
- No changes to existing Public API
- Added a new ns
cljss.atomic - Atomic styles are being aggregated into an atom at compile time, thus it's required to call a macro
(cljss.atomic/insert-css!)at the very end of the entry ns (core.cljs) which will generate a sequence of styles insertion calls
Thoughts?
@brianium Would you mind to test this on your project and report before/after output bundle size?
@roman01la not sure what's going on, but my before and after are the same (both 340K). I also got some warnings when trying out the atomic-styles branch. Here is the output from compiling:
Brians-MacBook-Pro:web brian$ lein cljsbuild once min
Compiling ClojureScript...
Compiling ["resources/public/js/compiled/boojit.js"] from ["src"]...
WARNING: Use of undeclared Var boojit-web.login.views/&:hover at line 64 /Users/brian/projects/boojit/deliveries/web/src/boojit_web/login/views.cljs
WARNING: Use of undeclared Var boojit-web.login.views/&:active at line 62 /Users/brian/projects/boojit/deliveries/web/src/boojit_web/login/views.cljs
WARNING: Use of undeclared Var boojit-web.login.views/&:hover at line 64 /Users/brian/projects/boojit/deliveries/web/src/boojit_web/login/views.cljs
WARNING: Use of undeclared Var boojit-web.login.views/&:active at line 62 /Users/brian/projects/boojit/deliveries/web/src/boojit_web/login/views.cljs
Successfully compiled ["resources/public/js/compiled/boojit.js"] in 9.881 seconds.
Brians-MacBook-Pro:web brian$ du -h resources/public/js/compiled/boojit.js
340K resources/public/js/compiled/boojit.js
The application still functions for the most part - but pseudo classes don't appear to be functioning - which makes sense given the warnings.
As for file size, it may be that my app is not large enough yet? It is really just login functionality at the moment - but still more components and styles than are in the cljss example.
@brianium I think I've fixed pseudo-selectors, but anyway, I've also tested this on a somewhat larger amount of styles and surprisingly the output got larger. Let's step aside from this for a while, it's definitely not a priority, at least for now. Maybe I'll get back to this later. Thanks.