Useful snippets

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">;
}
}
},
});