Add option to lost-column for updating the value

[Dylan-Chapman]

lost-column should have an option to help eliminate duplicate CSS

For example, if this is my input:

.supplier__info {
    lost-column: 1/1;

    @media (min-width:480px) {
        lost-column: 1/4;
    }
}

Then my output is:

.supplier__info {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 99.99%
}

.supplier__info:nth-child(n) {
    margin-right: 15px
}

.supplier__info:last-child,.supplier__info:nth-child(1n) {
    margin-right: 0
}

@media (min-width:480px) {
    .supplier__info {
        -webkit-box-flex: 0; /* Not needed */
        -webkit-flex: 0 0 auto; /* Not needed */
        -ms-flex: 0 0 auto; /* Not needed */
        flex: 0 0 auto; /* Not needed */
        width: calc(99.99% * 1/4 - 11.25px)
    }

    /* Not needed */
    .supplier__info:nth-child(n) {
        margin-right: 15px
    }

    /* :last-child not needed */
    .supplier__info:last-child,.supplier__info:nth-child(4n) {
        margin-right: 0
    }
}

I don't know if the solution would be to pass an update flag in the lost-column call, or to have a separate lost-column-update call? It seems like there should be some way to avoid this mass-CSS-duplication.

[alex-ketch]

Never mind, [it doesn't](https://github.com/giakki/uncss/issues/55)
Also worth mentioning, this isn't a Lost grid issue, but rather an inherent problem with using nesting selectors in all CSS preprocessing languages.

[Dylan-Chapman]

It may not inherently be a Lost grid issue, but it's one that Lost could fix? If you called lost-update-column instead of lost-column, you wouldn't get the flex declarations and the other two repeated selectors again, for example.

[peterramsing]

I'm liking the direction of this. I think this leads into a great thought process about what Lost's role is. Be looking for more discussion to see if Lost could help out with this. I'll leave this issue open for now as I want to capture this as a potential feature.

Thanks! 😄

[corysimmons]

I think Lost could help with this. Lost really needs to do a few more things. You need to be able to generate reusable classes with it (e.g. .col-md-6) without bloat and it'd be nice to do something like Dylan is suggesting where we somehow tell the API we're "updating". I think it'd be better as a param to lost-column rather than creating a new rule lost-update-column.

For instance:

.foo {
  lost-column: 1/4;
  @media (min-width: 500px) {
    lost-column: 1/4 bp;
  }
}

So far as the reusable classes, maybe that'd be best tackled after we are able to simply return a width value (mentioned and maybe addressed in some other issues).

[peterramsing]

Code bloat is never good. I think this could be added to the roadmap.