WIP use sass modules

mistic100 · Dec 12, 2024 · de88096 · de88096
1 parent ad19122
commit de88096
Show file tree

Hide file tree

Showing 20 changed files with 512 additions and 244 deletions.
diff --git a/build/tsup.config.ts b/build/tsup.config.ts
@@ -37,7 +37,7 @@ ${
         if (!dev) {
             plugins.push(
                 budgetPlugin(pkg.psv.budget),
-                scssBundlePlugin(),
+                // scssBundlePlugin(),
                 assetsPlugin({
                     'LICENSE': license(),
                     '.npmrc': npmrc(),

diff --git a/packages/compass-plugin/src/style.scss b/packages/compass-plugin/src/style.scss
@@ -1,4 +1,4 @@
-@import '../../shared/vars';
+@use '../../shared/vars';
 
 $psv-compass-margin: 10px !default;
 

diff --git a/packages/core/src/styles/index.scss b/packages/core/src/styles/index.scss
@@ -1,12 +1,9 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@import '../../../shared/vars';
-@import 'viewer';
-@import 'loader';
-@import 'navbar';
-@import 'zoom-range';
-@import 'notification';
-@import 'overlay';
-@import 'panel';
-@import 'tooltip';
+@use 'viewer';
+@use 'loader';
+@use 'navbar';
+@use 'zoom-range';
+@use 'notification';
+@use 'overlay';
+@use 'panel';
+@use 'tooltip';
+@forward '../../../shared/vars';
diff --git a/packages/core/src/styles/loader.scss b/packages/core/src/styles/loader.scss
@@ -1,3 +1,5 @@
+@use '../../../shared/vars' as psv;
+
 .psv-loader-container {
     display: flex;
     align-items: center;
@@ -7,33 +9,33 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: $psv-loader-zindex;
+    z-index: psv.$loader-zindex;
 }
 
 .psv-loader {
-    --psv-loader-border: #{$psv-loader-border};
-    --psv-loader-tickness: #{$psv-loader-tickness};
+    --psv-loader-border: #{psv.$loader-border};
+    --psv-loader-tickness: #{psv.$loader-tickness};
 
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: $psv-loader-color;
-    width: $psv-loader-width;
-    height: $psv-loader-width;
+    color: psv.$loader-color;
+    width: psv.$loader-width;
+    height: psv.$loader-width;
 
     &-canvas {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        color: $psv-loader-bg-color;
+        color: psv.$loader-bg-color;
         z-index: -1;
     }
 
     &-text {
-        font: $psv-loader-font;
+        font: psv.$loader-font;
         text-align: center;
     }
 }
diff --git a/packages/core/src/styles/navbar.scss b/packages/core/src/styles/navbar.scss
@@ -1,14 +1,17 @@
+@use 'sass:list';
+@use '../../../shared/vars' as psv;
+
 .psv-navbar {
     display: flex;
     position: absolute;
-    z-index: $psv-navbar-zindex;
-    bottom: -$psv-navbar-height;
+    z-index: psv.$navbar-zindex;
+    bottom: -#{psv.$navbar-height};
     left: 0;
     width: 100%;
-    height: $psv-navbar-height;
-    background: $psv-navbar-background;
+    height: psv.$navbar-height;
+    background: psv.$navbar-background;
     transition: bottom ease-in-out 0.1s;
-    font: $psv-caption-font;
+    font: psv.$caption-font;
     cursor: default;
 
     &--open {
@@ -23,47 +26,47 @@
 
 .psv-button {
     flex: 0 0 auto;
-    padding: $psv-buttons-padding;
+    padding: psv.$buttons-padding;
     position: relative;
     cursor: pointer;
-    height: $psv-buttons-height;
-    width: $psv-buttons-height;
-    background: $psv-buttons-background;
-    color: $psv-buttons-color;
+    height: psv.$buttons-height;
+    width: psv.$buttons-height;
+    background: psv.$buttons-background;
+    color: psv.$buttons-color;
 
     &--active {
-        background: $psv-buttons-active-background;
+        background: psv.$buttons-active-background;
     }
 
     &--disabled {
         pointer-events: none;
-        opacity: $psv-buttons-disabled-opacity;
+        opacity: psv.$buttons-disabled-opacity;
     }
 
     &-svg {
         width: 100%;
         transform: scale(1);
-        transition: transform $psv-buttons-hover-scale-delay ease;
+        transition: transform psv.$buttons-hover-scale-delay ease;
         vertical-align: initial;
     }
 }
 
 .psv-button:not(.psv-button--disabled):focus-visible {
-    outline: $psv-element-focus-outline;
-    outline-offset: -#{list.nth($psv-element-focus-outline, 1)};
+    outline: psv.$element-focus-outline;
+    outline-offset: -#{list.nth(psv.$element-focus-outline, 1)};
 }
 
 .psv-container:not(.psv--is-touch) .psv-button--hover-scale:not(.psv-button--disabled):hover .psv-button-svg {
-    transform: scale($psv-buttons-hover-scale);
+    transform: scale(psv.$buttons-hover-scale);
 }
 
 .psv-move-button + .psv-move-button {
-    margin-left: -$psv-buttons-padding;
+    margin-left: -#{psv.$buttons-padding};
 }
 
 .psv-custom-button {
     width: auto;
-    min-width: $psv-buttons-height;
+    min-width: psv.$buttons-height;
 
     &--no-padding {
         padding: 0;
@@ -73,7 +76,7 @@
 
 .psv-caption {
     flex: 1 1 100%;
-    color: $psv-caption-text-color;
+    color: psv.$caption-text-color;
     overflow: hidden;
     text-align: center;
     cursor: unset;
@@ -83,7 +86,7 @@
 
     &-content {
         display: inline-block;
-        padding: $psv-buttons-padding;
+        padding: psv.$buttons-padding;
         white-space: nowrap;
     }
 }
diff --git a/packages/core/src/styles/notification.scss b/packages/core/src/styles/notification.scss
@@ -1,7 +1,9 @@
+@use '../../../shared/vars' as psv;
+
 .psv-notification {
     position: absolute;
-    z-index: $psv-notification-zindex;
-    bottom: $psv-notification-position-from;
+    z-index: psv.$notification-zindex;
+    bottom: psv.$notification-position-from;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
@@ -10,19 +12,19 @@
     opacity: 0;
     transition-property: opacity, bottom;
     transition-timing-function: ease-in-out;
-    transition-duration: $psv-notification-animate-delay;
+    transition-duration: psv.$notification-animate-delay;
 
     &-content {
         max-width: 50em;
-        background: $psv-notification-background;
-        border-radius: $psv-notification-radius;
-        padding: $psv-notification-padding;
-        font: $psv-notification-font;
-        color: $psv-notification-text-color;
+        background: psv.$notification-background;
+        border-radius: psv.$notification-radius;
+        padding: psv.$notification-padding;
+        font: psv.$notification-font;
+        color: psv.$notification-text-color;
     }
 
     &--visible {
         opacity: 100;
-        bottom: $psv-notification-position-to;
+        bottom: psv.$notification-position-to;
     }
 }
diff --git a/packages/core/src/styles/overlay.scss b/packages/core/src/styles/overlay.scss
@@ -1,39 +1,42 @@
+@use 'sass:map';
+@use '../../../shared/vars' as psv;
+
 .psv-overlay {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: $psv-overlay-zindex;
+    z-index: psv.$overlay-zindex;
     inset: 0;
-    background: $psv-main-background;
-    opacity: $psv-overlay-opacity;
+    background: psv.$main-background;
+    opacity: psv.$overlay-opacity;
     cursor: default;
 
     &-image {
         width: 100%;
         text-align: center;
-        color: $psv-overlay-icon-color;
+        color: psv.$overlay-icon-color;
 
         svg {
-            width: map.get($psv-overlay-image-size, portrait);
+            width: map.get(psv.$overlay-image-size, portrait);
 
             @container psv-container (orientation: landscape) {
-                width: map.get($psv-overlay-image-size, landscape);
+                width: map.get(psv.$overlay-image-size, landscape);
             }
         }
     }
 
     &-title {
-        color: $psv-overlay-title-color;
+        color: psv.$overlay-title-color;
         margin-top: 1em;
-        font: $psv-overlay-title-font;
+        font: psv.$overlay-title-font;
         text-align: center;
     }
 
     &-text {
-        color: $psv-overlay-text-color;
-        font: $psv-overlay-text-font;
+        color: psv.$overlay-text-color;
+        font: psv.$overlay-text-font;
         opacity: 0.8;
         text-align: center;
     }