CSS and AS3: Careful with Whitespace

Small bug here, it looks like the built in StyleSheet CSS parser in Flash doesn’t use a trim() or a more complex regular expression when parsing a CSS string/file. If you’re a whitespace fan this can lead to your style properties, such as “fontFamily”, actually being indexed in the style object as “fontFamily ” (notice the space at the end).

This doesn’t affect the regular dot notation access (style.fontFamily). But it can cause problems if you’re iterating through the style object.

This small glitch can be illustrated by the following two snippets of almost identical code. This first one shows the correct behaviour when no extraneous whitespace is used in the CSS:

var ss:StyleSheet = new StyleSheet();
ss.parseCSS('myStyle { font-family:"Arial"; }');

trace(ss.getStyle("myStyle").fontFamily); // Arial

var style:Object = ss.getStyle("myStyle");
for(var key:String in style)
{
    trace("style:", key, style[key], key == "fontFamily");
    //style: fontFamily Arial true
}

Now let’s add a space before the colon in the CSS, notice the trace output in the for loop:

var ss:StyleSheet = new StyleSheet();
ss.parseCSS('myStyle { font-family : "Arial"; }');

trace(ss.getStyle("myStyle").fontFamily); // undefined

var style:Object = ss.getStyle("myStyle");
for(var key:String in style)
{
  trace("style:", key, style[key], key == "fontFamily");
  //style: fontFamily Arial false
}

Quite an easy one to avoid if you’re in control of your CSS, and if you’re not just be sure to trim whitespace yourself if you need to iterate through a style object’s properties.