diff --git a/public/stdin b/public/stdin new file mode 100644 index 0000000..525c42c --- /dev/null +++ b/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/ \ No newline at end of file diff --git a/rollup.config.mjs b/rollup.config.mjs index 4baf91c..78ae1c8 100644 --- a/rollup.config.mjs +++ b/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, diff --git a/src/styles/global.scss b/src/styles/global.scss index 480aedf..423b0a8 100644 --- a/src/styles/global.scss +++ b/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"; diff --git a/src/styles/shark-styles.scss b/src/styles/shark-styles.scss new file mode 100644 index 0000000..3427e5b --- /dev/null +++ b/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; + } +}