create PostCSS processor to generate content: … hack properties

[rodneyrehm]

In a build pipeline this would work very much like Autoprefixer - refactoring CSS after it's gone through SASS/LESS/whatever, adding the missing pieces.

Based on PostCSS a "simple" processor could identify all the rules using viewport units (e.g. width: 50vw;), aggregate them into a content: "viewport-units-buggyfill; width: 50vw;"; property and add them back to the declaration block. The processor should also check for the existence of the content property an issue a warning/error if one were created on generated content.

This would automate turning

.some-selector {
  width: 50vw;
}

into

.some-selector {
  width: 50vw;
  content: "viewport-units-buggyfill; width: 50vw;";
}

thus making viewport units work "immediately" in old Android Stock Browsers (amongst others).

[henryruhs]

👍

[extractachris]

👍

[springuper]

I've created such a postcss plugin today as I also need one. Please take a look and give some suggestions.

https://github.com/springuper/postcss-viewport-units.

How to handle a css rule which already has a content property? Currently my plugin just send out a warning. I think a better way is to append our hack strings and dynamically remove it when hack script runs.

[mieszko4]

Postcss plugin looks great! I created a sass mixin. Perhaps could be be of someone's use:

@mixin buggyfy($properties) {
  $content: "viewport-units-buggyfill;";
  @each $property, $value in $properties {
    #{$property}: $value;
    $content: "#{$content}#{$property}:#{$value};";
  }
  content: $content;
}

body {
  @include buggyfy((
    width: 50vmin,
    height: 50vmax,
    top: calc(50vh - 100px),
    left: calc(50vw - 100px)
  ));
}