Rollup weirdness and sourceMaps

public/stdin

@@ -0,0 +1,9 @@
+This file exists because I don't know how to use rollup properly, I guess.
+
+rollup-plugin-svelte in combination with rollup-plugin-scss (as a separate plugin, not in preprocessor) is emitting its stylesheets to a virtual file
+presumably that file gets read by rollup-plugin-scss (or rollup-plugin-postcss, which is used as processor there) as stdin instead of global.scss, putting it into the sourceMap
+
+(All of that is guesswork, I don't really know what's going on)
+
+If you can help me figure out how to fix it, please help me.
+https://github.com/Toby222/

rollup.config.mjs

@@ -1,10 +1,8 @@
-// import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 import autoprefixer from "autoprefixer";
 import child_process from "child_process";
 import postcss from "postcss";
-// import css from "rollup-plugin-css-only";
 import livereload from "rollup-plugin-livereload";
 import scss from "rollup-plugin-scss";
 import svelte from "rollup-plugin-svelte";
@@ -38,48 +36,52 @@ export default {
   input: "src/main.ts",
   output: {
     sourcemap: true,
-    format: "iife",
-    name: "app",
+    format: "module",
+    name: "sharg",
     file: "public/build/bundle.js",
+    externalLiveBindings: false,
+    preferConst: true,
+    strict: true,
   },
   plugins: [
+    // Svelte adds "stdin" to the sourceMap
     svelte({
-      preprocess: sveltePreprocess({
-        sourceMap: true,
-        scss: scss({
-          outputStyle: production ? "compressed" : "expanded",
+      preprocess: [
+        sveltePreprocess({
+          scss: {
+            renderSync: true,
+          },
         }),
-        postcss: postcss([autoprefixer()]),
-      }),
+      ],
       compilerOptions: {
         // enable run-time checks when not in production
         dev: !production,
       },
     }),
-    // these are necessary for non-component styles
-    // located in ./src/styles/*.scss
-    scss({
-      outputStyle: production ? "compressed" : "expanded",
-    }),
-    // css({ output: "bundle.css" }), // Redundant
-    postcss([autoprefixer()]),
 
-    // If you have external dependencies installed from
-    // npm, you'll most likely need these plugins. In
-    // some cases you'll need additional configuration -
-    // consult the documentation for details:
-    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    // The processor (postcss) adds "bundle.css" to the sourceMap
+    // but for some reason only in dev mode?
+    scss({
+      sourceMap: true,
+      outputStyle: production ? "compressed" : "expanded",
+      processor() {
+        // If this is a separate plugin, it doesn't seem to run (autoprefixer doesn't run)
+        return postcss({
+          plugins: [autoprefixer()],
+        });
+      },
+    }),
+
     resolve({
       browser: true,
       dedupe: ["svelte"],
     }),
-    // commonjs(),
     typescript({
       sourceMap: true,
-      inlineSources: !production,
+      inlineSources: true,
     }),
 
-    // In dev mode, call `npm run start` once
+    // In dev mode, call `yarn start` once
     // the bundle has been generated
     !production && serve(),
 
@@ -87,9 +89,13 @@ export default {
     // browser on changes when not in production
     !production && livereload("public"),
 
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
-    production && terser(),
+    // If we're building for production (yarn build
+    // instead of yarn dev), minify js
+    production &&
+      terser({
+        mangle: false,
+        output: { comments: false },
+      }),
   ],
   watch: {
     clearScreen: false,

src/styles/global.scss

@@ -1,49 +1,6 @@
+// This file exists because I can't get rollup to stop outputting stdin in my stylesheet sourcemaps
+// Somehow this circumvents it
+// (It still outputs stdin but now it also outputs the correct thing)
+
 @use "./themes.scss";
-
-html {
-  height: calc(100vh);
-}
-body {
-  height: 100%;
-  margin: 0;
-  font-family: Verdana, Geneva, sans-serif;
-  text-align: center;
-}
-
-a {
-  &:is(:active, :hover, :visited, :link) {
-    color: var(--color-lighter);
-  }
-  &:hover {
-    filter: brightness(125%);
-  }
-  &:active {
-    filter: brightness(135%);
-  }
-  &[disabled="true"] {
-    pointer-events: none;
-  }
-}
-
-button {
-  background-color: var(--color-light);
-  border: 1px solid var(--color-lighter);
-  border-radius: 5px;
-  text-shadow: 0 0 2px black;
-  color: white;
-
-  user-select: none;
-
-  &:hover {
-    box-shadow: 0 0 2px 2px var(--color-lighter);
-  }
-  &:active {
-    background-color: var(--color-dark);
-    color: var(--color-light);
-    box-shadow: 0 3px 7px 7px var(--color-darker) inset;
-  }
-
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-}
+@use "./shark-styles.scss";

src/styles/shark-styles.scss

@@ -0,0 +1,47 @@
+html {
+  height: 100vh;
+}
+body {
+  height: 100%;
+  margin: 0;
+  font-family: Verdana, Geneva, sans-serif;
+  text-align: center;
+}
+
+a {
+  &:is(:active, :hover, :visited, :link) {
+    color: var(--color-lighter);
+  }
+  &:hover {
+    filter: brightness(125%);
+  }
+  &:active {
+    filter: brightness(135%);
+  }
+  &[disabled="true"] {
+    pointer-events: none;
+  }
+}
+
+button {
+  background-color: var(--color-light);
+  border: 1px solid var(--color-lighter);
+  border-radius: 5px;
+  text-shadow: 0 0 2px black;
+  color: white;
+
+  user-select: none;
+
+  &:hover {
+    box-shadow: 0 0 2px 2px var(--color-lighter);
+  }
+  &:active {
+    background-color: var(--color-dark);
+    color: var(--color-light);
+    box-shadow: 0 3px 7px 7px var(--color-darker) inset;
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}