Styles.CSS not compiling after adding Fontawsome

I added the following import in my project :

"import com.kbdunn.vaadin.addons.fontawesome.FontAwesome;"

Then I : "upDateButton=new Button("Update",FontAwesome.REFRESH);"

Then the following happened:

The items in red "fa" and "100%" are "Unexpected Tokens"  WHY? this is code generated by the Vaadin valo theme????? Earlier it destroyed my entire project and i had to reconfigure my IDE. This sucks!

".mytheme {
    @-webkit-keyframes fa-spin {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
        100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
    }
    @keyframes fa-spin {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
        100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
    }
}"

That is not generated by Valo Theme. It is coming from the FontAwesome Label add-on /VAADIN/addons/font-awesome-label/font-awesome.scss. However, there is nothing wrong with that syntax. I'm using Vaadin version 7.7.3 and mvn vaadin:compile-theme compiles a proper styles.css file without any errors. What version of Vaadin you are using?

Johannes Häyry: That is not generated by Valo Theme. It is coming from the FontAwesome Label add-on /VAADIN/addons/font-awesome-label/font-awesome.scss. However, there is nothing wrong with that syntax. I'm using Vaadin version 7.7.3 and mvn vaadin:compile-theme compiles a proper styles.css file without any errors. What version of Vaadin you are using?

i have 7.7.0