Monday, August 24, 2009

Manage CSS through SHP and JSMGR

Besides javascript, CSS is another type of text resource that suffer same problems that javascript does:
  • lack of modularity
  • lack of compression
The problem is almost exactly the same that we should be able to use JSMGR to handle CSS as well!

Luckily - YUI compressor works with both javascript and CSS, so by using YUI compressor our work is limited (you can of course implement your own compress! routine). What we need is to add the signature specific to CSS, we have a couple of approaches:
  1. have css-* functions that matches the javascript-* functions
  2. change the signature of javascript-* functions to it does not have the type of the script in its name, and instead, takes it in a #:type parameter
It seems that at the compression level, approach #2 is more logical, especially since YUI compressor works with either simply by the file extension type. So instead of open-javascript-files and open-javascript-files/base, we should have open-js/css-files and open-js/css-files/base. And javascript! will also be renamed as js/css!.

The only trouble we will encounter at this time with this approach is that when we need to implement another compressor we'll have to follow YUI's interface, but since that's out of scope, that's worry for another day.

At the xexpr-generator level, though, it makes sense to have the two types separated, since by default they generate different signatures:
  • js-url/xexpr generates <script> block, but we'll call it script* to match it more with xexpr
  • css-url/xexpr generates <link rel=styleet> block, and we'll call this css* to match it more with xexpr
So, we'll adapt the signature accordingly:

(define css-base-path (make-parameter "/css"))

(define (css-url path . paths)
(let ((url (string->url (css-base-path))))
(set-url-query! url (map (lambda (path)
(cons 's path))
(cons path paths)))
(regexp-replace* #px"(\\&)([^a])" (url->string url) ";\\2")))

(define (css* path . paths)
`(link ((rel "stylesheet") (type "text/css") (href ,(apply css-url path paths)))))

Now we can handle CSS with JSMGR as well!

No comments:

Post a Comment