How do I add custom style to custom AS3 component via .css file?

Question

Hi all,
I have created a flex application which displays a custom component I created in actionscript. My custom component is just an extended canvas component which displays a gradient background. When I add the component to my flex app, see code below, the component works great.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <ns1:GradientCanvas fillColors="[#ffffff, #000000]" />
</mx:Application>
However, I also want to support css styles to add the gradient colors to my component, like so
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <mx:Style source="test.css" />
    <ns1:GradientCanvas styleName="gradientCanvas" />
</mx:Application>
test.css
.gradientCanvas {
    fill-colors: #ffffff, #000000;
When I try this my component doesn't display a gradient. I have followed the tutorials online that I could find but it seems to be the same example from Adobe repeated on multiple site and it doesn't work.
My component code is added below, if anyone could show me how to get this to work it would be much appreciated.
Thanks in advance,
Xander
GradientCanvas.as
package mycomps {
    import flash.display.GradientType;
    import flash.geom.Matrix;
    import mx.containers.Canvas;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;
    public class GradientCanvas extends Canvas {
        private static var classConstructed:Boolean = constructStyle();
        public function GradientCanvas() {
            super();
            this.width = 100;
            this.height = 20;
        private static function constructStyle():Boolean {
            var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("GradientCanvas");
            if (style) {
                if (style.getStyle("fill-colors") == undefined) {
                    style.setStyle("fill-colors", [0xffffff, 0x000000]);
            } else {
                style = new CSSStyleDeclaration();
                style.defaultFactory = function():void {
                    this._fillColours = [0xffffff, 0x000000];
                StyleManager.setStyleDeclaration("GradientCanvas", style, true);
            return true;
        override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);
            if (styleProp == "fill-colors") {
                this._fillColours = getStyle("fill-colors");
                this._fillColoursChanged = true;
                this.invalidateDisplayList();
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (this._fillColoursChanged == true) {
                var direction:Number = 90 * (Math.PI / 180);
                var matrix:Matrix = new Matrix();
                matrix.createGradientBox(unscaledWidth, unscaledHeight, direction, 0, 0);
                graphics.clear();
                graphics.beginGradientFill(GradientType.LINEAR, this._fillColours, [1,1], [0, 255], matrix, "pad", "rgb", -1);
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                graphics.endFill();
                this._fillColoursChanged = false;
        [Inspectable(category="Gradient", type="Array", format="Color", name="Fill Colours")]
        private var _fillColours:Array;
        private var _fillColoursChanged:Boolean = false;
        public function get fillColours():Array {
            return this._fillColours;
        public function set fillColours(value:Array):void {
            this._fillColours = value;
            this._fillColoursChanged = true;
            this.invalidateProperties();
            this.invalidateDisplayList();

Answer 1

Never mind, I've discovered how to do it for myself.
Thanks...