Thursday, September 12, 2013

Problem with Flex modules, custom theme, and global CSS selector

Maybe I've never used all three of these concepts together in the same application before (or maybe I have, but have forgotten about this problem). In any case, I’m posting this to remind myself in case I run into this issue again… or in case I’m just doing something wrong and any of you know what needs to happen.

Modules inherit styles from the main application. If your main application contains a global CSS selector, modules inherit those styles as well. However, if you’re styling your application using a custom theme, and your theme’s CSS file uses a global selector, modules do not inherit the styles in your theme’s global selector (but they still inherit the other styles in your theme’s CSS).

The work-around I’m currently using is moving my global selector of styles from the theme’s CSS file to my main application’s CSS file. Although, that seems to defeat the purpose of making a custom theme.

UPDATE:
I came across a good solution. Simply apply the theme to each of the modules. I don't think it's intentional that you have to do that (or maybe it is, who knows) but it works well. And as long as you're properly optimizing the modules (whether using your IDEs built-in module optimizations or doing it manually with -load-externs config) the theme doesn't appear to add to the module's file size.