radium - npm Package Compare versions

Comparing version 0.21.1 to 0.21.2

CHANGELOG.md

 # Radium Changelog
 
+## 0.21.2 (January 25, 2018)
+- Fix multiple-value prefixed inline styles. (#962, #958, #951)
+
 ## 0.21.1 (January 18, 2018)
@@ -4,0 +7,0 @@ - Call `componentDidUpdate()` inherited method (#957).

lib/camel-case-props-to-dash-case.js

@@ -12,3 +12,3 @@ 'use strict';
 
-var _camelCaseToDashCase = function _camelCaseToDashCase(s) {
+var camelCaseToDashCase = exports.camelCaseToDashCase = function camelCaseToDashCase(s) {
   return s.replace(_camelCaseRegex, _camelCaseReplacer);
@@ -21,3 +21,3 @@ };
   return Object.keys(prefixedStyle).reduce(function (result, key) {
-    var dashCaseKey = _camelCaseToDashCase(key);
+    var dashCaseKey = camelCaseToDashCase(key);
 
@@ -34,3 +34,2 @@ // Fix IE vendor prefix
 
-exports.default = camelCasePropsToDashCase;
-module.exports = exports['default'];
+exports.default = camelCasePropsToDashCase;

lib/css-rule-set-to-string.js

@@ -41,5 +41,4 @@ 'use strict';
   var serializedRules = createMarkupForStyles(cssPrefixedRules);
-
   return selector + '{' + serializedRules + '}';
 }
 module.exports = exports['default'];

lib/prefixer.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _exenv = require('exenv');
+
+var _exenv2 = _interopRequireDefault(_exenv);
+
 var _static = require('./prefix-data/static');
@@ -34,2 +38,4 @@
 
+var _camelCasePropsToDashCase = require('./camel-case-props-to-dash-case');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,2 +60,44 @@
 
+// Flatten prefixed values that are arrays to strings.
+//
+// We get prefixed styles back in the form of:
+// - `display: "flex"` OR
+// - `display: "-webkit-flex"` OR
+// - `display: [/* ... */, "-webkit-flex", "flex"]
+//
+// The last form is problematic for eventual use in the browser and server
+// render. More confusingly, we have to do **different** things on the
+// browser and server (noted inline below).
+//
+// https://github.com/FormidableLabs/radium/issues/958
+function flattenStyleValues(style) {
+  return Object.keys(style).reduce(function (newStyle, key) {
+    var val = style[key];
+    if (Array.isArray(val)) {
+      if (_exenv2.default.canUseDOM) {
+        // For the **browser**, when faced with multiple values, we just take
+        // the **last** one, which is the original passed in value before
+        // prefixing. This _should_ work, because `inline-style-prefixer`
+        // we're just passing through what would happen without ISP.
+
+        val = val[val.length - 1].toString();
+      } else {
+        // For the **server**, we just concatenate things together and convert
+        // the style object values into a hacked-up string of like `display:
+        // "-webkit-flex;display:flex"` that will SSR render correctly to like
+        // `"display:-webkit-flex;display:flex"` but would otherwise be
+        // totally invalid values.
+
+        // We convert keys to dash-case only for the serialize values and
+        // leave the real key camel-cased so it's as expected to React and
+        // other parts of the processing chain.
+        val = val.join(';' + (0, _camelCasePropsToDashCase.camelCaseToDashCase)(key) + ':');
+      }
+    }
+
+    newStyle[key] = val;
+    return newStyle;
+  }, {});
+}
+
 var _hasWarnedAboutUserAgent = false;
@@ -89,4 +137,4 @@ var _lastUserAgent = void 0;
 
-// Returns a new style object with vendor prefixes added to property names
-// and values.
+// Returns a new style object with vendor prefixes added to property names and
+// values.
 function getPrefixedStyle(style, userAgent) {
@@ -96,3 +144,4 @@ var styleWithFallbacks = transformValues(style);
   var prefixedStyle = prefixer.prefix(styleWithFallbacks);
-  return prefixedStyle;
+  var flattenedStyle = flattenStyleValues(prefixedStyle);
+  return flattenedStyle;
 }

package.json

 {
   "name": "radium",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "A set of tools to manage inline styles on React elements",
@@ -62,3 +62,3 @@ "main": "lib/index.js",
     "concurrently": "^3.4.0",
-    "core-js": "^2.5.1",
+    "core-js": "^2.5.3",
     "coveralls": "^2.12.0",
@@ -74,4 +74,5 @@ "eslint": "^3.17.1",
     "isparta-loader": "^2.0.0",
-    "karma": "^1.5.0",
+    "karma": "^2.0.0",
     "karma-babel-preprocessor": "^6.0.1",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
@@ -81,4 +82,2 @@ "karma-ie-launcher": "^1.0.0",
     "karma-mocha-reporter": "^2.2.2",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.4.0",
     "karma-sinon-chai": "^1.2.4",
@@ -91,3 +90,2 @@ "karma-webpack": "^2.0.3",
     "object-assign": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
     "prettier": "^0.22.0",
@@ -94,0 +92,0 @@ "react": "^16.0.0",

src/__tests__/radium-test.js

@@ -854,2 +854,69 @@ /* eslint-disable react/prop-types */
   });
+
+  describe('inline prefixes', () => {
+    let TestComponent;
+
+    beforeEach(() => {
+      class Composed extends Component {
+        render() {
+          return React.createElement('div', {
+            style: {
+              color: 'red',
+              display: 'flex'
+            }
+          });
+        }
+      }
+
+      TestComponent = Composed;
+    });
+
+    // Regression test: https://github.com/FormidableLabs/radium/issues/958
+    it('handles no user agent', () => {
+      const userAgent = '';
+      const Wrapped = Radium({userAgent})(TestComponent);
+      const output = TestUtils.renderIntoDocument(<Wrapped />);
+      const div = getElement(output, 'div');
+
+      expect(div.style.color).to.equal('red');
+      expect(div.style.display).to.equal('flex');
+    });
+
+    // Regression test: https://github.com/FormidableLabs/radium/issues/958s
+    it('handles non-matching user agent', () => {
+      const userAgent = 'testy-mctestface';
+      const Wrapped = Radium({userAgent})(TestComponent);
+      const output = TestUtils.renderIntoDocument(<Wrapped />);
+      const div = getElement(output, 'div');
+
+      expect(div.style.color).to.equal('red');
+      expect(div.style.display).to.equal('flex');
+    });
+
+    it('handles matching user agent', () => {
+      const iOSChrome47 = 'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4 ' +
+        '(KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4';
+      const webkitFlex = '-webkit-flex';
+
+      // Check if we _can_ even have the expected value. (Can't on IE9).
+      class FlexCanary extends Component {
+        render() {
+          return React.createElement('div', {
+            style: {
+              display: webkitFlex
+            }
+          });
+        }
+      }
+      const canary = TestUtils.renderIntoDocument(<FlexCanary />);
+      const expectedDisplay = getElement(canary, 'div').style.display;
+
+      const Wrapped = Radium({userAgent: iOSChrome47})(TestComponent);
+      const output = TestUtils.renderIntoDocument(<Wrapped />);
+      const div = getElement(output, 'div');
+
+      expect(div.style.color).to.equal('red');
+      expect(div.style.display).to.equal(expectedDisplay);
+    });
+  });
 });

src/camel-case-props-to-dash-case.js

@@ -9,3 +9,3 @@ /* @flow */
 
-const _camelCaseToDashCase = function(s) {
+export const camelCaseToDashCase = function(s: string): string {
   return s.replace(_camelCaseRegex, _camelCaseReplacer);
@@ -19,3 +19,3 @@ };
     (result, key) => {
-      let dashCaseKey = _camelCaseToDashCase(key);
+      let dashCaseKey = camelCaseToDashCase(key);
 
@@ -22,0 +22,0 @@ // Fix IE vendor prefix

src/css-rule-set-to-string.js

@@ -30,4 +30,3 @@ /* @flow */
   const serializedRules = createMarkupForStyles(cssPrefixedRules);
-
   return selector + '{' + serializedRules + '}';
 }

src/prefixer.js

@@ -11,5 +11,9 @@ /**
   from 'inline-style-prefixer/dynamic/createPrefixer';
+import ExecutionEnvironment from 'exenv';
+
 import staticData from './prefix-data/static';
 import dynamicData from './prefix-data/dynamic';
 
+import {camelCaseToDashCase} from './camel-case-props-to-dash-case';
+
 const prefixAll: (style: Object) => Object = createStaticPrefixer(staticData);
@@ -39,2 +43,47 @@ const InlineStylePrefixer = createDynamicPrefixer(dynamicData, prefixAll);
 
+// Flatten prefixed values that are arrays to strings.
+//
+// We get prefixed styles back in the form of:
+// - `display: "flex"` OR
+// - `display: "-webkit-flex"` OR
+// - `display: [/* ... */, "-webkit-flex", "flex"]
+//
+// The last form is problematic for eventual use in the browser and server
+// render. More confusingly, we have to do **different** things on the
+// browser and server (noted inline below).
+//
+// https://github.com/FormidableLabs/radium/issues/958
+function flattenStyleValues(style) {
+  return Object.keys(style).reduce(
+    (newStyle, key) => {
+      let val = style[key];
+      if (Array.isArray(val)) {
+        if (ExecutionEnvironment.canUseDOM) {
+          // For the **browser**, when faced with multiple values, we just take
+          // the **last** one, which is the original passed in value before
+          // prefixing. This _should_ work, because `inline-style-prefixer`
+          // we're just passing through what would happen without ISP.
+
+          val = val[val.length - 1].toString();
+        } else {
+          // For the **server**, we just concatenate things together and convert
+          // the style object values into a hacked-up string of like `display:
+          // "-webkit-flex;display:flex"` that will SSR render correctly to like
+          // `"display:-webkit-flex;display:flex"` but would otherwise be
+          // totally invalid values.
+
+          // We convert keys to dash-case only for the serialize values and
+          // leave the real key camel-cased so it's as expected to React and
+          // other parts of the processing chain.
+          val = val.join(`;${camelCaseToDashCase(key)}:`);
+        }
+      }
+
+      newStyle[key] = val;
+      return newStyle;
+    },
+    {}
+  );
+}
+
 let _hasWarnedAboutUserAgent = false;
@@ -84,4 +133,4 @@ let _lastUserAgent;
 
-// Returns a new style object with vendor prefixes added to property names
-// and values.
+// Returns a new style object with vendor prefixes added to property names and
+// values.
 export function getPrefixedStyle(style: Object, userAgent?: ?string): Object {
@@ -91,3 +140,4 @@ const styleWithFallbacks = transformValues(style);
   const prefixedStyle = prefixer.prefix(styleWithFallbacks);
-  return prefixedStyle;
+  const flattenedStyle = flattenStyleValues(prefixedStyle);
+  return flattenedStyle;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

596599

increased by0.7%

Dev dependency count

49

decreased by-3.92%

Lines of code

13060

increased by0.24%

No dependency changes