Font shorthand property with calc() statements don't work in Firefox

[stephenvoisey]

Hi folks,

Was asked to post this here after I contacted you on twitter.

The problem I ran into was with my gulp build using Rucksack with either the gulp-shorthand plugin: https://www.npmjs.com/package/gulp-shorthand and it's Post CSS alternative Longhand-Merge: https://www.npmjs.com/package/postcss-merge-longhand

Both of these plugins do the same thing, they look for any longhand CSS that can be merged together into a shorthand CSS statement, thus reducing the file size.

And... lets throw Firefox into the equation also, as it is only this browser with which the problem appears.

In Firefox if I use responsive rucksack text for the font size, either of these plugins will export the CSS in a way that doesn't work. The font doesn't appear with the correct font, as the style is disabled - Firefox reports in the dev tools that the css statement has an invalid property. However, both Safari and Chrome will render the headings as expected.

I noticed the issue when applying it to heading declarations in my SCSS. Disabling shorthand or longhand merge, resolves the issue.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $heading-font-family;
  font-size: responsive 12px 48px; //$base-font-size;
  line-height: $heading-line-height;
  margin: 0 0 $small-spacing;
}

Which ends up like as CSS like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font: calc(12px + 36 * ((100vw - 420px) / 860))/1.2 "Heading", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  margin: 0 0 0.75em;
}

@media screen and (min-width: 1280px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 48px;
  }
}

@media screen and (max-width: 420px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 12px;
  }
}

If I disable shorthand then the css looks like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Heading", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: calc(12px + 36 * ((100vw - 420px) / 860));
  line-height: 1.2;
  margin: 0 0 0.75em;
}

@media screen and (min-width: 1280px) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 48px;
  }
}

@media screen and (max-width: 420px) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 12px;
  }
}

And works.

I'm curious as to what the issue is here, Firefox, Rucksack, Shorthand code?

Here is my build pipe in gulp for reference, longhandMerge is disabled in this instance, but if I switch the plugins, the result is the same:

gulp.task('scss-compiler', function() {
  return gulp.src(input)
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss([
      lost(),
      rucksack()
      // longhandMerge()
    ]))
    .pipe(shorthand())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output))
    .pipe(rename({suffix: '.min'}))
    .pipe(csso())
    .pipe(gulp.dest(output))
    .pipe(livereload({ start: false }))
    ;
});

[madeleineostoja]

My bet is that Firefox can't handle calc properties in the shorthand font property. Will look into it more when I get a chance later today

[stephenvoisey]

Definite possibility. I'm using the latest Firefox Developer edition on OS X El Capitan.

[madeleineostoja]

Confirmed - calc expressions do not work in Firefox shorthand font properties. Not much I can do about this, especially considering Rucksack itself doesn't output a font declaration. I'll update the issue title to reflect

[madeleineostoja]

Closing this one, since it isn't really related to Rucksack, and font properties aren't explicitly supported anyway.

[kodekoder]

I have the same issue, which is makes using Rucksack worthless, since I can't support Responsive in FF. Whats the point, I don't get it? Is there a fix for that? What to do?

This should be mention with big red words - RUCKSACK DOESN'T WORK WITH FIREFOX, so people don't waste time for this. I was playing with Rucksack more then a day, adding features, and now I found out it doesn't support Firefox? Holy crap, what a waste.

[kodekoder]

Oh, sorry, turns out it's very strange FIrefox bug in Ubuntu. LOL - https://support.mozilla.org/en-US/questions/1110965

[madeleineostoja]

For future reference - the bug was with processing rucksack's output into a single font declaration, rucksack's direct output fully supports Firefox.

[bespired]

https://developer.mozilla.org/en-US/docs/Web/CSS/font

My guess is that / in shorthand means line-height. line-height must immediately follow font-size, preceded by "/", like this: "16px/3"

Not sure how a browser should figure out if the / is a calc or a font-size/line-height separator.

There are more shorthands with / being : grid-area, grid-column, grid-row. But I'm no expert...