Play with vite css

Author: vtm9

services/app/apps/codebattle/assets/js/app.js

@@ -13,25 +13,25 @@
 //
 // If you no longer want to use a dependency, remember
 // to also remove its path from "config.paths.watched".
-import 'core-js/stable';
+import "core-js/stable";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import 'regenerator-runtime/runtime';
-import 'phoenix_html';
-import '@fortawesome/fontawesome-free/js/all';
-import '../css/style.scss';
-import 'bootstrap';
+import "regenerator-runtime/runtime";
+import "phoenix_html";
+import "@fortawesome/fontawesome-free/js/all";
+// import '../css/style.scss';
+import "bootstrap";
 
-import { inspect } from '@xstate/inspect';
-import NProgress from 'nprogress';
-import { Socket } from 'phoenix';
-import { LiveSocket } from 'phoenix_live_view';
+import { inspect } from "@xstate/inspect";
+import NProgress from "nprogress";
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
 
 // Import local files
 //
 // Local files can be imported directly using relative
 // paths "./socket" or full ones "web/static/js/socket".
 
-import './widgets/lib/sentry';
+import "./widgets/lib/sentry";
 import {
   renderBuilderWidget,
   renderEventPage,
@@ -51,11 +51,11 @@ import {
   renderTournamentsSchedule,
   renderUserPage,
   renderUsersRating,
-} from './widgets';
+} from "./widgets";
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
   inspect({
-    iframe: () => document.querySelector('.xstate'),
+    iframe: () => document.querySelector(".xstate"),
   });
 }
 
@@ -70,16 +70,16 @@ const Hooks = {
   },
   TournamentChatInput: {
     mounted() {
-      this.handleEvent('clear', ({ value }) => {
+      this.handleEvent("clear", ({ value }) => {
         this.el.value = value;
       });
     },
   },
 };
 const csrfToken = document
   .querySelector("meta[name='csrf-token']")
-  .getAttribute('content');
-const liveSocket = new LiveSocket('/live', Socket, {
+  .getAttribute("content");
+const liveSocket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
   params: {
     _csrf_token: csrfToken,
@@ -88,31 +88,31 @@ const liveSocket = new LiveSocket('/live', Socket, {
   },
 });
 
-window.addEventListener('phx:page-loading-start', _info => NProgress.start());
-window.addEventListener('phx:page-loading-stop', _info => NProgress.done());
+window.addEventListener("phx:page-loading-start", (_info) => NProgress.start());
+window.addEventListener("phx:page-loading-stop", (_info) => NProgress.done());
 
 liveSocket.connect();
 
-const builderWidgetRoot = document.getElementById('builder-widget-root');
-const gameWidgetRoot = document.getElementById('game-widget-root');
-const heatmapRoot = document.getElementById('heatmap-root');
-const onlineRoot = document.getElementById('online-root');
-const invitesRoot = document.getElementById('invites-root');
-const streamRoot = document.getElementById('stream-classic-root');
-const lobbyRoot = document.getElementById('lobby-root');
-const ratingList = document.getElementById('rating-list');
-const registrationRoot = document.getElementById('registration');
-const settingsRoot = document.getElementById('settings');
-const stairwayGameRoot = document.getElementById('stairway-game-root');
-const tournamentPlayerRoot = document.getElementById('tournament-player-root');
-const tournamentRoot = document.getElementById('tournament-root');
-const adminTournamentRoot = document.getElementById('tournament-admin-root');
-const eventWidgetRoot = document.getElementById('event-widget');
-const userPageRoot = document.getElementById('user-page-root');
+const builderWidgetRoot = document.getElementById("builder-widget-root");
+const gameWidgetRoot = document.getElementById("game-widget-root");
+const heatmapRoot = document.getElementById("heatmap-root");
+const onlineRoot = document.getElementById("online-root");
+const invitesRoot = document.getElementById("invites-root");
+const streamRoot = document.getElementById("stream-classic-root");
+const lobbyRoot = document.getElementById("lobby-root");
+const ratingList = document.getElementById("rating-list");
+const registrationRoot = document.getElementById("registration");
+const settingsRoot = document.getElementById("settings");
+const stairwayGameRoot = document.getElementById("stairway-game-root");
+const tournamentPlayerRoot = document.getElementById("tournament-player-root");
+const tournamentRoot = document.getElementById("tournament-root");
+const adminTournamentRoot = document.getElementById("tournament-admin-root");
+const eventWidgetRoot = document.getElementById("event-widget");
+const userPageRoot = document.getElementById("user-page-root");
 const tournamentsScheduleRoot = document.getElementById(
-  'tournaments-schedule-root',
+  "tournaments-schedule-root",
 );
-const hallOfFameRoot = document.getElementById('hall-of-fame-root');
+const hallOfFameRoot = document.getElementById("hall-of-fame-root");
 
 if (gameWidgetRoot) {
   renderGameWidget(gameWidgetRoot);

services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex

@@ -36,6 +36,7 @@
     <meta content="#ffffff" name="theme-color" />
     <%= render_tags_all(assigns[:meta_tags] || %{}) %>
     <meta name="csrf-token" content={csrf_token_value()} />
+    <link rel="stylesheet" href={CodebattleWeb.Vite.asset_path("styles.css")} />
     <%= if CodebattleWeb.Vite.dev?() do %>
       <script type="module" src="http://localhost:8080/@vite/client"></script>
       <!-- React Fast Refresh preamble -->

services/app/apps/codebattle/vite.config.js

@@ -51,6 +51,18 @@ export default defineConfig(({ command, mode }) => ({
   define: {
     gon: "window.gon",
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        includePaths: [path.resolve(__dirname, "assets/css")],
+        silenceDeprecations: ["mixed-decls"],
+      },
+    },
+    modules: {
+      localsConvention: "dashes",
+      generateScopedName: "[local]_[hash:base64:4]",
+    },
+  },
   plugins: [
     react(),
     poLoader(),