Move to webpack css-loader (OctoLinker#378)

stefanbuck · web-flow · commit 3a5a79891c7b · 2017-10-05T08:00:22.000+02:00
diff --git a/assets/manifest.json b/assets/manifest.json
@@ -31,9 +31,6 @@
       "js": [
         "app.js"
       ],
-      "css": [
-        "style.css"
-      ],
       "run_at": "document_idle",
       "all_frames": false
     }
diff --git a/assets/options.html b/assets/options.html
@@ -2,9 +2,6 @@
 <head>
   <meta charset="UTF-8">
   <title></title>
-  <link href="core.css" media="all" rel="stylesheet" />
-  <link href="form.css" media="all" rel="stylesheet" />
-  <link href="options.css" media="all" rel="stylesheet" />
 </head>
 <body>
   <div id="options"></div>
diff --git a/lib/app.css b/lib/app.css
diff --git a/lib/app.js b/lib/app.js
@@ -1,6 +1,7 @@
 import 'core-js/fn/object/entries';
 import OctoLinker from './octo-linker.js';
 import * as storage from './options/storage.js';
+import './app.css';
 
 storage.load().then(() => {
   const octoLinker = new OctoLinker();
diff --git a/lib/options/options.css b/lib/options/options.css
diff --git a/lib/options/page.js b/lib/options/page.js
@@ -1,3 +1,7 @@
+import 'primer-core/build/build.css';
+import 'primer-forms/build/build.css';
+import './options.css';
+
 import components from './components';
 import * as storage from './storage';
 import { options } from './options';
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "chrome-promise": "^2.1.1",
     "concat-map": "^0.0.1",
     "core-js": "^2.5.1",
+    "css-loader": "^0.28.7",
     "escape-regex-string": "^1.0.4",
     "findandreplacedomtext": "^0.4.5",
     "github-injection": "^1.0.1",
@@ -73,6 +74,7 @@
     "querystring": "^0.2.0",
     "semver": "^5.4.1",
     "semver-regex": "^1.0.0",
+    "style-loader": "^0.19.0",
     "uuid": "^3.1.0",
     "xregexp": "^3.2.0"
   },
diff --git a/webpack.config.js b/webpack.config.js
@@ -18,17 +18,17 @@ module.exports = {
     ], {
       ignore: ['manifest.json'],
     }),
-    new CopyWebpackPlugin([
-      { from: 'node_modules/primer-core/build/', to: 'core.css' },
-      { from: 'node_modules/primer-forms/build/', to: 'form.css' },
-    ]),
   ],
   module: {
-    loaders: [
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
-        loader: 'babel-loader',
+        use: 'babel-loader',
       },
     ],
   },
diff --git a/yarn.lock b/yarn.lock
