Rollup weirdness and sourceMaps

This commit is contained in:
Tobias Berger 2021-09-29 17:38:53 +02:00
parent 4e0db77a4d
commit e00ad43047
4 changed files with 95 additions and 76 deletions

9
public/stdin Normal file
View file

@ -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/

View file

@ -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,

View file

@ -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";

View file

@ -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;
}
}