Useful snippets

scroll behavior in different css-positions

Discovery:

Set position: fixed|avsolute on parent element, and you can choose between instant and smooth scroll-behaviors (scroll-behavior: initial|smooth)

But with position: sticky|relative|static you can't choose. You're stuck with smooth scrolling

Generate CSS module classnames in Vite

import { defineConfig } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";

// https://vitejs.dev/config/
export default defineConfig({
css: {
modules: {
generateScopedName: (name, filename) => {
const f = filename.split("?")[0].split(".")[0];
const file = path.basename(f);
return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">;
}
}
},
});