Build css with rollup too!

3 years ago · c45db0ddee
7 changed files with 3174 additions and 56 deletions
--- a/8
+++ b/8
@ -136,10 +136,10 @@ function task_client {
				@@ -136,10 +136,10 @@ function task_client {
 	cp client_src/index.html "${build_output_folder}";
 	task_end $?;
 	
-	task_begin "Copying css";
-	# FUTURE: Package this up too?
-	cp -r client_src/css/ "${build_output_folder}";
-	task_end $?;
+	# task_begin "Copying css";
+	# # FUTURE: Package this up too?
+	# cp -r client_src/css/ "${build_output_folder}";
+	# task_end $?;
 }

 function task_client-watch {
--- a/client_src/css/main.css
+++ b/client_src/css/main.css
@ -0,0 +1 @@
				@@ -0,0 +1 @@
+@import "../../node_modules/leaflet/dist/leaflet.css";
--- a/client_src/index.html
+++ b/client_src/index.html
@ -5,10 +5,10 @@
				@@ -5,10 +5,10 @@
 		<title>Air Quality Map | ConnectedHumber</title>
 	</head>
 	<body>
-		content here
+		
 		
 		<!---------------->
-		<link rel="stylesheet" href="/css/main.css" />
+		<link rel="stylesheet" href="client.css" />
 		<script src="app.js" charset="utf-8"></script>
 	</body>
 </html>
--- a/client_src/js/index.mjs
+++ b/client_src/js/index.mjs
@ -1,5 +1,7 @@
				@@ -1,5 +1,7 @@
 "use strict";

+import '../css/main.css';
+
 window.addEventListener("load", function(_event) {
 	
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -23,8 +23,11 @@
				@@ -23,8 +23,11 @@
    "leaflet-webgl-heatmap": "^0.2.7"
  },
  "devDependencies": {
+    "postcss-import": "^12.0.1",
+    "postcss-url": "^8.0.0",
    "rollup": "^1.1.0",
    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.0"
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-postcss": "^1.6.3"
  }
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,5 +1,9 @@
				@@ -1,5 +1,9 @@
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+
+import postcss_import from 'postcss-import';
+import postcss_url from 'postcss-url';

 export default {
 	input: 'client_src/js/index.mjs',
@ -33,6 +37,20 @@ export default {
				@@ -33,6 +37,20 @@ export default {
 		
 		commonjs({
 			
+		}),
+		
+		postcss({
+			plugins: [
+				postcss_import({}),
+				postcss_url({
+					url: "rebase"
+				})
+			],
+			// Save it to a .css file - we'll reference it ourselves thank you 
+			// very much
+			extract: true,
+			sourceMap: true,
+			//minimize: true, // Causes an error at the moment for some reason
 		})
 	]
 };
				`@ -0,0 +1 @@` @@ -0,0 +1 @@
				`@import "../../node_modules/leaflet/dist/leaflet.css";`