CSS custom properties polyfill for ie11

Question

Is there a way to pollyfill a custom CSS property for ie11 with JavaScript? I was thinking on load, check if browser supports custom properties and if not do some kind of find and replace on the properties.

Is this possible with JavaScript or some library?

Thanks

Answer 1

You didn't mention how you're bundling your JavaScript, but yes, it's possible. For example, PostCSS has a plugin, which polyfills this feature.

The usage depends on how you're bundling your script files. With Webpack, for example, you'd define this plugin in your postcss config or import it as a plugin under your webpack config:

// webpack.config.js:
module.exports = {
  module: {
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader", "postcss-loader"]
        }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-custom-properties'),
    require('autoprefixer'),
    // any other PostCSS plugins
  ]
}

The plugin also has an example for programmatic usage (as a separate node script):

// dependencies
var fs = require('fs')
var postcss = require('postcss')
var customProperties = require('postcss-custom-properties')

// css to be processed
var css = fs.readFileSync('input.css', 'utf8')

// process css using postcss-custom-properties
var output = postcss()
  .use(customProperties())
  .process(css)
  .css