clj-commons / cljss

Clojure Style Sheets — CSS-in-JS for ClojureScript
https://roman01la.github.io/cljss/
Eclipse Public License 1.0
456 stars 27 forks source link

EXPERIMENTAL: Atomic styles #21

Open roman01la opened 7 years ago

roman01la commented 7 years ago

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.

Thoughts?

roman01la commented 7 years ago

@brianium Would you mind to test this on your project and report before/after output bundle size?

brianium commented 7 years ago

sure thing - I should be able to check it out tonight or tomorrow.

brianium commented 7 years ago

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

roman01la commented 7 years ago

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