feat: 引入 postcss-nested

Author: hooray

package.json

@@ -73,6 +73,7 @@
     "plop": "^4.0.1",
     "postcss": "^8.4.40",
     "postcss-html": "^1.7.0",
+    "postcss-nested": "^6.2.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
     "stylelint": "^16.8.1",

plop-templates/component/index.hbs

@@ -12,6 +12,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

plop-templates/page/index.hbs

@@ -10,6 +10,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    autoprefixer: {},
+    'autoprefixer': {},
+    'postcss-nested': {},
   },
 }

postcss.config.js

@@ -1,22 +1,27 @@
-// 页面布局 CSS 变量
+/* 页面布局 CSS 变量 */
 :root {
-  // 头部高度
+  /* 头部高度 */
   --g-header-height: 60px;
-  // 侧边栏宽度
+
+  /* 侧边栏宽度 */
   --g-main-sidebar-width: 80px;
   --g-sub-sidebar-width: 220px;
   --g-sub-sidebar-collapse-width: 64px;
-  // 侧边栏Logo高度
+
+  /* 侧边栏Logo高度 */
   --g-sidebar-logo-height: 50px;
-  // 顶栏高度
+
+  /* 顶栏高度 */
   --g-topbar-height: 50px;
-  // 窗口高度（仅在窗口预览时使用）
+
+  /* 窗口高度（仅在窗口预览时使用） */
   --g-window-height: 800px;
-  // 窗口预览缩放系数
+
+  /* 窗口预览缩放系数 */
   --g-window-perview-scale: 0.5;
 }
 
-// 明暗模式 CSS 变量
+/* 明暗模式 CSS 变量 */
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
   --g-box-shadow-color: rgb(0 0 0 / 12%);
@@ -89,7 +94,7 @@ body {
   box-sizing: inherit;
 }
 
-// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
 [data-fixed-calc-width] {
   position: fixed;
   right: 0;
@@ -98,20 +103,20 @@ body {
   transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
-// textarea 字体跟随系统
+/* textarea 字体跟随系统 */
 textarea {
   font-family: inherit;
 }
 
 /* Overrides Floating Vue */
 .v-popper--theme-dropdown,
 .v-popper--theme-tooltip {
-  --at-apply: inline-flex;
+  --uno: inline-flex;
 }
 
 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
+  --uno: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
 
   box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
 }
@@ -120,12 +125,12 @@ textarea {
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
 
-  --at-apply: border-white dark-border-stone-8;
+  --uno: border-white dark-border-stone-8;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,
 .v-popper--theme-dropdown .v-popper__arrow-outer {
-  --at-apply: border-stone/20;
+  --uno: border-stone/20;
 }
 
 .v-popper--theme-tooltip.v-popper--shown,

src/assets/styles/globals.scss renamed to src/assets/styles/globals.css

@@ -114,7 +114,7 @@ const onPreview: UploadProps['onPreview'] = (e) => {
   </ElUpload>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.el-upload.is-drag) {
   display: inline-block;
 

src/components/FileUpload/index.vue

@@ -34,7 +34,7 @@ const realHeight = computed(() => {
   </ElImage>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-image {
   background-color: var(--el-fill-color);
   border-radius: 5px;

src/components/ImagePreview/index.vue

@@ -136,7 +136,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -160,14 +160,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
     transition: opacity 0.3s;
 
     .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       width: 100px;
       height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
@@ -235,9 +237,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);

src/components/ImageUpload/index.vue

@@ -153,7 +153,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -180,14 +180,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
     transition: opacity 0.3s;
 
     .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       width: 100px;
       height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
@@ -260,9 +262,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);