@amaui/style/esm/AmauiStyle.js

CSS in JS styling solution

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import copy from '@amaui/utils/copy';
import element from '@amaui/utils/element';
import isEnvironment from '@amaui/utils/isEnvironment';
import merge from '@amaui/utils/merge';
import Try from '@amaui/utils/try';
import AmauiSubscription from '@amaui/subscription';
import AmauiMeta from '@amaui/meta';
import AmauiStyleRenderer from './AmauiStyleRenderer';
import { getID, is, minify } from './utils';
const optionsDefault = {
  mode: 'regular',
  rule: {
    sort: true,
    prefix: true,
    rtl: false
  },
  minify: true,
  optimize: false,
  classNamePrefix: ''
};

class AmauiStyle {
  // Any new property
  constructor() {
    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : copy(optionsDefault);

    _defineProperty(this, "mode", 'regular');

    _defineProperty(this, "subscriptions", {
      className: {
        pre: new AmauiSubscription(),
        name: new AmauiSubscription(),
        post: new AmauiSubscription()
      },
      keyframes: {
        pre: new AmauiSubscription(),
        name: new AmauiSubscription(),
        post: new AmauiSubscription()
      },
      rule: {
        pre: new AmauiSubscription(),
        unit: new AmauiSubscription(),
        value: new AmauiSubscription(),
        prefix: new AmauiSubscription(),
        rtl: new AmauiSubscription(),
        add: new AmauiSubscription(),
        update: new AmauiSubscription(),
        update_props: new AmauiSubscription(),
        remove: new AmauiSubscription(),
        post: new AmauiSubscription()
      },
      rules: {
        sort: new AmauiSubscription()
      },
      sheet: {
        add: new AmauiSubscription(),
        update: new AmauiSubscription(),
        update_props: new AmauiSubscription(),
        remove: new AmauiSubscription()
      },
      sheet_manager: {
        add: new AmauiSubscription(),
        update: new AmauiSubscription(),
        update_props: new AmauiSubscription(),
        remove: new AmauiSubscription()
      }
    });

    _defineProperty(this, "values", {
      css: ''
    });

    _defineProperty(this, "refs", {});

    _defineProperty(this, "sheets", []);

    _defineProperty(this, "sheet_managers", []);

    this.options = options;
    this.options = merge(options, optionsDefault, {
      copy: true
    });
    this.init();
  }

  get response() {
    this.values.css = "";
    this.sheets.forEach(sheet => {
      const css = sheet.css;

      if (css) {
        this.values.css += css;
      }
    });
    if (this.values.css) this.values.css = "\n".concat(this.values.css, "\n");
    if (this.options.minify) this.values.css = minify(this.values.css);
    return this.values;
  }

  get css() {
    return this.response.css;
  }

  get plugins() {
    const amauiStyle = this;
    return {
      // Add plugins
      set add(value_) {
        const value = is('array', value_) ? value_ : [value_];
        value.filter(item => is('object', item) && is('function', item.method) && !AmauiMeta.get(item.method, amauiStyle, 'plugin') || is('function', item) && !AmauiMeta.get(item, amauiStyle, 'plugin')).forEach(item => {
          try {
            const method = is('function', item) ? item : item.method;
            const args = is('object', item) ? item.arguments : [];
            const response = method(amauiStyle, ...args);
            AmauiMeta.add(method, response, amauiStyle, 'plugin');
          } catch (error) {
            console.error('AmauiStyle use: ', error);
          }
        });
      },

      // Remove plugins
      set remove(value_) {
        const value = is('array', value_) ? value_ : [value_];
        value.filter(item => is('object', item) && is('function', item.method) && !AmauiMeta.get(item.method, amauiStyle, 'plugin') || is('function', item) && !AmauiMeta.get(item, amauiStyle, 'plugin')).forEach(item => {
          try {
            const method = is('function', item) ? item : item.method;
            const response = AmauiMeta.get(method, amauiStyle, 'plugin');
            if (is('function', response === null || response === void 0 ? void 0 : response.remove)) response.remove();
          } catch (error) {
            console.error('AmauiStyle remove plugin: ', error);
          }
        });
      }

    };
  }

  init() {
    // Options
    this.element = this.options.element || this.element;
    this.mode = this.options.mode || 'regular';
    this.renderer = this.options.renderer || new AmauiStyleRenderer();
    if (this.id === undefined) this.id = getID();

    if (isEnvironment('browser')) {
      if (!this.element) this.element = window.document.body; // AmauiStyle in element

      this.element.setAttribute('data-amaui-style', 'true');
      this.element['amaui-style'] = true;
      this.element.amaui_style = this; // Ltr

      const style = Try(() => window.getComputedStyle(this.element));
      this.direction = (style === null || style === void 0 ? void 0 : style.direction) || Try(() => window.getComputedStyle(document.documentElement).direction) || 'ltr';
      this.options.rule.rtl = this.direction === 'rtl';
    }
  }

  static get(value) {
    let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    const themes = this.all(value);
    return themes[index === -1 ? themes.length - 1 : index];
  }

  static first(value) {
    return this.get(value);
  }

  static last(value) {
    return this.get(value, -1);
  }

  static nearest(value) {
    var _element$nearest;

    return (_element$nearest = element(value).nearest(this.attributes.map(item => "[".concat(item, "]")))) === null || _element$nearest === void 0 ? void 0 : _element$nearest.amaui_style;
  }

  static furthest(value) {
    var _element$furthest;

    return (_element$furthest = element(value).furthest(this.attributes.map(item => "[".concat(item, "]")))) === null || _element$furthest === void 0 ? void 0 : _element$furthest.amaui_style;
  }

  static all(value) {
    const elements = [value, ...element(value).parents(this.attributes.map(item => "[".concat(item, "]")))];
    return elements.filter(Boolean).map(item => item.amaui_style).filter(Boolean) || [];
  }

}

_defineProperty(AmauiStyle, "counter", {
  className: 0,
  keyframesName: 0
});

_defineProperty(AmauiStyle, "attributes", ['data-amaui-style', 'amaui-style']);

export default AmauiStyle;