chore: update sass

liriliri · Oct 28, 2024 · 44d8db7 · 44d8db7
1 parent cb2a420
commit 44d8db7
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 66 deletions.
diff --git a/lib/util.js b/lib/util.js
@@ -47,12 +47,8 @@ exports.wrap = function (fn, condition) {
       components = topoSort(dependencies)
       components.shift()
     }
-    try {
-      for (let component of components) {
-        await fn(component, options)
-      }
-    } catch (e) {
-      console.error(e)
+    for (let component of components) {
+      await fn(component, options)
     }
   }
 }

diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "postcss-prefixer": "^2.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "sass": "^1.62.1",
+    "sass": "^1.80.4",
     "sass-loader": "^10.2.0",
     "shelljs": "^0.8.3",
     "signal-exit": "^3.0.7",

diff --git a/src/box-model/style.scss b/src/box-model/style.scss
@@ -1,11 +1,14 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-box-model {
-  @include component();
-  display: inline-block;
-  font-size: #{$font-size-s-m}px;
-  text-align: center;
-  white-space: nowrap;
+  @include mixin.component();
+  & {
+    display: inline-block;
+    font-size: #{theme.$font-size-s-m}px;
+    text-align: center;
+    white-space: nowrap;
+  }
 }
 
 .label {
@@ -34,38 +37,38 @@
   vertical-align: middle;
   padding: 3px;
   margin: 3px;
-  color: $color-text;
-  background: $color-bg-container;
+  color: theme.$color-text;
+  background: theme.$color-bg-container;
 }
 .position {
   border: 1px grey dotted;
 }
 .margin {
   border: 1px dashed;
   &.highlighted {
-    color: $color-text !important;
+    color: theme.$color-text !important;
     background: rgba(246, 178, 107, 0.66) !important;
   }
 }
 .border {
   border: 1px #000 solid;
   &.highlighted {
-    color: $color-text !important;
+    color: theme.$color-text !important;
     background: rgba(255, 229, 153, 0.66) !important;
   }
 }
 .padding {
   border: 1px grey dashed;
   &.highlighted {
-    color: $color-text !important;
+    color: theme.$color-text !important;
     background: rgba(147, 196, 125, 0.55) !important;
   }
 }
 .content {
   border: 1px grey solid;
   min-width: 100px;
   &.highlighted {
-    color: $color-text !important;
+    color: theme.$color-text !important;
     background: rgba(111, 168, 220, 0.66) !important;
   }
 }
@@ -76,8 +79,8 @@
   .border,
   .padding,
   .content {
-    color: $color-text-dark;
-    background: $color-bg-container-dark;
+    color: theme.$color-text-dark;
+    background: theme.$color-bg-container-dark;
   }
   .border {
     border-color: grey;

diff --git a/src/carousel/style.scss b/src/carousel/style.scss
@@ -1,16 +1,14 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-carousel {
-  @include component();
-  background: #000;
-  width: 100%;
-  height: 100%;
-  min-height: 150px;
-  font-family: $font-family;
-  user-select: none;
-  position: relative;
-  * {
-    box-sizing: border-box;
+  @include mixin.component();
+  & {
+    background: #000;
+    width: 100%;
+    height: 100%;
+    min-height: 150px;
+    position: relative;
   }
   &:hover {
     .arrow-left,

diff --git a/src/logcat/style.scss b/src/logcat/style.scss
@@ -1,16 +1,19 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-logcat {
-  @include component();
-  padding-left: #{$padding-x-x-s}px;
-  font-family: $font-family-code;
-  unicode-bidi: embed;
-  position: relative;
-  overflow: auto;
-  line-height: #{$line-height-l-g}em;
-  border: 1px solid $color-border;
-  white-space: pre;
-  user-select: text;
+  @include mixin.component();
+  & {
+    padding-left: #{theme.$padding-x-x-s}px;
+    font-family: theme.$font-family-code;
+    unicode-bidi: embed;
+    position: relative;
+    overflow: auto;
+    line-height: #{theme.$line-height-l-g}em;
+    border: 1px solid theme.$color-border;
+    white-space: pre;
+    user-select: text;
+  }
   &.wrap-long-lines {
     white-space: pre-wrap;
     word-break: break-all;
@@ -21,7 +24,7 @@
 }
 
 .entry {
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
 }
 
 .date,
@@ -43,7 +46,7 @@
 }
 
 .date {
-  margin-right: #{$margin-x-x-s}px;
+  margin-right: #{theme.$margin-x-x-s}px;
 }
 
 .pid {
@@ -59,68 +62,68 @@
 }
 
 .priority {
-  padding: 0 #{$padding-x-s}px;
+  padding: 0 #{theme.$padding-x-s}px;
 }
 
 .W {
   .priority {
-    background: $color-warning-text;
+    background: theme.$color-warning-text;
   }
   .message {
-    color: $color-warning-text;
+    color: theme.$color-warning-text;
   }
 }
 
 .E {
   .priority {
-    background: $color-error-text;
+    background: theme.$color-error-text;
   }
   .message {
-    color: $color-error-text;
+    color: theme.$color-error-text;
   }
 }
 
 .D {
   .priority {
-    background: $color-success-text;
+    background: theme.$color-success-text;
   }
 }
 
 .I {
   .priority {
-    background: $color-info-text;
+    background: theme.$color-info-text;
   }
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .W {
     .priority {
-      background: $color-warning-text-dark;
+      background: theme.$color-warning-text-dark;
     }
     .message {
-      color: $color-warning-text-dark;
+      color: theme.$color-warning-text-dark;
     }
   }
 
   .E {
     .priority {
-      background: $color-error-text-dark;
+      background: theme.$color-error-text-dark;
     }
     .message {
-      color: $color-error-text-dark;
+      color: theme.$color-error-text-dark;
     }
   }
 
   .D {
     .priority {
-      background: $color-success-text-dark;
+      background: theme.$color-success-text-dark;
     }
   }
 
   .I {
     .priority {
-      background: $color-info-text-dark;
+      background: theme.$color-info-text-dark;
     }
   }
 }
diff --git a/src/share/mixin.scss b/src/share/mixin.scss
@@ -1,4 +1,4 @@
-@import './theme';
+@use './theme' as theme;
 
 @mixin overflow-auto($direction: 'both') {
   @if $direction == 'both' {
@@ -10,12 +10,12 @@
 }
 
 @mixin component {
-  color: $color-text;
-  background-color: $color-bg-container;
-  font-family: $font-family;
+  color: theme.$color-text;
+  background-color: theme.$color-bg-container;
+  font-family: theme.$font-family;
   box-sizing: border-box;
   user-select: none;
-  font-size: #{$font-size}px;
+  font-size: #{theme.$font-size}px;
   &.hidden,
   .hidden {
     display: none;
@@ -29,8 +29,8 @@
   }
   &.theme-dark {
     color-scheme: dark;
-    color: $color-text-dark;
-    background-color: $color-bg-container-dark;
+    color: theme.$color-text-dark;
+    background-color: theme.$color-bg-container-dark;
   }
 }