tumblr css map pasteable 3 mini.js

tumblr.getCssMap().then((s=>{const o=(s,o)=>"📝"+o,t="•",c={};for(const[o,t]of Object.entries(s))for(const s of t)c[s]=o;const n=document.querySelectorAll(`[class]:not(.${t})`);for(const s of n){const n=[];for(const t of s.classList.values()){const s=c[t];s&&n.push(o(t,s))}s.classList.add(t,...n)}}));

tumblr css map pasteable 3.js

tumblr.getCssMap().then((cssMap) => {
  const options = {
    // Choose how you would like each translated class formatted.
    // Yes, emoji are supported! Avoid punctuation and whitespace.
    format: (originalCss, mappedCss) => '📝' + mappedCss,

    // This class gets added to almost every DOM element.
    // It's nice to make it short for the 𝒶𝑒𝓈𝓉𝒽𝑒𝓉𝒾𝒸.
    markerClass: '•',
  };

  const reverseCssMap = {};
  for (const [key, values] of Object.entries(cssMap)) {
    for (const value of values) {
      reverseCssMap[value] = key;
    }
  }
  const elements = document.querySelectorAll(`[class]:not(.${options.markerClass})`);
  for (const element of elements) {
    const classes = [];
    for (const css of element.classList.values()) {
      const mappedCss = reverseCssMap[css];
      if (mappedCss) {
        classes.push(options.format(css, mappedCss));
      }
    }
    element.classList.add(options.markerClass, ...classes);
  }
  console.log(`added css map to ${elements.length} elements`);
});