@onesy/style/esm/inline.js

CSS in JS styling solution

import Try from '@onesy/utils/try';
import OnesyStyle from './OnesyStyle';
import OnesyStyleSheetManager from './OnesyStyleSheetManager';
import OnesyTheme from './OnesyTheme';
import { cammelCaseToKebabCase, is, isOnesySubscription, kebabCasetoCammelCase } from './utils';
const optionsDefault = {
  onesy_style: {
    get: OnesyStyle.first.bind(OnesyStyle)
  },
  onesy_theme: {
    get: OnesyTheme.first.bind(OnesyTheme)
  },
  response: 'css',
  response_json_property_version: 'cammel'
};

function inline(value_, props) {
  let options_ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  const options = { ...optionsDefault,
    ...options_
  }; // 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_; // Go through all properties
  // make an OnesyStyleRuleProperty for each prop
  // and then make css string from each one

  let response = '';

  if (is('object', value)) {
    const properties = Object.keys(value);
    const valueNew = {}; // Filter out at-rule and dynamic properies

    properties.filter(prop => prop.indexOf('@') !== 0 && !(is('function', value[prop]) || isOnesySubscription(value[prop]))).forEach(prop => valueNew[prop] = value[prop]); // Parse dynamic properties into static

    const propertiesDynamic = properties.filter(prop => prop.indexOf('@') !== 0 && (is('function', value[prop]) || isOnesySubscription(value[prop])));
    propertiesDynamic.forEach(prop => {
      const valueProp = value[prop];
      if (is('function', valueProp)) valueNew[prop] = Try(() => valueProp(props));else if (isOnesySubscription(valueProp)) valueNew[prop] = Try(() => valueProp.value);
    }); // Make an instance of onesyStyleSheetManager

    const onesyStyleSheetManager = new OnesyStyleSheetManager({
      a: valueNew
    }, {
      mode: 'regular',
      pure: false,
      priority: 'upper',
      onesyTheme,
      onesyStyle,
      onesy_style_cache: false,
      style: {
        attributes: {
          method: 'inline'
        }
      }
    });
    const rules = onesyStyleSheetManager.sheets.static[0].rules[0].value.rules;
    rules.map(rule => rule.value).forEach(rule => response += " ".concat(rule.css)); // Make into json

    if (options.response === 'json') {
      const values = response.split(';').filter(Boolean);
      response = {};
      values.forEach(item => {
        var _property, _value__;

        let [property, value__] = item.split(':').filter(Boolean);
        property = (_property = property) === null || _property === void 0 ? void 0 : _property.trim();
        value__ = (_value__ = value__) === null || _value__ === void 0 ? void 0 : _value__.trim();

        if (property && value__) {
          response[options.response_json_property_version === 'cammel' ? kebabCasetoCammelCase(property) : cammelCaseToKebabCase(property)] = value__;
        }
      });
    }
  }

  if (options.response === 'css') response = response.trim(); // Response

  return response;
}

export default inline;