migrate flex css to real css

[Melliti]

Hi,

I have an issue in my migration from Flex to AR with CSS. My CSS from the Flex project is in camelCase and doesn't provide units (px, em, ...) for properties. For example:

.container {
    cornerRadius:10;
    borderColor: #777777;
    fontFamily: Verdana;
    fontSize: 12;
    backgroundColor: #efefef;
}

Now, it should be

.container {
    border-radius :10px;
    border: solid 1px #777777;
    font-family: Verdana;
    font-size: 12px;
    background-color: #efefef;
}

Does a solution exist to convert the old CSS into a CSS file readable by web browsers ?

[Melliti]

Nobody has a solution ?

[Harbs]

I don't think anyone created a solution, although a lot of modern IDEs can flag invalid (HTML) CSS.

[carlosrovira]

I use just standard CSS, but I think we have automatic conversion from Flex, or at least I think I saw it in code. I mean, if you have "bordeColor" and exists as "border-color" in standard CSS, that should work out of the box. Instead, a only-flex property will not work, and you need to recode. Maybe I'm wrong on this and others can give more knowledge...

[Melliti]

I tried again after reading your comments. I commented all my CSS except a bloc of properties. You are right, it compiles and yes the camelCase is automatically turned into kebab-case for the browser.

I identified my problem, it was with some properties which use Images and make fail the compilation For example skin: Embed(source="PATH/TO/RESOURCE") it triggers

Warning: Definition mx.core.BitmapAsset could not be found. Error: The definition of base class BitmapAsset was not found.

We had to change this line of CSS by background-image: url("PATH/TO/RESOURCE")

I guess, as you said @carlosrovira I must recode properties that doesnt exist in strandard CSS.

Thx @carlosrovira and @Harbs, i'll continue to dig and i'll close this thread if it's ok