Looking for CSS parser written in AS3

问题

I need to load and apply CSS at runtime in my Flex app. I know that the adobe docs say that you need to compile the CSS before loading it but I would like to find a work around.

I know that you can set individual styles like this:

cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);

I was planning on parsing a CSS file and appling each attribute as above.

I was wondering if:

Adobe had a CSS parser library that I could use
Someone else had a CSS parser that I could use
If I write my own CSS parser what I should watch out for

I know that the adobe flex.text.StyleSheet class has a CSS parser but I could not find a way to harness that. (Is there a way to get that source code?)

回答1:

Edit: This solution does not work. All selectors that are taken out of the parser are converted to lowercase. This may work for your application but it will probably not...

I am leaving this answer here because it may help some people looking for a solution and warn others of the limitations of this method.

Although it was not intended for this it is possible to use the StyleSheet class to parse the CSS. I am currently investigating how robust this is currently but for the most part it appears to be working.

public function extractFromStyleSheet(css:String):void {

    // Create a StyleSheet Object
    var styleSheet:StyleSheet = new StyleSheet();
    styleSheet.parseCSS(css);

    // Iterate through the selector objects
    var selectorNames:Array = styleSheet.styleNames;
    for(var i:int=0; i<selectorNames.length; i++){

        // Do something with each selector
        trace("Selector: "+selelectorNames[i];

        var properties:Object = styleSheet.getStyle(selectorNames[i]);
        for (var property:String in properties){

            // Do something with each property in the selector
            trace("\t"+property+" -> "+properties[property]+"\n");
        }
    }
}

回答2:

I had similar problem but more precisely i want the completely avoid the compilation because my application is wrapper by ActiveX used by a custom exe file and i let the software distributor to customize their skin.

In practice we put the <fx:Style> outside the application. To avoid low level parsing on the string we had transformed the Style Sheet in an XML:

<styles>
    <namespace name="myNs" value="com.myComponent"> 

    <declaration selector="myNS|Button#myselector:over #mysubselector">
        color:#ffffff;
        font-size:bold
    </declaration>

    ... other styles

</styles>

Beside the security considerations about let the user know your components you can load the XML and create a CSSStydeclaration.

Splitting and parsing only the selector let you create a series of CSSCondition and CSSSelector to add to your CSSStyleDeclaration. To parse the selector we use a little loop which search "#",":" and "." and split the string mantaining the sequence of the found CSS conditions.

var selectors:Array = [];

// first selector
var conditions:Array = [
   new CSSCondition(CSSConditionKind.ID, 'myselector');
   new CSSCondition(CSSConditionKind.PSEUDO, 'over');
];

// here you have to find and expand the namespace
ancestor:CSSSelector = new CSSSelector('com.myComponent.Button', conditions);
selectors.push(selector);

// second selector
var conditions:Array = [
   new CSSCondition(CSSConditionKind.ID, 'mysubselector');
];

selector:CSSSelector = new CSSSelector('', conditions, ancestor);
selectors.push(selector);

// Empty style declaration
new CSSStyleDeclaration(selectors, styleManager, false);

Then you can parse CSS properties by parseCSS() with the function created by @sixtyfootersdude, but using a fake selector:

var myCSS:String = "#fake " + "{" + cssTextReadedFromXML + "}";
var style:StyleSheet = new StyleSheet();
sheet.parseCSS(myCSS);

// here you have your parsed properties
var list:Object = sheet.getStyle('#fake');

Then you can add the properties to the CSSStyleDeclaration and apply them by the setStyle method and apply the declaration as in your example.

Less or more is how I've tryed to resolve this.

来源：https://stackoverflow.com/questions/7531455/looking-for-css-parser-written-in-as3

标签

apache-flex

actionscript-3

parsing