Your Flex project overwrites your modules their styles

by Ruben

This afternoon I found out that when you're defining styles for the same selector in your main Flex application and in one of your modules, the latter style-declaration will not be used, at all. I'm not sure whether this is a quirk that has yet to be documented or that it's something that has already been covered in the LiveDocs, but any feedback is welcome.

Consider a Flex project with one main application file, a module including a Label with its styleName set to "myLabel", and two CSS files: Main.mxml, MyModule.mxml, main.css and module.css.

The CSS files are included (<mx:Style source=".."/>) in their respective MXML files and look like this:

/* main.css: */
.myLabel {
   color: red;
}
/* module.css: */
.myLabel {
   font-style: italic;
}

When you run this application and load in the module with the Label in it you'll notice that it is colored red, but its text is not italicized.

If you set the -keep-generated-actionscript argument to true in the compiler-settings* you can have a look under the hood of the Flex framework and see what actually happens here. Once the compiler has run you'll have a new folder called 'generated' in the 'src' folder of your project, this is where all the classes go that Flex auto-creates for stuff like data-binding and also embedded styles.

Somewhere in the generated folder there should be a class called MyModule-generated in which there's a method called _MyModule_StylesInit():

In the above code Flex starts by looking for an existing style-declaration for the stylename "myLabel" and if there is none it'll create a new one -- in our case there already is a style-declaration however (as we've made one in main.css).

Next, Flex examines the factory-property of the style-declaration (a CSSStyleDeclaration instance). The factory-property is a function that defines all style-values that were set at compile-time from the class associated with the generated class (in this case MyModule.mxml). The value of CSSStyleDeclaration.factory is usually generated by the compiler (as you can see on line 152-155).

This part of the method is where things go wrong; by only updating the factory if it is null, Flex assumes that a compile-time style-declaration can only be set at one location in your project -- whereas we set it at two (Main.mxml and MyModule.mxml).
Because the factory-property of our style-declaration has already been set when the styles from main.css were initialized (by similar auto-generated code for Main.mxml) the styles from module.css will be disregarded.

I at the very least hope this might save some other developers from hours of searching around their code, let me know. Also, this a good read if you want to familiarize yourself on the topic of modules and CSS in Flex:
viconflex.blogspot.com/2007/04/flex-modules-compile-and-run-time-css.html

* Configure the compiler by setting options in the 'additional compiler arguments' field of the project properties window (right-click your project, go to 'properties' and then 'Flex Compiler').