Fix rendering in Safari

Author: gaearon

examples/00 Chessboard/Tutorial App/Board.js

@@ -4,6 +4,25 @@ import Knight from './Knight';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd/modules/backends/HTML5';
 
+// In a real app, you should use Autoprefixer
+let testEl;
+function getDisplayFlexValue() {
+  if (typeof document === 'undefined') {
+    return 'flex';
+  }
+
+  if (!testEl) {
+    testEl = document.createElement('div');
+  }
+
+  testEl.style.display = '-webkit-flex';
+  if (testEl.style.display === '-webkit-flex') {
+    return '-webkit-flex';
+  } else {
+    return 'flex';
+  }
+}
+
 @DragDropContext(HTML5Backend)
 export default class Board {
   static propTypes = {
@@ -44,7 +63,7 @@ export default class Board {
       <div style={{
         width: '100%',
         height: '100%',
-        display: typeof window !== 'undefined' && window.safari ? '-webkit-flex' : 'flex', // Don't do that in a real app
+        display: getDisplayFlexValue(),
         flexWrap: 'wrap',
         WebkitFlexWrap: 'wrap'
       }}>

package.json

@@ -72,7 +72,6 @@
     "mocha": "^2.2.5",
     "null-loader": "^0.1.0",
     "postcss": "^4.0.2",
-    "postcss-custom-properties": "3.0.1",
     "react": "^0.13.3",
     "react-hot-loader": "^1.2.3",
     "react-router": "~0.13.2",

scripts/cssTransformLoader.js

@@ -2,26 +2,14 @@
 
 var postcss = require('postcss');
 var autoPrefixer = require('autoprefixer');
-var customProperties = require('postcss-custom-properties');
-var cssVars = require('../src/stubs/cssVar');
-
-function escapeSlash(match) {
-  return match.replace(/\//g, '_');
-}
-
-function slashTransform(content) {
-  return content.replace(/\.[\w\/\:\.]+(\s|\,)/g, escapeSlash);
-}
 
 module.exports = function(content) {
   if (this && this.cacheable) {
     // Webpack specific call
     this.cacheable();
   }
 
-  content = slashTransform(content);
   content = postcss()
-    .use(customProperties({variables: cssVars.CSS_VARS}))
     .use(autoPrefixer())
     .process(content).css;
 

site/webpack-client.config.js

@@ -39,22 +39,16 @@ module.exports = {
         loaders: isDev ? ['react-hot-loader', 'babel-loader'] : ['babel-loader']
       },
       {
-        test: /\.css$/,
+        test: /\.less$/,
         loader: ExtractTextPlugin.extract(
           'style-loader',
           [
             'css-loader',
-            path.join(__dirname, '../scripts/cssTransformLoader')
+            path.join(__dirname, '../scripts/cssTransformLoader'),
+            'less-loader'
           ].join('!')
         )
       },
-      {
-        test: /\.less$/,
-        loader: ExtractTextPlugin.extract(
-          'style-loader',
-          'css-loader!less-loader'
-        )
-      },
       {
         test: /\.png$/,
         loader: 'file-loader',