added idomatic css order and css nesting

frontend/.stylelintrc.json

@@ -1 +1,8 @@
-{ "extends": ["stylelint-config-standard", "stylelint-config-recommended-vue"] }
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-vue",
+    "stylelint-config-idiomatic-order"
+  ],
+  "plugins": ["stylelint-order"]
+}

frontend/package.json

@@ -30,15 +30,20 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.1.0",
     "npm-run-all2": "^6.2.0",
     "postcss-html": "^1.7.0",
+    "postcss-nesting": "^12.1.5",
+    "postcss-sorting": "^8.0.2",
     "prettier": "^3.2.5",
     "stylelint": "^16.6.1",
+    "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",

frontend/src/assets/styles/_reset.css

@@ -13,8 +13,8 @@
 }
 
 body {
-  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
 }
 
 img,

frontend/src/assets/styles/_typography.css

@@ -9,8 +9,8 @@
 }
 
 body {
-  font-family: Geist, sans-serif;
   color: var(--text-color);
+  font-family: Geist, sans-serif;
 }
 
 code {

frontend/src/components/FileTree.vue

@@ -1,5 +1,22 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="file-tree">file tree</div>
+  <div class="file-tree">
+    <div class="tree-item">1</div>
+    <div class="tree-item">2</div>
+    <div class="tree-item">3</div>
+    <div class="tree-item">4</div>
+  </div>
 </template>
+
+<style>
+.file-tree {
+  padding: 1em;
+  background-color: green;
+
+  .tree-item {
+    padding: 1em;
+    background-color: yellow;
+  }
+}
+</style>

frontend/vite.config.ts

@@ -1,18 +1,22 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueDevTools from "vite-plugin-vue-devtools";
+import autoprefixer from "autoprefixer";
+import postcssNesting from "postcss-nesting";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
+  plugins: [vue(), vueDevTools()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [autoprefixer, postcssNesting],
+    },
+  },
+});