Upgrade to NS 3.0 Error applying css styling


#1

Just updated my angular nativescript project to 3.0. The css styles are not applying .

On tns run android i get a message -

Css styling failed: Error: undefined:256:7: missing ‘{’

Any suggestions please?


#2

Can you provide your .css?

If you read the error properly,anyways it says it is missing a {.
Check on your .css file for any { that wasn’t closed. After you close it, run it again and it will compile!


#3

Hi
I checked my CSS . There is not missing { !

Also while experimenting to see which css class was causing the error I
found that the error goes away if I delete that the only animation I had in
the file !! These are the two classes.

@keyframes pulsate {
0% {
transform: scale (1.0);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale (1.0);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1.0);
}
}

.animate-spring {
animation-name: pulsate;
animation-duration: 1.0s;
animation-timing-function: ease;
animation-fill-mode: initial;
}


#4

scale animation needs scaleX and scaleY arguments and can not be passed with a single value.
so change it from

transform: scale (1.0);

to

transform: scale (1.0, 1.0);

#5

Thanks @NickIliev. can confirm this works!!


#6

Hi @NickIliev
I think I spoke too soon. I made the change suggested, the 2 css clasess now look like this

@keyframes pulsate {
    0% {
        transform: scale (1.0, 1.0);
    }
    25% {
        transform: scale(1.2, 1.2);
    }
    50% {
        transform: scale (1.0, 1.0);
    }
    75% {
        transform: scale(1.2, 1.2);
    }
    100% {
        transform: scale(1.0, 1.0);
    }
}

.animate-spring {
    animation-name: pulsate;
    animation-duration: 1.0s;
    animation-timing-function: ease;
    animation-fill-mode: initial;
}

however I am still getting the styling error in NS3.0. If I remove these to css classes then the styling works fine.
Also this error happens only on android. IOS works fine.

Any suggestions?
Thanks


#7

Strangely - if I move the 2 animation related classes to the top of the css file it seems to work without any errrors! doing that for now.