@amaui/style/esm/inline.js

CSS in JS styling solution

import Try from '@amaui/utils/try';
import AmauiStyle from './AmauiStyle';
import AmauiStyleSheetManager from './AmauiStyleSheetManager';
import AmauiTheme from './AmauiTheme';
import { cammelCaseToKebabCase, is, isAmauiSubscription, kebabCasetoCammelCase } from './utils';
const optionsDefault = {
  amaui_style: {
    get: AmauiStyle.first.bind(AmauiStyle)
  },
  amaui_theme: {
    get: AmauiTheme.first.bind(AmauiTheme)
  },
  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_
  }; // 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_; // Go through all properties
  // make an AmauiStyleRuleProperty 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]) || isAmauiSubscription(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]) || isAmauiSubscription(value[prop])));
    propertiesDynamic.forEach(prop => {
      const valueProp = value[prop];
      if (is('function', valueProp)) valueNew[prop] = Try(() => valueProp(props));else if (isAmauiSubscription(valueProp)) valueNew[prop] = Try(() => valueProp.value);
    }); // Make an instance of amauiStyleSheetManager

    const amauiStyleSheetManager = new AmauiStyleSheetManager({
      a: valueNew
    }, {
      mode: 'regular',
      pure: false,
      priority: 'upper',
      amauiTheme,
      amauiStyle,
      amaui_style_cache: false,
      style: {
        attributes: {
          method: 'inline'
        }
      }
    });
    const rules = amauiStyleSheetManager.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;