@amaui/style/esm/makeClassName.js

CSS in JS styling solution

import isEnvironment from '@amaui/utils/isEnvironment';
import { makeName } from './utils';
const optionsDefault = {
  production: isEnvironment('browser') || isEnvironment('nodejs') && ['prod', 'production'].indexOf(process.env.NODE_ENV) > -1
};
let amauiMakeClassNameInc = 0;

function makeClassName(amauiStyle) {
  var _amauiStyle$options;

  let options_ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const options = { ...optionsDefault,
    ...options_
  };
  const prefix = (amauiStyle === null || amauiStyle === void 0 ? void 0 : (_amauiStyle$options = amauiStyle.options) === null || _amauiStyle$options === void 0 ? void 0 : _amauiStyle$options.classNamePrefix) || ''; // If both dev and prod are false, then dev is true

  const production = options.production !== undefined ? options.production : optionsDefault.production;
  const makeNameMethodClassName = makeName();
  const makeNameMethodKeyframesName = makeName();

  const domUnique = value => {
    const allClassNames = [...new Set(Array.from(window.document.querySelectorAll('[class]')).flatMap(item => [...item.classList]))];
    return allClassNames.indexOf(value) === -1;
  };

  const method = function () {
    let method_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : makeNameMethodClassName;
    const made = [];
    return value_ => {
      const value = {
        arguments: {
          value: value_
        }
      }; // Make a class name
      // Production

      if (production) {
        value.value = "".concat(prefix).concat(method_.next().value);

        while (true) {
          var _options$dom;

          if (made.includes(value.value) || (_options$dom = options.dom) !== null && _options$dom !== void 0 && _options$dom.unique && !domUnique(value.value)) {
            value.value = "".concat(prefix).concat(method_.next().value);
          } else break;
        }
      } // Development
      else {
        value.value = "".concat(prefix).concat(value_.property, "-").concat(++amauiMakeClassNameInc);

        while (true) {
          var _options$dom2;

          if ((_options$dom2 = options.dom) !== null && _options$dom2 !== void 0 && _options$dom2.unique && !domUnique(value.value)) {
            value.value = "".concat(prefix).concat(value_ === null || value_ === void 0 ? void 0 : value_.property, "-").concat(++amauiMakeClassNameInc);
          } else break;
        }
      }

      made.push(value);
      return value;
    };
  };

  const methodClassName = method();
  const methodKeyframesName = method(makeNameMethodKeyframesName); // Add methods to subscriptions

  if (amauiStyle) {
    amauiStyle.subscriptions.className.name.subscribe(methodClassName);
    amauiStyle.subscriptions.keyframes.name.subscribe(methodKeyframesName);
  }

  const remove = () => {
    // Remove methods from subscriptions
    if (amauiStyle) {
      amauiStyle.subscriptions.className.name.unsubscribe(methodClassName);
      amauiStyle.subscriptions.keyframes.name.unsubscribe(methodKeyframesName);
    }
  };

  const response = {
    methods: {
      method: methodClassName
    },
    remove
  };
  return response;
}

export default makeClassName;