It turned out the problem is how the binding is being applied in CSS. You can't use skin url for xbl file:
Bad:
-moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker");
Good:
-moz-binding: url("chrome://myextension/content/colorpicker-extended.xml#colorpicker");
So in my case since I had skin folder inside content all I had to do is change css to this:
colorpicker
{
-moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker");
}
colorpicker[type="button"]
{
-moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker-button");
}
colorpicker > vbox
{
-moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#extended");
}