Add linaria to svelte-webpack

Author: madhavarshney

svelte-webpack/package.json

@@ -4,6 +4,7 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
+    "linaria": "^1.3.3",
     "mini-css-extract-plugin": "^0.6.0",
     "serve": "^11.0.0",
     "style-loader": "^0.23.1",

svelte-webpack/src/App.svelte

@@ -1,11 +1,23 @@
 <script>
+	import { css } from 'linaria';
+	import { externalStyle } from './styles.js';
+
 	export let name;
+
+	const localStyle = css`
+		color: green;
+	`;
 </script>
 
 <style>
 	h1 {
 		color: purple;
 	}
+	code {
+		font-size: 16px;
+	}
 </style>
 
-<h1>Hello {name}!</h1>
+<h1>Hello {name}!</h1>
+<p class={localStyle}>This is styled with Linaria styles in a <code>.svelte</code> file</p>
+<p class={externalStyle}>This is using Linaria styles imported from a <code>.js</code> file!</p>

svelte-webpack/src/styles.js

@@ -0,0 +1,5 @@
+import { css } from 'linaria';
+
+export const externalStyle = css`
+    font-style: italic;
+`;

svelte-webpack/webpack.config.js

@@ -4,6 +4,14 @@ const path = require('path');
 const mode = process.env.NODE_ENV || 'development';
 const prod = mode === 'production';
 
+const linariaLoader = {
+	loader: 'linaria/loader',
+	options: {
+		sourceMap: !prod,
+		cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/.linaria-cache')
+	}
+};
+
 module.exports = {
 	entry: {
 		bundle: ['./src/main.js']
@@ -22,15 +30,24 @@ module.exports = {
 	},
 	module: {
 		rules: [
+			{
+				test: /\.m?js$/,
+				exclude: /node_modules/,
+				use: [linariaLoader]
+			},
 			{
 				test: /\.svelte$/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						emitCss: true,
-						hotReload: true
-					}
-				}
+				use: [
+					linariaLoader,
+					{
+						loader: 'svelte-loader',
+						options: {
+							dev: !prod,
+							emitCss: true,
+							hotReload: true
+						},
+					},
+				],
 			},
 			{
 				test: /\.css$/,