radium - npm Package Compare versions

Comparing version 0.24.0 to 0.24.1

CHANGELOG.md

 # Radium Changelog
 
+## 0.24.1 (July 9, 2018)
+- Make `<StyleSheet>` manually update `<style>` tag DOM, fixing media queries on component level flickering. (#626, #950)
+
 ## 0.24.0 (March 29, 2018)
@@ -4,0 +7,0 @@ - Fix `render` methods that return array of children or `React.Fragment`. (#950)

docs/api/README.md

@@ -458,3 +458,3 @@ # Radium API
 
-```
+```jsx
 <Style
@@ -473,3 +473,3 @@ scopeSelector=".scoping-class"
 
-```
+```html
 <style>
@@ -480,3 +480,3 @@ .scoping-class {
 .scoping-class span {
-  font-family: 'Lucida Console, Monaco, monospace'
+  font-family: 'Lucida Console, Monaco, monospace';
 }
@@ -533,3 +533,3 @@ </style>
   <Style
-  scopeSelector=".TestClass"
+    scopeSelector=".TestClass"
     rules={{
@@ -536,0 +536,0 @@ h1: {

es/components/style-sheet.js

@@ -11,4 +11,3 @@ 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; }; }();
 
-import React, { PureComponent } from 'react';
-
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -18,4 +17,4 @@
 
-var StyleSheet = (_temp = _class = function (_PureComponent) {
-  _inherits(StyleSheet, _PureComponent);
+var StyleSheet = (_temp = _class = function (_Component) {
+  _inherits(StyleSheet, _Component);
 
@@ -28,8 +27,15 @@ function StyleSheet() {
     _this._onChange = function () {
-      setTimeout(function () {
-        _this._isMounted && _this.setState(_this._getCSSState());
-      }, 0);
+      var nextCSS = _this.context._radiumStyleKeeper.getCSS();
+
+      if (nextCSS !== _this._css) {
+        if (_this._root) {
+          _this._root.innerHTML = nextCSS;
+        } else {
+          throw new Error('No root style object found, even after StyleSheet mount.');
+        }
+        _this._css = nextCSS;
+      }
     };
 
-    _this.state = _this._getCSSState();
+    _this._css = _this.context._radiumStyleKeeper.getCSS();
     return _this;
@@ -41,3 +47,2 @@ }
     value: function componentDidMount() {
-      this._isMounted = true;
       this._subscription = this.context._radiumStyleKeeper.subscribe(this._onChange);
@@ -47,5 +52,9 @@ this._onChange();
   }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      this._isMounted = false;
       if (this._subscription) {
@@ -56,10 +65,12 @@ this._subscription.remove();
   }, {
-    key: '_getCSSState',
-    value: function _getCSSState() {
-      return { css: this.context._radiumStyleKeeper.getCSS() };
-    }
-  }, {
     key: 'render',
     value: function render() {
-      return React.createElement('style', { dangerouslySetInnerHTML: { __html: this.state.css } });
+      var _this2 = this;
+
+      return React.createElement('style', {
+        dangerouslySetInnerHTML: { __html: this._css },
+        ref: function ref(c) {
+          _this2._root = c;
+        }
+      });
     }
@@ -69,5 +80,5 @@ }]);
   return StyleSheet;
-}(PureComponent), _class.contextTypes = {
+}(Component), _class.contextTypes = {
   _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
 }, _temp);
 export { StyleSheet as default };

lib/components/style-sheet.js

@@ -32,4 +32,4 @@ 'use strict';
 
-var StyleSheet = (_temp = _class = function (_PureComponent) {
-  _inherits(StyleSheet, _PureComponent);
+var StyleSheet = (_temp = _class = function (_Component) {
+  _inherits(StyleSheet, _Component);
 
@@ -42,8 +42,15 @@ function StyleSheet() {
     _this._onChange = function () {
-      setTimeout(function () {
-        _this._isMounted && _this.setState(_this._getCSSState());
-      }, 0);
+      var nextCSS = _this.context._radiumStyleKeeper.getCSS();
+
+      if (nextCSS !== _this._css) {
+        if (_this._root) {
+          _this._root.innerHTML = nextCSS;
+        } else {
+          throw new Error('No root style object found, even after StyleSheet mount.');
+        }
+        _this._css = nextCSS;
+      }
     };
 
-    _this.state = _this._getCSSState();
+    _this._css = _this.context._radiumStyleKeeper.getCSS();
     return _this;
@@ -55,3 +62,2 @@ }
     value: function componentDidMount() {
-      this._isMounted = true;
       this._subscription = this.context._radiumStyleKeeper.subscribe(this._onChange);
@@ -61,5 +67,9 @@ this._onChange();
   }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      this._isMounted = false;
       if (this._subscription) {
@@ -70,10 +80,12 @@ this._subscription.remove();
   }, {
-    key: '_getCSSState',
-    value: function _getCSSState() {
-      return { css: this.context._radiumStyleKeeper.getCSS() };
-    }
-  }, {
     key: 'render',
     value: function render() {
-      return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: this.state.css } });
+      var _this2 = this;
+
+      return _react2.default.createElement('style', {
+        dangerouslySetInnerHTML: { __html: this._css },
+        ref: function ref(c) {
+          _this2._root = c;
+        }
+      });
     }
@@ -83,5 +95,5 @@ }]);
   return StyleSheet;
-}(_react.PureComponent), _class.contextTypes = {
+}(_react.Component), _class.contextTypes = {
   _radiumStyleKeeper: _propTypes2.default.instanceOf(_styleKeeper2.default)
 }, _temp);
 exports.default = StyleSheet;

package.json

 {
   "name": "radium",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "A set of tools to manage inline styles on React elements",
@@ -5,0 +5,0 @@ "main": "index.js",

src/components/style-sheet.js

 /* @flow */
 
-import React, {PureComponent} from 'react';
-import type {Node} from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
@@ -9,3 +8,3 @@
 
-export default class StyleSheet extends PureComponent<{}, {css: string}> {
+export default class StyleSheet extends Component<{}> {
   static contextTypes = {
@@ -17,8 +16,6 @@ _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
     super(...arguments);
-
-    this.state = this._getCSSState();
+    this._css = this.context._radiumStyleKeeper.getCSS();
   }
 
   componentDidMount() {
-    this._isMounted = true;
     this._subscription = this.context._radiumStyleKeeper.subscribe(
@@ -30,4 +27,7 @@ this._onChange
 
+  shouldComponentUpdate() {
+    return false;
+  }
+
   componentWillUnmount() {
-    this._isMounted = false;
     if (this._subscription) {
@@ -38,21 +38,31 @@ this._subscription.remove();
 
-  _isMounted: ?boolean;
   _subscription: ?{remove: () => void};
+  _root: ?HTMLElement;
+  _css: string;
 
-  _getCSSState(): {css: string} {
-    return {css: this.context._radiumStyleKeeper.getCSS()};
-  }
+  _onChange = () => {
+    const nextCSS = this.context._radiumStyleKeeper.getCSS();
 
-  _onChange = () => {
-    setTimeout(
-      () => {
-        this._isMounted && this.setState(this._getCSSState());
-      },
-      0
-    );
+    if (nextCSS !== this._css) {
+      if (this._root) {
+        this._root.innerHTML = nextCSS;
+      } else {
+        throw new Error(
+          'No root style object found, even after StyleSheet mount.'
+        );
+      }
+      this._css = nextCSS;
+    }
   };
 
-  render(): Node {
-    return <style dangerouslySetInnerHTML={{__html: this.state.css}} />;
+  render() {
+    return (
+      <style
+        dangerouslySetInnerHTML={{__html: this._css}}
+        ref={c => {
+          this._root = c;
+        }}
+      />
+    );
   }
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

726341

increased by0.15%

Lines of code

15748

increased by0.25%

Number of medium supply chain risk alerts

4

decreased by-20%

No dependency changes