Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cycle not automatically being set to denominator #229

Closed
digitalmaster opened this issue Jan 8, 2016 · 9 comments
Closed

Cycle not automatically being set to denominator #229

digitalmaster opened this issue Jan 8, 2016 · 9 comments

Comments

@digitalmaster
Copy link

@digitalmaster digitalmaster commented Jan 8, 2016

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

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

Manually setting cycle:

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

image

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

@corysimmons
Copy link
Contributor

@corysimmons corysimmons commented Jan 8, 2016

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

@digitalmaster
Copy link
Author

@digitalmaster digitalmaster commented Jan 8, 2016

/*------------------------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
Copy link
Author

@digitalmaster digitalmaster commented Jan 9, 2016

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

@peterramsing
Copy link
Owner

@peterramsing peterramsing commented Jan 9, 2016

@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
Copy link
Owner

@peterramsing peterramsing commented Jan 9, 2016

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

peterramsing added a commit that referenced this issue Jan 9, 2016
As noted in issue #229 there can be an issue where Less does the
division of lost-column: 1/2 into lost-column: 0.5 which causes
problems especially with cycle. This adds a note to escape the division
with a ~”1/2”.
@corysimmons
Copy link
Contributor

@corysimmons corysimmons commented Jan 9, 2016

@digitalmaster
Copy link
Author

@digitalmaster digitalmaster commented Jan 11, 2016

Yup.. Makes sense. That did it. Thanks

@peterramsing
Copy link
Owner

@peterramsing peterramsing commented Jan 11, 2016

@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
Copy link
Contributor

@corysimmons corysimmons commented Jan 11, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.