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

Comments

Projects
None yet
3 participants
@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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 8, 2016

Contributor

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

Contributor

corysimmons commented Jan 8, 2016

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

@digitalmaster

This comment has been minimized.

Show comment
Hide comment
@digitalmaster

digitalmaster 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 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

This comment has been minimized.

Show comment
Hide comment
@digitalmaster

digitalmaster Jan 9, 2016

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

digitalmaster commented Jan 9, 2016

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

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 9, 2016

Owner

@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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 9, 2016

Owner

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

Owner

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

Adds gotcha note for Less and fractions
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

This comment has been minimized.

Show comment
Hide comment
@corysimmons
Contributor

corysimmons commented Jan 9, 2016

@digitalmaster

This comment has been minimized.

Show comment
Hide comment
@digitalmaster

digitalmaster Jan 11, 2016

Yup.. Makes sense. That did it. Thanks

digitalmaster commented Jan 11, 2016

Yup.. Makes sense. That did it. Thanks

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 11, 2016

Owner

@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. 👍

Owner

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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 11, 2016

Contributor

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

Contributor

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