styled-components/lib/models/InlineStyle.js

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
/* eslint-disable import/no-unresolved */


var _hash = require('glamor/lib/hash');

var _hash2 = _interopRequireDefault(_hash);

var _camelizeStyleName = require('fbjs/lib/camelizeStyleName');

var _camelizeStyleName2 = _interopRequireDefault(_camelizeStyleName);

var _reactNative = require('react-native');

var _flatten = require('../utils/flatten');

var _flatten2 = _interopRequireDefault(_flatten);

var _parse = require('../vendor/postcss-safe-parser/parse');

var _parse2 = _interopRequireDefault(_parse);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var generated = {};

/* Whitelist of properties that need string values even when they're numbers */
var propNeedsStrings = {
  'font-weight': true
};

/*
 InlineStyle takes arbitrary CSS and generates a flat object
 */

var InlineStyle = function () {
  function InlineStyle(rules) {
    _classCallCheck(this, InlineStyle);

    this.rules = rules;
  }

  _createClass(InlineStyle, [{
    key: 'generateStyleObject',
    value: function generateStyleObject(executionContext) {
      var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
      var hash = (0, _hash2.default)(flatCSS);
      if (!generated[hash]) {
        (function () {
          var root = (0, _parse2.default)(flatCSS);
          var styleObject = {};
          root.each(function (node) {
            if (node.type === 'decl') {
              var value = node.value;

              var isNumber = value !== '' && !isNaN(value);
              var typedVal = isNumber && !propNeedsStrings[node.prop] ? parseFloat(value) : value;
              styleObject[(0, _camelizeStyleName2.default)(node.prop)] = typedVal;
            } else {
              /* eslint-disable no-console */
              console.warn('Node of type ' + node.type + ' not supported as an inline style');
            }
          });
          var styles = _reactNative.StyleSheet.create({
            generated: styleObject
          });
          generated[hash] = styles.generated;
        })();
      }
      return generated[hash];
    }
  }]);

  return InlineStyle;
}();

exports.default = InlineStyle;
module.exports = exports['default'];