Cycle not automatically being set to denominator

[digitalmaster]

I have this weird issue where the cycle isn't being set automatically.

Without manually setting cycle:
lost-column: 1/2;

Manually setting cycle:

lost-column: 1/2;
lost-column-cycle: 2;

FYI: I'm using webpack with postcss (^6.6.3).

[corysimmons]

Can you provide the generated CSS with that bare bones example (just for the broken one)?

[digitalmaster]

/*------------------------WORKING---------------------------*/
.basicinfo-form > .legal-name {
    *zoom: 1;
    width: 100%;
}

.basicinfo-form > .legal-name :not(input):not(textarea):not(select) {
    background-color: rgba(0,0,255,0.1);
}

.basicinfo-form > .legal-name:before {
    content: '';
    display: table;
}

.basicinfo-form > .legal-name:after {
    content: '';
    display: table;
    clear: both;
}

.basicinfo-form .text-input {
    width: calc(99.99% * 0.5 - (30px - 30px * 0.5));
}

.basicinfo-form .text-input:nth-child(n) {
    float: left;
    margin-right: 30px;
    clear: none;
}

.basicinfo-form .text-input:last-child {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(2n) {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(2n + 1) {
    clear: left;
}

/*------------------------NOT WORKING---------------------------*/

.basicinfo-form > .legal-name {
    *zoom: 1;
    width: 100%;
}

.basicinfo-form > .legal-name :not(input):not(textarea):not(select) {
    background-color: rgba(0,0,255,0.1);
}

.basicinfo-form > .legal-name:before {
    content: '';
    display: table;
}

.basicinfo-form > .legal-name:after {
    content: '';
    display: table;
    clear: both;
}

.basicinfo-form .text-input {
    width: calc(99.99% * 0.5 - (30px - 30px * 0.5));
}

.basicinfo-form .text-input:nth-child(n) {
    float: left;
    margin-right: 30px;
    clear: none;
}

.basicinfo-form .text-input:last-child {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(undefinedn) {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(undefinedn + 1) {
    clear: left;
}

[digitalmaster]

I just noticed the undefinedn.. That's obviously the reason. Question now is just why.

[peterramsing]

@digitalmaster What pre-processor are you using?

It looks like your pre-processor might be doing the division of lost-column: 1/2 and is making it lost-column: 0.5. Thus, lost-cycle doesn't have a denominator to reference. I've heard there might be some issues with Less regarding this.

[peterramsing]

I just tested this with Less and got the issue you're experiencing. Less Docs

I'm going to add this to the Gotchas.

This should get you sorted nicely.

.basicinfo-form > .legal-name {
  lost-utility: clearfix;
  lost-utility: edit;
  width: 100%;
}


.basicinfo-form .text-input {
  lost-column: ~"1/2";
}

More Reading

[corysimmons]

#178 (comment)

[digitalmaster]

Yup.. Makes sense. That did it. Thanks

[peterramsing]

@digitalmaster Thanks for bringing it up! I don't use Less as much as I used to these days so it's great to hear from users. 👍

[corysimmons]

I think LESS might introduce a literal(...) function sooner than later just to avoid all these Issues.