css-calc-polyfill

css-calc-polyfill

CSS3 calc polyfill.

This project is based on calc-polyfill and viewport-units-buggyfill. It aims to do calc polyfill by the viewport-units-buggyfill hack approach:

• use postcss-viewport-units to automatically append unsupported calc declarations to content declaration
• init this polyfill so it could retrieve all preserved calc declarations
• internally refresh so changed elements could get proper styles

Install

$ npm install -D css-calc-polyfill

Usage

import { init, process, refresh } from 'css-calc-polyfill';

const refreshCalc = () => {
  setTimeout(() => {
    refresh();
    refreshCalc();
  }, 1000);
};

document.addEventListener('DOMContentLoaded', () => {
  init({
    contentPrefix: 'viewport-units-buggyfill;' // reuse `postcss-viewport-units` prefix
  });
  process(); // first run, also boot `calc` declaration cache
  refreshCalc(); // internally refresh element styles using cache
});

License

MIT