#66: Should work without CSS in modern browsers (closes #66)

package.json

@@ -12,7 +12,7 @@
   "typings": "lib",
   "scripts": {
     "test": "jest",
-    "build": "rm -rf lib && mkdir lib && node-sass src --importer sass-importer.js --include-path node_modules -o lib && tsc",
+    "build": "rm -rf lib && mkdir lib && tsc",
     "preversion": "npm run test",
     "prepublish": "npm run build",
     "start": "styleguidist server",
@@ -36,13 +36,11 @@
   },
   "homepage": "https://github.com/buildo/react-flexview",
   "dependencies": {
-    "classnames": "^2.2.5",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
     "lodash.some": "^4.6.0",
     "prop-types": "^15.5.6",
-    "sass-flex-mixins": "^0.1.0",
-    "typelevel-ts": "^0.2.2"
+    "typelevel-ts": "^0.3.1"
   },
   "devDependencies": {
     "@types/classnames": "2.2.3",
@@ -55,24 +53,18 @@
     "@types/react-dom": "^16.0.3",
     "babel-loader": "^7.1.2",
     "babel-preset-buildo": "^0.1.1",
-    "css-loader": "^0.28.5",
     "file-loader": "^1.1.5",
     "jest": "^21.2.1",
-    "node-sass": "4.5.2",
     "progress-bar-webpack-plugin": "^1.10.0",
-    "raw-loader": "^0.5.1",
     "react": "^16",
-    "react-docgen-typescript": "^1.1.0",
+    "react-docgen-typescript": "1.1.0",
     "react-dom": "^16.2.0",
-    "react-styleguidist": "^6.0.33",
+    "react-styleguidist": "6.0.33",
     "react-test-renderer": "^16.2.0",
-    "require-dir": "^0.3.0",
-    "sass-loader": "^6.0.6",
     "smooth-release": "^8.0.0",
     "ts-jest": "^21.2.3",
     "ts-loader": "^2.3.3",
-    "typescript": "^2.5.3",
-    "url-loader": "^0.5.9",
+    "typescript": "^2.9.2",
     "webpack": "3.5.5"
   },
   "jest": {

src/FlexView.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import * as cx from 'classnames';
 import * as PropTypes from 'prop-types';
 import pick = require('lodash.pick');
 import omit = require('lodash.omit');
 import some = require('lodash.some');
-import { ObjectOverwrite, ObjectOmit } from 'typelevel-ts';
+import { Overwrite, Omit } from 'typelevel-ts';
 
 declare var process: { env: { NODE_ENV: 'production' | 'development' } };
 
@@ -14,7 +13,7 @@ function warn(warning: string): void {
   }
 }
 export namespace FlexView {
-  export type Props = ObjectOverwrite<ObjectOmit<React.HTMLProps<HTMLDivElement>, 'ref'>, {
+  export type Props = Overwrite<Omit<React.HTMLProps<HTMLDivElement>, 'ref'>, {
     /** FlexView content */
     children?: React.ReactNode,
     /** flex-direction: column */
@@ -155,19 +154,9 @@ export class FlexView extends React.Component<FlexView.Props> {
     return 'auto'; // default
   }
 
-  getFlexStyle(): React.CSSProperties {
-    const grow = this.getGrow();
-    const shrink = this.getShrink();
-    const basis = this.getBasis();
-    const values = `${grow} ${shrink} ${basis}`;
-    return {
-      msFlex: values,
-      WebkitFlex: values,
-      flex: values
-    };
-  }
-
   getStyle(): React.CSSProperties {
+    const { column, wrap, vAlignContent, hAlignContent } = this.props;
+
     const style = pick(this.props, [
       'width',
       'height',
@@ -176,47 +165,48 @@ export class FlexView extends React.Component<FlexView.Props> {
       'marginRight',
       'marginBottom'
     ]);
-    return { ...this.getFlexStyle(), ...style, ...this.props.style };
-  }
 
-  getContentAlignmentClasses(): string {
-    const vPrefix = this.props.column ? 'justify-content-' : 'align-content-';
-    const hPrefix = this.props.column ? 'align-content-' : 'justify-content-';
-
-    const vAlignContentClasses = {
-      top: `${vPrefix}start`,
-      center: `${vPrefix}center`,
-      bottom: `${vPrefix}end`
-    };
+    function alignPropToFlex(align: FlexView.Props['vAlignContent'] | FlexView.Props['hAlignContent']) {
+      switch (align) {
+        case 'top':
+        case 'left': return 'flex-start'
+        case 'center': return 'center'
+        case 'bottom':
+        case 'right': return 'flex-end'
+      }
+    }
 
-    const hAlignContentClasses = {
-      left: `${hPrefix}start`,
-      center: `${hPrefix}center`,
-      right: `${hPrefix}end`
+    return {
+      boxSizing: 'border-box',
+
+      // some browsers don't set these by default on flex
+      minWidth: 0,
+      minHeight: 0,
+
+      // flex properties
+      display: 'flex',
+      flexDirection: column ? 'column' : 'row',
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+      flex: `${this.getGrow()} ${this.getShrink()} ${this.getBasis()}`,
+      justifyContent: alignPropToFlex(column ? vAlignContent : hAlignContent),
+      alignItems: alignPropToFlex(column ? hAlignContent : vAlignContent),
+
+      // style passed through props
+      ...style,
+      ...this.props.style
     };
-
-    const vAlignContent = this.props.vAlignContent && vAlignContentClasses[this.props.vAlignContent];
-    const hAlignContent = this.props.hAlignContent && hAlignContentClasses[this.props.hAlignContent];
-
-    return cx(vAlignContent, hAlignContent);
-  }
-
-  getClasses(): string {
-    const direction = this.props.column && 'flex-column';
-    const contentAlignment = this.getContentAlignmentClasses();
-    const wrap = this.props.wrap && 'flex-wrap';
-    return cx('react-flex-view', direction, contentAlignment, wrap, this.props.className);
   }
 
   render() {
-    const className = this.getClasses();
     const style = this.getStyle();
     const props = omit(this.props, Object.keys(FlexView.propTypes));
     return (
-      <div className={className} style={style} {...props}>
+      <div className={this.props.className} style={style} {...props}>
         {this.props.children}
       </div>
     );
   }
 
 }
+
+export default FlexView

styleguide/setup.ts

@@ -1,5 +1,3 @@
 import * as ReactDOM from 'react-dom';
 
-import '../src/flexView.scss';
-
 (global as any).ReactDOM = ReactDOM;

test/tests/__snapshots__/FlexView.test.tsx.snap

@@ -2,12 +2,18 @@
 
 exports[`FlexView renders correctly 1`] = `
 <div
-  className="react-flex-view align-content-center justify-content-end flex-wrap"
+  className={undefined}
   style={
     Object {
-      "WebkitFlex": "1 1 auto",
+      "alignItems": "center",
+      "boxSizing": "border-box",
+      "display": "flex",
       "flex": "1 1 auto",
-      "msFlex": "1 1 auto",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "justifyContent": "flex-end",
+      "minHeight": 0,
+      "minWidth": 0,
     }
   }
 >
@@ -19,7 +25,6 @@ exports[`build build script generates every needed file 1`] = `
 Array [
   "FlexView.d.ts",
   "FlexView.js",
-  "flexView.css",
   "index.d.ts",
   "index.js",
 ]

webpack.config.js

@@ -31,17 +31,6 @@ module.exports = {
           }
         ]
       },
-      {
-        test: /\.css$/,
-        loader: [
-          'style-loader',
-          { loader: 'css-loader', options: { modules: true } }
-        ]
-      },
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
-      },
       {
         test: /\.(png|jpg|gif)$/,
         loader: 'file-loader',