styled-components/lib/models/ComponentStyle.js

**This is a work in progress** based off of [this demo](https://github.com/geelen/css-components-demo).

'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; }; }();

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

var _hash2 = _interopRequireDefault(_hash);

var _sheet = require('../vendor/glamor/sheet');

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

var _flatten2 = _interopRequireDefault(_flatten);

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

var _parse2 = _interopRequireDefault(_parse);

var _postcssNested = require('../vendor/postcss-nested');

var _postcssNested2 = _interopRequireDefault(_postcssNested);

var _toEmoji = require('../utils/toEmoji');

var _toEmoji2 = _interopRequireDefault(_toEmoji);

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 styleSheet = new _sheet.StyleSheet({ speedy: false, maxLength: 40 });
var inserted = {};

/*
 ComponentStyle is all the CSS-specific stuff, not
 the React-specific stuff.
 */

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

    this.rules = rules;
    if (!styleSheet.injected) styleSheet.inject();
    this.insertedRule = styleSheet.insert('');
  }

  /*
   * Flattens a rule set into valid CSS
   * Hashes it, wraps the whole chunk in a ._hashName {}
   * Parses that with PostCSS then runs PostCSS-Nested on it
   * Returns the hash to be injected on render()
   * */


  _createClass(ComponentStyle, [{
    key: 'generateAndInjectStyles',
    value: function generateAndInjectStyles(executionContext) {
      var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
      var hash = (0, _hash2.default)(flatCSS);
      if (!inserted[hash]) {
        var selector = (0, _toEmoji2.default)(hash);
        inserted[hash] = selector;
        var root = (0, _parse2.default)('.' + selector + ' { ' + flatCSS + ' }');
        (0, _postcssNested2.default)(root);
        this.insertedRule.appendRule(root.toResult().css);
      }
      return inserted[hash];
    }
  }]);

  return ComponentStyle;
}();

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