Merge pull request #5668 from oliviertassinari/style-ua-all-flex

[autoprefixer] Fix a style issue with user agent all and display flex

src/styles/getMuiTheme.js

@@ -332,8 +332,10 @@ export default function getMuiTheme(muiTheme, ...more) {
     rawTheme: baseTheme, // To provide backward compatibility.
   });
 
-  const transformers = [autoprefixer, rtl, callOnce].map((t) => t(muiTheme))
+  const transformers = [autoprefixer, rtl, callOnce]
+    .map((t) => t(muiTheme))
     .filter((t) => t);
+
   muiTheme.prepareStyles = compose(...transformers);
 
   return muiTheme;

src/styles/getMuiTheme.spec.js

@@ -1,4 +1,5 @@
 /* eslint-env mocha */
+
 import {expect} from 'chai';
 import getMuiTheme from './getMuiTheme';
 
@@ -60,73 +61,6 @@ describe('./styles/getMuiTheme', () => {
   });
 
   describe('prepareStyles', () => {
-    const MSIE9_USER_AGENT = 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';
-    const MSIE10_USER_AGENT = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)';
-
-    describe('prefixer', () => {
-      it('should prefix for all when userAgent is all', () => {
-        const muiTheme = getMuiTheme({}, {
-          userAgent: 'all',
-        });
-
-        const stylePrepared = muiTheme.prepareStyles({
-          transform: 'rotate(90)',
-        });
-
-        expect(stylePrepared).to.deep.equal({
-          transform: 'rotate(90)',
-          muiPrepared: true,
-          WebkitTransform: 'rotate(90)',
-          msTransform: 'rotate(90)',
-        });
-      });
-
-      it('should prefix for the userAgent when we provid a valid one', () => {
-        const muiTheme = getMuiTheme({}, {
-          userAgent: MSIE9_USER_AGENT,
-        });
-
-        const stylePrepared = muiTheme.prepareStyles({
-          transform: 'rotate(90)',
-        });
-
-        expect(stylePrepared).to.deep.equal({
-          muiPrepared: true,
-          msTransform: 'rotate(90)',
-        });
-      });
-
-      it('should not prefix when userAgent is false', () => {
-        const muiTheme = getMuiTheme({}, {
-          userAgent: false,
-        });
-
-        const stylePrepared = muiTheme.prepareStyles({
-          transform: 'rotate(90)',
-        });
-
-        expect(stylePrepared).to.deep.equal({
-          transform: 'rotate(90)',
-          muiPrepared: true,
-        });
-      });
-
-      it('should not delete ‘display’ property on IE10', () => {
-        const muiTheme = getMuiTheme({}, {
-          userAgent: MSIE10_USER_AGENT,
-        });
-
-        const stylePrepared = muiTheme.prepareStyles({
-          display: 'inline-block',
-        });
-
-        expect(stylePrepared).to.deep.equal({
-          display: 'inline-block',
-          muiPrepared: true,
-        });
-      });
-    });
-
     describe('rtl', () => {
       it('should revert the rules when isRtl is true', () => {
         const muiTheme = getMuiTheme({}, {

src/utils/autoprefixer.js

@@ -17,10 +17,28 @@ export default function(muiTheme) {
     hasWarnedAboutUserAgent = true;
   }
 
+  const isServer = typeof window === 'undefined';
+
   if (userAgent === false) { // Disabled autoprefixer
     return null;
   } else if (userAgent === 'all' || userAgent === undefined) { // Prefix for all user agent
-    return (style) => InlineStylePrefixer.prefixAll(style);
+    return (style) => {
+      let isFlex = false;
+
+      if (isServer) {
+        isFlex = ['flex', 'inline-flex'].includes(style.display);
+      }
+
+      const stylePrefixed = InlineStylePrefixer.prefixAll(style);
+
+      // We can't apply this join with react-dom:
+      // #https://github.com/facebook/react/issues/6467
+      if (isFlex) {
+        stylePrefixed.display = stylePrefixed.display.join('; display: ');
+      }
+
+      return stylePrefixed;
+    };
   } else {
     const prefixer = new InlineStylePrefixer({
       userAgent: userAgent,

src/utils/autoprefixer.spec.js

@@ -0,0 +1,102 @@
+/* eslint-env mocha */
+
+import {assert} from 'chai';
+import autoprefixer from './autoprefixer';
+
+describe('./utils/autoprefixer', () => {
+  const MSIE9_USER_AGENT = 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';
+  const MSIE10_USER_AGENT = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)';
+
+  describe('server side', () => {
+    let savedWindow;
+    let skip = false;
+
+    beforeEach(() => {
+      savedWindow = global.window;
+
+      try {
+        // We can reasign window when the test is runned in a real browser.
+        global.window = undefined;
+        skip = false;
+      } catch (err) {
+        skip = true;
+      }
+    });
+
+    afterEach(() => {
+      if (!skip) {
+        global.window = savedWindow;
+      }
+    });
+
+    it('should spread properties for display:flex when userAgent is all', () => {
+      if (skip) {
+        return;
+      }
+
+      const autoprefix = autoprefixer({
+        userAgent: 'all',
+      });
+
+      const stylePrepared = autoprefix({
+        display: 'inline-flex',
+      });
+
+      assert.deepEqual(stylePrepared, {
+        display: '-webkit-box; display: -moz-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex', // eslint-disable-line max-len
+      });
+    });
+  });
+
+  it('should prefix for all when userAgent is all', () => {
+    const autoprefix = autoprefixer({
+      userAgent: 'all',
+    });
+
+    const stylePrepared = autoprefix({
+      transform: 'rotate(90)',
+    });
+
+    assert.deepEqual(stylePrepared, {
+      transform: 'rotate(90)',
+      WebkitTransform: 'rotate(90)',
+      msTransform: 'rotate(90)',
+    });
+  });
+
+  it('should prefix for the userAgent when we provid a valid one', () => {
+    const autoprefix = autoprefixer({
+      userAgent: MSIE9_USER_AGENT,
+    });
+
+    const stylePrepared = autoprefix({
+      transform: 'rotate(90)',
+    });
+
+    assert.deepEqual(stylePrepared, {
+      msTransform: 'rotate(90)',
+    });
+  });
+
+  it('should not prefix when userAgent is false', () => {
+    const autoprefix = autoprefixer({
+      userAgent: false,
+    });
+
+    assert.strictEqual(autoprefix, null);
+  });
+
+  it('should not delete ‘display’ property on IE10', () => {
+    const autoprefix = autoprefixer({
+      userAgent: MSIE10_USER_AGENT,
+    });
+
+    const stylePrepared = autoprefix({
+      display: 'inline-block',
+    });
+
+    assert.deepEqual(stylePrepared, {
+      display: 'inline-block',
+    });
+  });
+});