Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/modules / ___dist / view-container / deps / fromStylesToObj.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.transform = exports.fromStyleStringToObj = transform;
exports.default = void 0;

var _css = _interopRequireDefault(require("./css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @file
 * @see https://reactjs.org/docs/dom-elements.html
 * @author https://github.com/raphamorim/native-css
 * @author https://github.com/staxmanade/CssToReact/blob/gh-pages/src/transform.js
 */
function transformRules(context, rules, result) {
  /**
   * @todo split up
   */
  // eslint-disable-next-line
  const handleRule = rule => {
    const obj = {};

    const handleDeclaration = declaration => {
      if (declaration.type === 'declaration') {
        const cleanProperty = cleanPropertyName(declaration.property);
        obj[cleanProperty] = declaration.value;
      }
    };

    const handleSelector = selector => {
      const trimmed = selector.trim();
      const name = nameGenerator(trimmed);
      result[name] = obj;
    };

    switch (rule.type) {
      case 'media':
        {
          const name = mediaNameGenerator(rule.media);
          const media = result[name] = result[name] || {
            '__expression__': rule.media
          };
          transformRules(context, rule.rules, media);
          break;
        }

      case 'rule':
        {
          rule.declarations.forEach(handleDeclaration);
          rule.selectors.forEach(handleSelector);
          break;
        }

      default:
        break;
    }
  };

  rules.forEach(handleRule);
}
/**
 * @param {String} name
 * @return {String}
 */


function cleanPropertyName(name) {
  // turn things like 'align-items' into 'alignItems'
  return name.replace(/(-.)/g, replacee => replacee[1].toUpperCase());
}

function mediaNameGenerator(name) {
  return '@media ' + name;
}
/**
 * @todo split media queries
 * @param {String} nameOriginal
 * @return {String}
 */


function nameGenerator(nameOriginal) {
  let name = nameOriginal; // multispaces into 1

  name = name.replace(/\s\s+/g, ' '); // this turns stuff like .eh:hover =>.eh_hover -- react does not have this as lifecycle inline
  // @todo so likely it should re-parse this into a nested selector, and we can  use something with better support in interim if needed
  // or we can use a getter, which checks props simply

  name = name.replace(/[^a-zA-Z0-9]/g, '_'); // @todo - first it replaces multiple at the start, then multiple anywhere?!

  name = name.replace(/^_+/g, '');
  name = name.replace(/_+$/g, '');
  return name;
} // eslint-disable-next-line


function transform(raw) {
  // if (isString(inputCssText) === false && inputCssText.styles === undefined) {
  //   throw new Error('missing css text to transform')
  // }

  /**
   * @description call toString
   * @type {String}
   */
  let styleString = `${raw}`; // If the input "css" doesn't wrap it with a css class (raw styles)
  // we need to wrap it with a style so the css parser doesn't choke.

  let namespacedStyles = false; // .startsWith?

  if (raw.indexOf('{') === -1) {
    namespacedStyles = true;
    styleString = `.namespacedStyles { ${styleString} }`;
  }

  const css = _css.default.parse(styleString);

  let result = {};
  transformRules(this, css.stylesheet.rules, result); // Don't expose the implementation detail of our wrapped css class.

  if (namespacedStyles === true) {
    result = result.namespacedStyles;
  }

  return result;
}

if (typeof window === 'object') {
  window.fromStyleStringToObj = transform;
}

var _default = transform;
exports.default = _default;