<div id="app"></div>

// 创建一个随机名称函数
function createRandomName() {
  const code = Math.random().toString(36).substring(7);
  return `css-${code}`;
}

// 创建一个样式编译的函数
function phraseStyle(style) {
  const keys = Object.keys(style);
  const keyValue = keys.map(key => {
    const kebabCaseKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
    const value = `${style[key]}${typeof style[key] === 'number' ? 'px' : ''}`;
    return `${kebabCaseKey}:${value};`;
  })
  return `{${keyValue.join('')}}`;
}

// 创建类名名称函数
function createClassName(style) {
  const className = createRandomName();
  let styleSheet;
  for (let i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].CSSInJS) {
      styleSheet = document.styleSheets[i];
      break;
    }
  }

  if (!styleSheet) {
    const style = document.createElement('style');
    document.head.appendChild(style);
    styleSheet = style.sheet;
    styleSheet.CSSInJS = true;
  }

  styleSheet.insertRule(`.${className}${phraseStyle(style)}`);
  return className;
}
    
const el = document.getElementById('app');
const styleRules = createClassName({
    width: 300,
    height: 200,
    backgroundColor: '#f36'
})

el.classList.add(styleRules)