bug with +at(slice-name)

[Julien Vasseur]

Slice names is an excellent enhancement, unfortunately I found a bug with +at() mixin if you use the name of the slice instead of its index.

.test
  +at('xs')
    color: #fff

compiles to

@media only screen and (max-width: 0) {
    .test {
        color: #fff;
    }
}

instead of

@media only screen and (max-width: 400px) {
    .test {
        color: #fff;
    }
}

[Jeff Escalante]

Ok, so I think this is actually the intended behavior, correct me if I'm wrong @declandewet. The +at mixin will take a scale value and get anything between that value and the one below it. The example given in the docs shows that when you take the third value in that scale, it will include anything between that value and the second. Since the xs value is mapped directly to zero and has nothing below it, it can't be used with +at. However, I think using s would get you the effect you are after.

[Julien Vasseur]

This is discutable :)

If you take a look at the little schema illustrating the scale in the documentation, the measure named 'xs' is the same as the measure index 1 (between 0 and 400px).

So tell me where I'm wrong but if you call +at('xs') you should get the same result as +at(1)...

But I may misunderstood, this is not so simple.

[Jeff Escalante]

Hmm ok -- interested to hear @declandewet's thoughts on this one as he implemented this feature.

[Alexander Ryzhikov]

I think, with scale from readme, we should get media query between 0 and 1 from +at('xs'). So i agree with @Djules and

@media only screen and (max-width: 400px) {
    .test {
        color: #fff;
    }
}

seems correct

[zspecza]

Sorry man, I've been really busy with work - so, I'm actually unsure about this. +at('xs') should return the same thing as the scale point between the first two numbers on the scale, and this seems not to do that. The way it works now definitely seems wrong since it checks for a max width of 0 - which is the same as saying "if there is no device at all, style these elements like this." which is a tad counter-intuitive. This needs a change for sure.

[Jeff Escalante]

Cool, labeling this as a bug. @Djules are you interested in contributing a fix for this?

[Julien Vasseur]

@Jenius yeah sure ! I'll take a look this week-end, I'm quiet busy too at the moment.

[Jeff Escalante]

Whoo! Excited to see what you come up with 😀

[Julien Vasseur]

Finally done the fix this evening.

I added several tests to be sure I have understood. The fix was really easy in fact, this was just the index of the max measure which was wrong.

And sorry for merging my package.json file, I'm pretty new in contributing in Github.

[Jeff Escalante]

Closed by #29 - thank you for some really excellent work with this @Djules -- thorough tests, great commit formatting, good collaboration, and solid code decisions. Really appreciate that 👬

[Jeff Escalante]

This update was just shipped out in v0.3.1 as well and is immediately useable

[Julien Vasseur]

My pleasure :)