feat: removing inline-style-prefixer

Author: wuweiweiwu

index.d.ts

@@ -1,4 +1,3 @@
-import * as Prefixer from 'inline-style-prefixer';
 import * as React from 'react';
 
 export type Size = string | number;
@@ -19,7 +18,6 @@ export interface Props {
   onChange?: (newSize: number) => void;
   onResizerClick?: (event: MouseEvent) => void;
   onResizerDoubleClick?: (event: MouseEvent) => void;
-  prefixer?: Prefixer;
   style?: React.CSSProperties;
   resizerStyle?: React.CSSProperties;
   paneStyle?: React.CSSProperties;

rollup.config.js

@@ -16,13 +16,7 @@ export default {
       format: 'esm',
     },
   ],
-  external: [
-    'react',
-    'react-dom',
-    'prop-types',
-    'inline-style-prefixer',
-    'react-style-proptype',
-  ],
+  external: [...Object.keys(pkg.dependencies)],
   plugins: [
     babel({
       exclude: 'node_modules/**',

src/Pane.js

@@ -1,19 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Prefixer from 'inline-style-prefixer';
 import stylePropType from 'react-style-proptype';
 
-const DEFAULT_USER_AGENT =
-  'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
-const USER_AGENT =
-  typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
-
 class Pane extends React.PureComponent {
   render() {
     const {
       children,
       className,
-      prefixer,
       split,
       style: styleProps,
       size,
@@ -39,11 +32,7 @@ class Pane extends React.PureComponent {
     }
 
     return (
-      <div
-        ref={eleRef}
-        className={classes.join(' ')}
-        style={prefixer.prefix(style)}
-      >
+      <div ref={eleRef} className={classes.join(' ')} style={style}>
         {children}
       </div>
     );
@@ -53,15 +42,12 @@ class Pane extends React.PureComponent {
 Pane.propTypes = {
   className: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-  prefixer: PropTypes.instanceOf(Prefixer).isRequired,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   split: PropTypes.oneOf(['vertical', 'horizontal']),
   style: stylePropType,
   eleRef: PropTypes.func,
 };
 
-Pane.defaultProps = {
-  prefixer: new Prefixer({ userAgent: USER_AGENT }),
-};
+Pane.defaultProps = {};
 
 export default Pane;

src/Resizer.js

@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Prefixer from 'inline-style-prefixer';
 import stylePropType from 'react-style-proptype';
 
-const DEFAULT_USER_AGENT =
-  'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
-const USER_AGENT =
-  typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
 export const RESIZER_DEFAULT_CLASSNAME = 'Resizer';
 
 class Resizer extends React.Component {
@@ -18,7 +13,6 @@ class Resizer extends React.Component {
       onMouseDown,
       onTouchEnd,
       onTouchStart,
-      prefixer,
       resizerClassName,
       split,
       style,
@@ -27,8 +21,9 @@ class Resizer extends React.Component {
 
     return (
       <span
+        role="presentation"
         className={classes.join(' ')}
-        style={prefixer.prefix(style) || {}}
+        style={style}
         onMouseDown={event => onMouseDown(event)}
         onTouchStart={event => {
           event.preventDefault();
@@ -62,14 +57,12 @@ Resizer.propTypes = {
   onMouseDown: PropTypes.func.isRequired,
   onTouchStart: PropTypes.func.isRequired,
   onTouchEnd: PropTypes.func.isRequired,
-  prefixer: PropTypes.instanceOf(Prefixer).isRequired,
   split: PropTypes.oneOf(['vertical', 'horizontal']),
   style: stylePropType,
   resizerClassName: PropTypes.string.isRequired,
 };
 
 Resizer.defaultProps = {
-  prefixer: new Prefixer({ userAgent: USER_AGENT }),
   resizerClassName: RESIZER_DEFAULT_CLASSNAME,
 };
 

src/SplitPane.js

@@ -1,17 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Prefixer from 'inline-style-prefixer';
 import stylePropType from 'react-style-proptype';
 import { polyfill } from 'react-lifecycles-compat';
 
 import Pane from './Pane';
 import Resizer, { RESIZER_DEFAULT_CLASSNAME } from './Resizer';
 
-const DEFAULT_USER_AGENT =
-  'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
-const USER_AGENT =
-  typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
-
 function unFocus(document, window) {
   if (document.selection) {
     document.selection.empty();
@@ -253,7 +247,6 @@ class SplitPane extends React.Component {
       paneStyle,
       pane1Style: pane1StyleProps,
       pane2Style: pane2StyleProps,
-      prefixer,
       resizerClassName,
       resizerStyle,
       split,
@@ -269,22 +262,19 @@ class SplitPane extends React.Component {
 
     const notNullChildren = removeNullChildren(children);
 
-    const style = Object.assign(
-      {},
-      {
-        display: 'flex',
-        flex: 1,
-        height: '100%',
-        position: 'absolute',
-        outline: 'none',
-        overflow: 'hidden',
-        MozUserSelect: 'text',
-        WebkitUserSelect: 'text',
-        msUserSelect: 'text',
-        userSelect: 'text',
-      },
-      styleProps || {}
-    );
+    const style = {
+      display: 'flex',
+      flex: 1,
+      height: '100%',
+      position: 'absolute',
+      outline: 'none',
+      overflow: 'hidden',
+      MozUserSelect: 'text',
+      WebkitUserSelect: 'text',
+      msUserSelect: 'text',
+      userSelect: 'text',
+      ...styleProps,
+    };
 
     if (split === 'vertical') {
       Object.assign(style, {
@@ -303,12 +293,9 @@ class SplitPane extends React.Component {
     }
 
     const classes = ['SplitPane', className, split, disabledClass];
-    const pane1Style = prefixer.prefix(
-      Object.assign({}, paneStyle || {}, pane1StyleProps || {})
-    );
-    const pane2Style = prefixer.prefix(
-      Object.assign({}, paneStyle || {}, pane2StyleProps || {})
-    );
+
+    const pane1Style = { ...paneStyle, ...pane1StyleProps };
+    const pane2Style = { ...paneStyle, ...pane2StyleProps };
 
     const pane1Classes = ['Pane1', paneClassName, pane1ClassName].join(' ');
     const pane2Classes = ['Pane2', paneClassName, pane2ClassName].join(' ');
@@ -319,7 +306,7 @@ class SplitPane extends React.Component {
         ref={node => {
           this.splitPane = node;
         }}
-        style={prefixer.prefix(style)}
+        style={style}
       >
         <Pane
           className={pane1Classes}
@@ -378,7 +365,6 @@ SplitPane.propTypes = {
   onChange: PropTypes.func,
   onResizerClick: PropTypes.func,
   onResizerDoubleClick: PropTypes.func,
-  prefixer: PropTypes.instanceOf(Prefixer).isRequired,
   style: stylePropType,
   resizerStyle: stylePropType,
   paneClassName: PropTypes.string,
@@ -394,7 +380,6 @@ SplitPane.propTypes = {
 SplitPane.defaultProps = {
   allowResize: true,
   minSize: 50,
-  prefixer: new Prefixer({ userAgent: USER_AGENT }),
   primary: 'first',
   split: 'vertical',
   paneClassName: '',