modulizaion of output possible?

[regard...@gmail.com]

My CSS even when compiled with gss renaming of names is becoming too big for fast initial loads and I am looking for ways to split up the file into modules - one initial module that contains the essential styling for what is shown first in the app and subsequent module(s) that can be loaded and installed later.

In theory I can go with manual splitting of the css, but this is sub-optimal because style is generated by *.less parts and only then passed to gss. Another issue with that approach would be that I am using class name renaming and I am not aware of a way to have consistent name maps between several compiles. For example I have these two class names:

material-item

material-button

Assuming I would need only the button in the first css file (the main file to be loaded right away) I would include that style in the first manually separated file and gss will rename 'material' to lets say 'a'

Then in the second file I would include material-item and run gss on it - then 'material' might be renamed to something else, let's say 'b'.

Now I need to go to the closure compiler and I need to build the whole project (possibly using modules there as well) and I need one consistent map to include in the build - I cannot simply merge the two produced maps.

So basically my question is more in the line of: how do I use modules in gss+closure compiler for CSS?

I see that styles are being loaded in gmail dynamically and with minified names so I assumed there is a way, but I just can't figure it out.

Thanks.

[Ian Flanigan]

Closure Compiler modules are the way to go. For the JS part, see http://plovr.com/demo/modules.html for some info. (Otherwise you'll probably have to get Closure: The Definitive Guide.) Closure Stylesheets also can use modules, but you have to extend the compiler with your own code to do it.

Here's the basic idea (with code pointers):

• An overview is given in ChunkAware.
• A "chunk" is a set of CSS that should be delivered together. You can think of chunks as roughly corresponding to modules. Unlike JS modules, CSS chunks don't have any concept of dependencies built into the compiler. If you need to represent dependencies, it's up to you to figure out which dependencies go in which chunk. A reasonable approach is just to mirror your JS dependencies.
• You are responsible for assigning source code to chunks using MapChunkAwareNodesToChunk.
• When you want to generate the stylesheet for a chunk, you use the ChunkCompactPrinter and pass in the chunk you care about.
• You can make a tool to pre-generate CSS files for each chunk or you can try to serve the CSS dynamically. Note that if you want to pre-generate the CSS and you have multiple conditions or want to compile for different browsers, you'll have to generate all of the combinations for each chunk.
• How you inject the CSS into the page is up to you.

Hope that helps,

Ian

--
You received this message because you are subscribed to the Google Groups "closure-stylesheets-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to closure-stylesheets...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[regard...@gmail.com]

Yes, that is what I was looking for, although I was hoping for this to be exposed somehow to the CLI similar to the modules in js compiler, but this will do, thank you.

To unsubscribe from this group and stop receiving emails from it, send an email to closure-stylesheets-discuss+unsub...@googlegroups.com.