October: The CSS combiner destroys certain calc rules

[tobias-kuendig]

We use lostgrid.org extensively in our projects. For a certain time now we have been experiencing problems with the combiner (I cannot pinpoint the exact October version that introduced this bug).

lost-grid generates rules like this:

.header {
    width: calc(99.9% * 1/1 - 0px); /* the rule for a 1/1 or full-width column */
}

When this rule is passed through October's combiner it ends up as

.header {
    width: calc(99.9% * 1/1 - 0); /* the px unit is missing */
}

Because of the - 0 without a unit the rule becomes invalid CSS and is ignored by the browser.

It seems like the optimization is not happending for all calc calls as these test cases show:

body {
    width: calc(99.9% * 1/1 - 0px);
    width: calc(99.9% * 0px * 1/1 - 0px);
    width: calc(0px * 1/1 - 0px);
    width: calc(0px * 100% - 0px);
    width: calc(0px * 100%);
}

becomes

body {
    width: calc(99.9% * 1/1 - 0);         /* X */
    width: calc(99.9% * 0 * 1/1 - 0);     /* X */
    width: calc(0px * 1/1 - 0);           /* X */
    width: calc(0px * 100% - 0);          /* X */
    width: calc(0px * 100%);
}

to reproduce paste the css rules above in a css file and include it using

<link href="{{ ['assets/css/test.css'] | theme }}" rel="stylesheet">

[tobias-kuendig]

I just noticed that October uses Assetic, this might be an upstream issue.

[tobias-kuendig]

Found the possible culprit:
https://github.com/octobercms/library/blob/master/src/Parse/Assetic/StylesheetMinify.php#L55

[bennothommo]

@tobias-kuendig I wouldn't mind seeing that line gone. @w20k, @LukeTowers - what do you reckon?

[w20k]

@tobias-kuendig make a PR - will merge. Might be something that I've missed while testing.
Or we could try to find a proper Regex 😄 @Samuell1 ?

[tobias-kuendig]

Here's my PR: https://github.com/octobercms/library/pull/411

If someone has a better solution please feel free to comment!