@onesy/style/esm/style.js

CSS in JS styling solution

import merge from '@onesy/utils/merge';
import Try from '@onesy/utils/try';
import OnesyStyle from './OnesyStyle';
import OnesyStyleSheetManager from './OnesyStyleSheetManager';
import OnesyTheme from './OnesyTheme';
import { is } from './utils';
const optionsDefault = {
  mode: 'regular',
  onesy_style: {
    get: OnesyStyle.first.bind(OnesyStyle)
  },
  onesy_theme: {
    get: OnesyTheme.first.bind(OnesyTheme)
  }
};

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

  let onesyStyle = options.onesy_style.value || is('function', options.onesy_style.get) && options.onesy_style.get(options.element);
  if (onesyStyle === undefined) onesyStyle = new OnesyStyle(); // Onesy theme

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

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

  const onesyStyleSheetManager = new OnesyStyleSheetManager(value, {
    mode: options.mode,
    pure: false,
    priority: 'upper',
    onesyTheme,
    onesyStyle,
    name: options.name,
    style: {
      attributes: {
        method: 'style'
      }
    }
  });
  const response = {
    ids: onesyStyleSheetManager.ids,
    onesy_style_sheet_manager: onesyStyleSheetManager,
    sheets: onesyStyleSheetManager.sheets,
    add: onesyStyleSheetManager.add.bind(onesyStyleSheetManager),

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

    update: onesyStyleSheetManager.update.bind(onesyStyleSheetManager),
    remove: onesyStyleSheetManager.remove.bind(onesyStyleSheetManager),
    addRule: onesyStyleSheetManager.sheets.static[0] && onesyStyleSheetManager.sheets.static[0].addRule.bind(onesyStyleSheetManager.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;