Too much Code

[gisu]

I have the Issue that Lost (in a LibSass > PostCSS Pipe) generate too much Code. Lost Version: 6.7.1

.testimonial {

  &__blubb {
    .testimonial__content__image {
      lost-column: 3/4;
  }

    .testimonial__content__body {
      lost-column: 6/10;
    }
  }
}

Result

.testimonial__blubb .testimonial__content__image {
  width: calc(99.99% * 3/4 - (30px - 30px * 3/4)); }
.testimonial__blubb .testimonial__content__image:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none; }
.testimonial__blubb .testimonial__content__image:last-child{
  margin-right: 0; }
.testimonial__blubb .testimonial__content__image:nth-child(4n){
  float: right; }
.testimonial__blubb .testimonial__content__image:nth-child(4n){
  margin-right: 0; }
.testimonial__blubb .testimonial__content__image:nth-child(4n + 1){
  clear: left; }

.testimonial__blubb .testimonial__content__body {
  width: calc(99.99% * 6/10 - (30px - 30px * 6/10)); }

.testimonial__blubb .testimonial__content__body:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none; }

.testimonial__blubb .testimonial__content__body:last-child{
  margin-right: 0; }

.testimonial__blubb .testimonial__content__body:nth-child(10n){
  float: right; }

.testimonial__blubb .testimonial__content__body:nth-child(10n){
  margin-right: 0; }

.testimonial__blubb .testimonial__content__body:nth-child(10n + 1){
  clear: left; }

[peterramsing]

It does look like

.testimonial__blubb .testimonial__content__image:nth-child(4n){
  float: right; }
.testimonial__blubb .testimonial__content__image:nth-child(4n){
  margin-right: 0; }

Could be simplified. (and for body as well)

But all of that looks correct at first glance. Are you getting unexpected results?

[corysimmons]

Code bloat is an unfortunate side effect of pretty much any power grid. It's really hard to answer since the library has no idea how you're using the code. A lot of that code is put in there simply to "reset" it for things like media queries and such. (yeah you think that's bloated? wait til you add a few media queries in there)

Tbh, I haven't really found a solution to this yet. @peterramsing You might be able to remove one or two of those rules with slightly more robust logic, but I've struggled with this problem for years.

I don't think he's getting unexpected results. I think he's just rightfully complaining about bloat. Alas.. :(

[peterramsing]

Thanks @corysimmons for the feedback. 👍

I have been looking at how we might be able to do something to decrease the bloat but it does look like the side affect of a grid system like this.

@gisu Do you have any initial ideas about what might be removable/repetitive? 😄

[poxrud]

I'd like to add my thoughts on this... Most of the "bloat" that I see here is a result of sass nesting, not lost.
The only bloat is repeating float:right and margin-right: 0 for the same rule as @peterramsing already pointed out. With gzip enabled on the webserver the difference will be negligible.

In any case, I think it can be fixed with the following:

//...
if (lostColumnCycle !== 0) {
//...
  newBlock(
    decl,
    ':nth-child('+ lostColumnCycle +'n)',
    ['margin-right', 'float'],
    [0 , 'right']
   );
} else {
  newBlock(
    decl,
    ':nth-child('+ lostColumnCycle +'n)',
    ['float'],
    ['right']
  );
}

This probably makes the js code a bit more confusing.

[gisu]

The main Issue for me the float:right and margin-right: 0 - the rest is ok.

.testimonial__blubb .testimonial__content__body:nth-child(10n){
  float: right; }

.testimonial__blubb .testimonial__content__body:nth-child(10n){
  margin-right: 0; }```

[corysimmons]

Small change? Easily testable and fixable?

Perfect time for a PR boys! 💃