JSFiddle - React, Tailwind, and code Playground

by mtsgi

HTML

<header>
  <a .header-logo>Writedown</a>
</header>
<div .message>
  This is example of <span #wd>writedown.js</span>!
</div>

<input type="text" .dark />
<button .button #ok>
  OK
</button>

<button .button.orange-button>
  OK
</button>

SCSS

body {
  margin: 0;
}
header {
  background: #303030;
  padding: 8px;
  .header-logo {
    cursor: pointer;
    text-decoration: underline;
    color: skyblue;
    font-size: 18px;
  }
}
.message {
  padding: 20px 8px;
  #wd {
    font-size: .85em;
    padding: 2px 4px;
    background: #f0f0f0;
    font-family: monospace;
  }
}
input.dark {
  padding: 8px;
  background: #404040;
  color: #f0f0f0;
}
.button {
  background: dodgerblue;
  color: white;
  border: none;
  padding: 8px;
}
.orange-button {
  background: orange;
}

#ok::after {
  color: red;
  content: ":)";
}

JavaScript

"use strict";

document.querySelectorAll('*').forEach(node => {
  if (node.hasAttributes()) {
    let attrs = [], classes = [], id = null;
    for (const attr of node.attributes) {
      switch (attr.name[0]) {
        case '.':
          classes.push(...attr.name.substring(1).split('.'));
          attrs.push(attr.name);
          break;
        case '#':
          console.warn(attr.name.substring(1));
          id = attr.name.substring(1);
          attrs.push(attr.name);
          break;
      }
    }
    console.log('削除する属性', attrs);
    console.log('付与するクラス', classes);
    console.log('付与するID', id);
    for (const a of attrs) { node.removeAttribute(a) }
    node.classList.add(...classes);
    if (id) node.id = id;
  }
});