@amaui/style/esm/style.js

CSS in JS styling solution

import merge from '@amaui/utils/merge';
import Try from '@amaui/utils/try';
import AmauiStyle from './AmauiStyle';
import AmauiStyleSheetManager from './AmauiStyleSheetManager';
import AmauiTheme from './AmauiTheme';
import { is } from './utils';
const optionsDefault = {
  mode: 'regular',
  amaui_style: {
    get: AmauiStyle.first.bind(AmauiStyle)
  },
  amaui_theme: {
    get: AmauiTheme.first.bind(AmauiTheme)
  }
};

function style(value_) {
  let options_ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const options = merge(options_, optionsDefault, {
    copy: true
  }); // Amaui style

  let amauiStyle = options.amaui_style.value || is('function', options.amaui_style.get) && options.amaui_style.get(options.element);
  if (amauiStyle === undefined) amauiStyle = new AmauiStyle(); // Amaui theme

  const amauiTheme = options.amaui_theme.value || is('function', options.amaui_theme.get) && options.amaui_theme.get(options.element); // Make value if it's a function

  const value = is('function', value_) ? Try(() => value_(amauiTheme)) : value_; // Make an instance of amauiStyleSheetManager

  const amauiStyleSheetManager = new AmauiStyleSheetManager(value, {
    mode: options.mode,
    pure: false,
    priority: 'upper',
    amauiTheme,
    amauiStyle,
    name: options.name,
    style: {
      attributes: {
        method: 'style'
      }
    }
  });
  const response = {
    ids: amauiStyleSheetManager.ids,
    amaui_style_sheet_manager: amauiStyleSheetManager,
    sheets: amauiStyleSheetManager.sheets,
    add: amauiStyleSheetManager.add.bind(amauiStyleSheetManager),

    set props(value__) {
      amauiStyleSheetManager.props = value__;
    },

    update: amauiStyleSheetManager.update.bind(amauiStyleSheetManager),
    remove: amauiStyleSheetManager.remove.bind(amauiStyleSheetManager),
    addRule: amauiStyleSheetManager.sheets.static[0] && amauiStyleSheetManager.sheets.static[0].addRule.bind(amauiStyleSheetManager.sheets.static[0])
  }; // if add

  if (options.add) {
    const addResponse = response.add(); // return

    return options.return ? addResponse[options.return] || addResponse : addResponse;
  } // Response


  return response;
}

export default style;