Merge pull request #57 from usernamehw/cell_border

Import styles from css file

Author: RandomFractals

src/renderer/render.ts

@@ -4,6 +4,7 @@ import type {
 import { OutputLoader } from './outputLoader';
 const aq = require('arquero');
 const inputs = require('@observablehq/inputs');
+import './style.css';
 
 /**
  * Notebook cell output render info.
@@ -32,9 +33,6 @@ export function render(output: IRenderInfo) {
       break;
   }
 
-  // add data table view styles
-  addStyles(document);
-
   if (Array.isArray(data)) {
     // create data table view
     const table = inputs.table(data, {
@@ -85,41 +83,3 @@ if (module.hot) {
 
   return 0;
 }
-
-function addStyles(document: HTMLDocument): HTMLStyleElement {
-  const styles: HTMLStyleElement = document.createElement('style');
-  document.head.appendChild(styles);
-  styles.textContent = `
-  .data-table {
-    max-width: 100%;
-    background-color: var(--vscode-editor-background);
-    border: 1px solid var(--vscode-panel-border);
-  }
-
-  .data-table form {
-    margin: 0px !important;
-  }
-
-  tbody tr:hover {
-    box-shadow: inset 0 0 1500px 100px rgba(255, 255, 255, 0.1);
-  }
-
-  .vscode-light tbody tr:hover {
-    box-shadow: inset 0 0 1500px 100px rgba(0, 0, 0, 0.1);
-  }
-
-  .data-table form table thead th {
-    background-color: var(--vscode-editor-background) !important;
-  }
-
-  thead th {
-    box-shadow: 0 1px 0 var(--vscode-panel-border) !important;
-  }
-
-  th {
-    text-align: left !important;
-  }
-  `;
-
-  return styles;
-}

src/renderer/style.css

@@ -27,3 +27,4 @@ thead th {
 th {
   text-align: left !important;
 }
+

webpack.config.js

@@ -43,21 +43,15 @@ module.exports = (env, argv) => ({
         test: /\.css$/,
         use: [
           'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1,
-              modules: true,
-            },
-          },
+          'css-loader',
         ],
       },
     ],
   },
   devServer: {
     port: devServerPort,
     hot: true,
-    // disable host check, otherwise the bundle running in vscode 
+    // disable host check, otherwise the bundle running in vscode
     // won't be able to connect to the dev server
     disableHostCheck: true,
     writeToDisk: true,