JSFiddle - React, Tailwind, and code Playground

by Amens

JavaScript

testconst numberUpTo = (from) => {
  return Math.floor(from * Math.random());
};

const randomize = (len = 10, base, firstLetter) => {
  let output = '';

  base = (base === true) ? 16 : (base || 10);

  if (firstLetter) {
    output = String.fromCharCode(numberUpTo(26) + 97);
  }

  while (output.length < len) {
    output += Math.random().toString(base).substr(2);
    output = output.substr(0, len);
  }

  return output;
};

///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////

let stylesMap = {};

const css = (strings, ...values) => {
let result = ``;
    
    // Receive **parts of the Template Literal in "strings"
    // and iterate them
    strings.map((value, index) => {
        // Note: "...values" will hold ${A}, ${B}, and ${C} or
        // list of values enumerating all Template Literals (${A},
        // ${B}, ...) from the TL string.
        // Get TL number at current index, but always avoid last
        // one, which will always be 'undefined':
        let N = (index <= values.length - 1) ? randomize(7, 36, true) : ``;
        stylesMap[values[index]] = N;
        // Rewrite digits to strings -- this is one of the benefits
        // of using Template Literal-based functions. That is...
        // reformatting the input:
        // Combine string and numbers and add to the tail of the
        // running string:
        result += value + N;
    });
    console.log(stylesMap);
    return result;
}

/* const css = (strings, ...selectors) => {
strings.map((value, index) => {
  // Note: "...values" will hold ${A}, ${B}, and ${C} or
        // list of values enumerating all Template Literals (${A},
        // ${B}, ...) from the TL string.
        // Get TL number at current index, but always avoid last
        // one, which will always be 'undefined':
        stylesMap[value[index]] = randomize(7, 36, true);
        let N = (index <= values.length - 1) ? values[index] : ``;
      ...