postcss-var-shim

v0.5.7

Published

4 years ago

PostCSS plugin to generate a CSS var shim.

0High
0Medium
0Low

luwes

postcss css postcss-plugin js

PostCSS Var Shim

PostCSS plugin to generate a custom CSS var shim

.foo {
    color: var(--primary-color) !important;
}

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.cssVarShim=e()}(this,function(){"use strict";function t(t,e){return(e=e||document).querySelectorAll(t)}function e(t){return u(t).reduce(function(t,n){return t.concat(n.cssRules?e(n.cssRules):n)},[])}function n(t,e,n){n=n||[];for(var r;null!==(r=e.exec(t));)n.push(r),e.lastIndex=r.index+r[0].length;return n}function r(t){return function(e){t.apply(this,e)}}function o(t,e){return e.reduce(function(t,e){return t?t[e]:void 0},t)}function c(t){return t=t||{},function(e){return t[e]=isNaN(t[e])?0:t[e]+1,t[e]}}function u(t){return[].slice.call(t)}function s(t){"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t)}return function(i){function a(t,e){var r=n(t,/--[^\s,)]+/g);return r.length&&r.forEach(function(n){var r=n[0],c=o(e,[r]);if(c){var u=new RegExp("var\\("+r+"(,[^)]+)?\\)");t=t.replace(u,c),t=a(t,e)}}),t}function f(e,n,r,o){var c=[document.documentElement];o&&":root"===o||(c=t(o)),u(c).forEach(function(t){t.style.setProperty(e,n,r||null,t)})}if(!(window.CSS&&CSS.supports&&CSS.supports("--a",0))){window.cssVarCache={};var l=CSSStyleDeclaration.prototype.setProperty;CSSStyleDeclaration.prototype.setProperty=function(n,s,f,d){if(/^--/.test(n)){window.cssVarCache[n]=s;var p=c();e(document.styleSheets).forEach(function(e){var c=e.selectorText,s=o(i.getVars,[n,c,p(c)]);s&&s.forEach(r(function(n,r,o){var s=a(r,window.cssVarCache);d?u(t(c)).forEach(function(t){d.contains(t)&&t.style.setProperty(n,s,o||null)}):e.style.setProperty(n,s,o||null)}))})}else l.call(this,n,s,f)},i.setVars.forEach(r(f)),s(function(){u(t('[data-style*="--"]')).forEach(function(t){var e=n(t.getAttribute("data-style"),/(--[^:]+)\s*:\s*([^;]+)/g);e.length&&e.forEach(r(function(e,n,r){t.style.setProperty(n,r,null,t)}))})})}}});
cssVarShim({
  "--primary-color": { 
    ".foo": { 
      "0": [["color","var(--primary-color)","important"]]
    }
  }
});

The shim consists of 2 parts, the css var shim script (2.36kb minified) and a css var map which is created from the stylesheets you pass in this plugin.

Features

Sets CSS vars at runtime
Sets CSS vars via element.style.setProperty()
Gets CSS vars via element.style.getPropertyValue()
Adds fallback for HTML inline CSS vars

Install

npm install --save-dev postcss-var-shim

Usage

postcss([ require('postcss-var-shim')({
    mapFile: 'css-var-map.js',
    shimFile: 'css-var-shim.js'
}) ])

Add to HTML page

Unfortunately IE conditional comments were removed since IE11. If you don't mind an extra request you can add the shim directly to the head.

<head>
    <link rel="stylesheet" href="app.css">
    <script src="css-var-shim.js"></script>

Alternatively add the shim dynamically with something like this. This has the drawback that if the HTML page is rendered before the shim gets executed a FOUC is seen.

<head>
    <link rel="stylesheet" href="app.css">
    <script>
        var cssVarSupport = window.CSS && CSS.supports && CSS.supports('--a', 0);
        cssVarSupport = false;
        if (!cssVarSupport) {
            var cssVarScript = document.createElement('script');
            cssVarScript.src = 'css-var-shim.js';
            cssVarScript.async = false;
            var firstScript = document.getElementsByTagName('script')[0];
            firstScript.parentNode.insertBefore(cssVarScript, firstScript);
        }
    </script>

API

Set a custom CSS property

On the :root selector

document.documentElement.style.setProperty(propertyName, value, 'important');

On a specific element

myelement.style.setProperty(propertyName, value, null, myelement);

Warning: the specific element is passed as a 4th argument. This does not follow the official API but was needed to make the shim work.

Get a custom CSS property value

On the :root selector

document.documentElement.style.getPropertyValue(propertyName);

On a specific element

myelement.style.getPropertyValue(propertyName, myelement);

Warning: the specific element is passed as a 2nd argument. This does not follow the official API but was needed to make the shim work.

Inline custom CSS properties

Normally it is possible to set custom CSS properties in the HTML style attribute for specific elements. Because IE and early Edge does not support them they are discarded at parsing.

A workaround that this shim provides is to define the custom CSS properties in a data-style attribute. This way they can be accessed by the shim and set when the DOM is ready.

<div style="--primary-color: #F44336; --primary-color-text: #FFF;" data-style="--primary-color: #F44336; --primary-color-text: #FFF;"></div>

Support

Adds support for CSS Custom Properties to:

Internet Explorer 11
Edge 12
Edge 13
Edge 14

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme