JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true,useNativeCSSProperties: false};</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">

<paper-input></paper-input>
<paper-dropdown-menu></paper-dropdown-menu>

JavaScript

function assert(cond) {
  if (!cond)
    throw new Error('Failed: ' + cond);
}

function checkMixins() {
  var mixins = new Map();
  var mixinPropRe = new RegExp(/[\s{};]\-\-([\w\-]+)_-_([\w\-]+)\s*:/g);
  var mixinAppliedPropRe = new RegExp(/[\s{};]([\w\-]+)\s*:\s*var\(\s*\-\-([\w\-]+)_-_\1\s*[,)]/g); 
  function parseStyle(style) {
    var match;
    while (match = mixinPropRe.exec(style.innerText)) {
      assert(match.length == 3);
      var mixinName = match[1];
      var mixinProp = match[2];
      if (!mixins.has(mixinName))
        mixins.set(mixinName, new Map());
      var mixin = mixins.get(mixinName);
      if (!mixin.has(mixinProp))
        mixin.set(mixinProp, {valueSet: true, applied: false});
      else
        mixin.get(mixinProp).valueSet = true;
    }
    while (match = mixinAppliedPropRe.exec(style.innerText)) {
      assert(match.length == 3);
      var mixinProp = match[1];
      var mixinName = match[2];
      if (!mixins.has(mixinName))
        mixins.set(mixinName, new Map());
      var mixin = mixins.get(mixinName);
      if (!mixin.has(mixinProp)) {
        var valueSetOnBody = getComputedStyle(document.body).getPropertyValue('--' + mixinName + '_-_' + mixinProp) != '';
        mixin.set(mixinProp, {valueSetOnBody: valueSetOnBody, valueSet: false, applied: true});
      } else {
        mixin.get(mixinProp).applied = true;
      }
    }
  }
  
  var styles = document.querySelectorAll('style, * /deep/ style');
  console.log('Processing ' + styles.length + ' styles...')
  styles.forEach(parseStyle);
  
  mixins.forEach(function(mixin, mixinName) {
    mixin.forEach(function(detail, mixinProp) {
      if (detail.valueSet && !detail.applied)
        console.warn('Property "' + mixinProp + '" set for --' + mixinName + ' but never applied');
      else if (!detail.valueSet && !detail.valueSetOnBody)
        console.error('Property "' + mixinProp + '" never set for --' + mixinName + '... is such a thing even possible?');
    });
  });
  
 ...