multiple @extends are not being processed as they should about stss

[RonaldTreur]

Added to my to-do list, thanks! Curious behavior indeed! Especially since SASS is processing the @extend-directives..

[RonaldTreur]

Just checked this, but it works OK when I try. My result is this:

".center": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded-centered": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded": {
    left: "10dp",
    right: "10dp"
},
".padded-centered": {
    left: "10dp",
    right: "10dp"
}

I'm not sure why you lack .center rule for .padded-centered..
Perhaps you could pull the latest version and try again? Also, if someone else can reproduce this, be sure to post it here!

I'll leave this open for now, until @masterbee gives us the thumbs up.

[masterbee]

@RonaldTreur , thanks, and I just pulled and noticed the same behaviour. So all good.

As a note: I will be honest, but was expecting was to have the .center value in with the left and right and it a bit surprised that it was added as a separate selector.

wrote:

STSS File

/* Center text */
.center {
    text-align: center;
}

.padded {
    left: 10dp;
    right: 10dp;
}

.padded-centered {
    @extend .padded;
    @extend .center;
}

expected:

".center": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded": {
    left: "10dp",
    right: "10dp"
},
".padded-centered": {
    left: "10dp",
    right: "10dp",
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}

got:

".center": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded-centered": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".padded": {
    left: "10dp",
    right: "10dp"
},
".padded-centered": {
    left: "10dp",
    right: "10dp"
}

I have used SCSS quiet often and it was usually a bit smarter than that. Any thoughts? on why it would create a separate selector for the second @extend instead of just writing it out in the selector block it is extending, like the first @extend?

[RonaldTreur]

@masterbee I understand you completely. SCSS is even smarter than that however ;-) It doesn't duplicate any styling, it simply adds a selector to the ones extended. It's actually due to the limitations of TSS the duplication occurs. Since multiple selectors don't work for TSS, they are split and each receives a copy of the values.

This is actually the intermediate result (after SCSS processed):

/* Center text */
.center, .padded-centered {
  textAlign: center; }

.padded, .padded-centered {
  left: 10dp;
  right: 10dp; }

This is where conversion to TSS kicks in, and the styling actually does get duplicated.

You are right in that in that case the styles could be combined, but since TSS is only used during compilation there isn't much use to such an optimization.

[RonaldTreur]

Since it is working (though perhaps not always as expected ;-)) I'll close this.

[rpedroni]

Hey guys,

I do understand why this occurs but do you guys use any workaround to be able to use @extend appropriately for tss?

Thanks!