Add css file

Author: martinRenou

css/ipycanvas.css

@@ -0,0 +1,5 @@
+.ipycanvas {
+  height: '500px';
+  overflow: 'hidden';
+  flex: '1 1 auto';
+}

package-lock.json

@@ -10,7 +10,8 @@
   ],
   "files": [
     "lib/**/*.js",
-    "dist/*.js"
+    "dist/*.js",
+    "css/*.css"
   ],
   "homepage": "https://github.com/martinRenou/ipycanvas",
   "bugs": {
@@ -44,7 +45,9 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^2.0.1",
-    "lodash": ">=4.17.13"
+    "css-loader": "^3.2.0",
+    "lodash": ">=4.17.13",
+    "style-loader": "^1.0.0"
   },
   "devDependencies": {
     "@phosphor/application": "^1.6.0",

package.json

@@ -9,6 +9,8 @@ import {
   MODULE_NAME, MODULE_VERSION
 } from './version';
 
+import '../css/ipycanvas.css'
+
 
 export
 class CanvasModel extends DOMWidgetModel {
@@ -62,9 +64,6 @@ class CanvasView extends DOMWidgetView {
     this.canvas.height = '100%';
 
     this.el.appendChild(this.canvas);
-    this.el.height = '500px';
-    this.el.overflow = 'hidden';
-    this.el.flex = '1 1 auto';
 
     this.ctx = this.canvas.getContext('2d');
 

src/widget.ts

@@ -4,7 +4,8 @@ const version = require('./package.json').version;
 // Custom webpack rules
 const rules = [
   { test: /\.ts$/, loader: 'ts-loader' },
-  { test: /\.js$/, loader: 'source-map-loader' }
+  { test: /\.js$/, loader: 'source-map-loader' },
+  { test: /\.css$/, use: ['style-loader', 'css-loader']},
 ];
 
 // Packages that shouldn't be bundled but loaded at runtime