react-style-tag - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

lib/index.js

@@ -32,3 +32,31 @@ 'use strict';
 
+var URL = window.URL || window.webkitURL;
+var HAS_BLOB_SUPPORT = !!(window.Blob && typeof window.Blob === 'function' && URL.createObjectURL) && function (win) {
+  try {
+    new win.Blob();
+
+    return true;
+  } catch (exception) {
+    return false;
+  }
+}(window);
+var NO_BLOB_SUPPORT_ERROR = '\nTo support sourcemaps for react-style-tag you need Blob support, and the browser you are using does not currently \nsupport it. Please import the included polyfill at \'react-style-tag/blob-polyfill.js\'.\n'.replace(/\r?\n|\r/, '');
+var ONLY_TEXT_ERROR = 'The only type of child that can be used in the <Style/> tag is text.';
+
 /**
+ * get the (if applicable) prefixed and minified css based on the
+ * original cssText
+ *
+ * @param {string} cssText
+ * @param {boolean} doNotPrefix
+ * @param {boolean} isMinified
+ * @returns {string}
+ */
+var getTransformedCss = function getTransformedCss(cssText, doNotPrefix, isMinified) {
+  var transformedCss = doNotPrefix ? cssText : (0, _transform.prefixCss)(cssText);
+
+  return isMinified ? (0, _transform.minify)(transformedCss) : transformedCss;
+};
+
+/**
  * determine if object is a string
@@ -43,2 +71,13 @@ *
 
+/**
+ * throw an error if the provided children is not a text node
+ *
+ * @param {*} children
+ */
+var throwErrorIfIsNotText = function throwErrorIfIsNotText(children) {
+  if (!isString(children)) {
+    throw new Error(ONLY_TEXT_ERROR);
+  }
+};
+
 var Style = function (_Component) {
@@ -56,3 +95,18 @@ _inherits(Style, _Component);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.setStyleTag = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.removeTagFromHead = function (tagType) {
+      var tag = _this.refs[tagType];
+
+      if (tag) {
+        document.head.removeChild(tag);
+      }
+    }, _this.setCorrectTag = function () {
+      var hasSourceMap = _this.props.hasSourceMap;
+
+
+      if (hasSourceMap) {
+        _this.setLinkTag();
+      } else {
+        _this.setStyleTag();
+      }
+    }, _this.setLinkTag = function () {
       var _this$props = _this.props;
@@ -64,11 +118,34 @@ var children = _this$props.children;
 
-      if (!isString(children)) {
-        throw new Error('The only type of child that can be used in the <Style/> tag is text.');
+      throwErrorIfIsNotText(children);
+
+      _this.removeTagFromHead('style');
+
+      if (HAS_BLOB_SUPPORT) {
+        var link = _this.refs.link;
+        var transformedCss = getTransformedCss(children, doNotPrefix, isMinified);
+        var blob = new window.Blob([transformedCss], {
+          type: 'text/css'
+        });
+
+        link.href = URL.createObjectURL(blob);
+
+        document.head.appendChild(link);
+      } else {
+        throw new Error(NO_BLOB_SUPPORT_ERROR);
       }
+    }, _this.setStyleTag = function () {
+      var _this$props2 = _this.props;
+      var children = _this$props2.children;
+      var doNotPrefix = _this$props2.doNotPrefix;
+      var isMinified = _this$props2.isMinified;
 
-      var style = _this.refs.styleTag;
-      var transformedCss = doNotPrefix ? children : (0, _transform.prefixCss)(children);
 
-      style.textContent = isMinified ? (0, _transform.minify)(transformedCss) : transformedCss;
+      throwErrorIfIsNotText(children);
 
+      _this.removeTagFromHead('link');
+
+      var style = _this.refs.style;
+
+      style.textContent = getTransformedCss(children, doNotPrefix, isMinified);
+
       document.head.appendChild(style);
@@ -79,11 +156,12 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
   Style.prototype.componentDidMount = function componentDidMount() {
-    this.setStyleTag();
+    this.setCorrectTag();
   };
 
   Style.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.setStyleTag();
+    this.setCorrectTag();
   };
 
   Style.prototype.componentWillUnmount = function componentWillUnmount() {
-    document.head.removeChild(this.refs.styleTag);
+    this.removeTagFromHead('link');
+    this.removeTagFromHead('style');
   };
@@ -100,6 +178,23 @@
   /**
-   * re-prefix the updated values and update the contents
+   * remove the tagType from the document head if it exists
+   *
+   * @param {string} tagType
    */
 
 
+  /**
+   * based on whether sourcemaps are requested, set either a link or style tag
+   */
+
+
+  /**
+   * set the link tag with the prefixed / minified css text as a blob and move to the document head
+   */
+
+
+  /**
+   * set the style tag with the prefixed / minified css text and move to the document head
+   */
+
+
   Style.prototype.render = function render() {
@@ -109,10 +204,18 @@ var _props = this.props;
     var doNotPrefixIgnored = _props.doNotPrefix;
+    var hasSourceMap = _props.hasSourceMap;
     var isMinifiedIgnored = _props.isMinified;
 
-    var otherProps = _objectWithoutProperties(_props, ['children', 'doNotPrefix', 'isMinified']);
+    var otherProps = _objectWithoutProperties(_props, ['children', 'doNotPrefix', 'hasSourceMap', 'isMinified']);
 
+    if (hasSourceMap && HAS_BLOB_SUPPORT) {
+      return _react2.default.createElement('link', _extends({
+        rel: 'stylesheet',
+        ref: 'link'
+      }, otherProps));
+    }
+
     return _react2.default.createElement(
       'style',
       _extends({
-        ref: 'styleTag'
+        ref: 'style'
       }, otherProps),
@@ -129,2 +232,3 @@ children
   doNotPrefix: _react.PropTypes.bool,
+  hasSourceMap: _react.PropTypes.bool,
   isMinified: _react.PropTypes.bool
@@ -134,2 +238,3 @@ };
   doNotPrefix: false,
+  hasSourceMap: false,
   isMinified: false
@@ -136,0 +241,0 @@ };

package.json

@@ -8,2 +8,3 @@ {
     "autoprefixer": "^6.4.0",
+    "blob-polyfill": "^1.0.20150320",
     "postcss": "^5.1.2",
@@ -52,8 +53,8 @@ "react": ">=15.0.0"
     "compile-for-publish": "npm run lint && npm run transpile",
-    "dev": "NODE_ENV=development ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --config=webpack.config.dev.js",
-    "lint": "NODE_ENV=test ./node_modules/eslint/bin/eslint.js src",
+    "dev": "NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --config=webpack.config.dev.js",
+    "lint": "NODE_ENV=test node ./node_modules/eslint/bin/eslint.js src",
     "prepublish": "in-publish && npm run compile-for-publish || in-install",
-    "transpile": "./node_modules/babel-cli/lib/babel/index.js -d lib/ src/"
+    "transpile": "node ./node_modules/babel-cli/lib/babel/index.js -d lib/ src/"
   },
-  "version": "1.0.4"
+  "version": "1.1.0"
 }

README.md

@@ -125,2 +125,14 @@ # react-style-tag
 
+**hasSourceMap** *boolean, defaults to false*
+
+If set to `true`, it will render a `<link>` tag instead of a `<style>` tag, which allows easy source referencing in browser DevTools. This is similar to the way that webpack handles its `style-loader`.
+
+The use of sourcemaps require the use of `Blob`, which is supported in IE10+, Safari 6.1+, and all other modern browsers (Chrome, Firefox, etc.). If you browser does not support `Blob` and you want to use sourcemaps, there is an included polyfill which you will need to import separately:
+
+```javascript
+import 'react-script-tag/blob-polyfill';
+```
+
+Make sure this import occurs prior to the import of `react-style-tag`. Naturally, this is only necessary if you are not using an alternative polyfill.
+
 **isMinified** *boolean, defaults to false*
@@ -127,0 +139,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16796

increased by28.71%

Number of package files

6

increased by20%

Lines of code

243

increased by52.83%

Number of lines in readme file

168

increased by7.69%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedblob-polyfill@^1.0.20150320

• + Addedblob-polyfill@1.0.20150320(transitive)