Closes #1513 Migrate to SASS modules

build/plugins/esbuild-plugin-scss-bundle.ts

@@ -1,11 +1,10 @@
 import type { Plugin } from 'esbuild';
-import { mkdir, writeFile } from 'fs/promises';
+import { mkdir, readFile, writeFile } from 'fs/promises';
+import { glob } from 'glob';
 import path from 'path';
-import { Bundler } from 'scss-bundle';
-import prettyBytes from 'pretty-bytes';
 
 /**
- * Generates a bundled scss file
+ * Copy SCSS files and generates main index.scss
  */
 export function scssBundlePlugin(): Plugin {
     return {
@@ -15,25 +14,33 @@ export function scssBundlePlugin(): Plugin {
                 return;
             }
 
-            const outdir = build.initialOptions.outdir;
-            const outpath = outdir + '/index.scss';
-
             build.onEnd((result) => {
-                const scssFile = Object.keys(result.metafile.inputs).find(file => file.endsWith('.scss'));
+                const scssFile = Object.keys(result.metafile.inputs).find(file => file.endsWith('index.scss'));
                 if (!scssFile) {
                     return;
                 }
 
+                const outdir = build.initialOptions.outdir;
                 const banner = build.initialOptions.banner.css;
 
-                return mkdir(path.resolve(outdir), { recursive: true })
-                    .then(() => new Bundler(undefined, process.cwd()).bundle(scssFile))
-                    .then(({ bundledContent }) => banner + '\n\n' + bundledContent)
-                    .then((content) => {
-                        console.log('SCSS', outpath, prettyBytes(content.length));
-                        return writeFile(path.resolve(outpath), content);
-                    })
-                    .then(() => undefined);
+                console.log('SCSS', 'Copy files');
+
+                return mkdir(outdir + '/styles', { recursive: true })
+                    .then(() => glob(`${path.dirname(scssFile)}/*.scss`))
+                    .then(files => Promise.all([
+                        // generates entry point
+                        writeFile(outdir + '/index.scss', `${banner}\n@forward 'styles/vars';\n@use 'styles/index';`),
+                        // copy each file fixing paths to core
+                        ...files.map(file => readFile(file, 'utf-8')
+                            .then((content) => {
+                                content = content.replace(
+                                    new RegExp(`../../../core/src/styles`, 'g'),
+                                    `../../core/styles`,
+                                );
+                                return writeFile(outdir + '/styles/' + path.basename(file), content);
+                            })),
+                    ]))
+                    .then(() => void 0);
             });
         },
     };

build/tsup.config.ts

@@ -3,7 +3,6 @@ import { sassPlugin } from 'esbuild-sass-plugin';
 import { defineConfig } from 'tsup';
 import { assetsPlugin } from './plugins/esbuild-plugin-assets';
 import { budgetPlugin } from './plugins/esbuild-plugin-budget';
-// import { istanbulPlugin } from './plugins/esbuild-plugin-istanbul';
 import { mapFixPlugin } from './plugins/esbuild-plugin-map-fix';
 import { scssBundlePlugin } from './plugins/esbuild-plugin-scss-bundle';
 import { license } from './templates/license';

package.json

@@ -44,12 +44,12 @@
     "cypress-visual-regression": "^5.2.2",
     "esbuild-sass-plugin": "^3.3.1",
     "eslint": "^9.16.0",
+    "glob": "^10.4.5",
     "mocha": "^11.0.1",
     "mocha-junit-reporter": "^2.2.1",
     "nyc": "^17.1.0",
     "postcss": "^8.4.49",
     "queue": "^7.0.0",
-    "scss-bundle": "^3.1.2",
     "selfsigned": "^2.4.1",
     "sort-package-json": "^2.12.0",
     "stylelint": "^16.11.0",

packages/compass-plugin/src/index.ts

@@ -2,4 +2,4 @@ export { CompassPlugin } from './CompassPlugin';
 export * from './model';
 
 /** @internal  */
-import './style.scss';
+import './styles/index.scss';

packages/compass-plugin/src/styles/_vars.scss

@@ -0,0 +1 @@
+$margin: 10px !default;

packages/compass-plugin/src/style.scss → packages/compass-plugin/src/styles/index.scss

@@ -1,20 +1,19 @@
-@import '../../shared/vars';
-
-$psv-compass-margin: 10px !default;
+@use '../../../core/src/styles/vars' as psv;
+@use 'vars' as compass;
 
 .psv-container {
     --psv-compass-plugin-loaded: true;
 }
 
 .psv-compass {
     position: absolute;
-    margin: $psv-compass-margin;
-    z-index: $psv-ui-zindex - 1; // under map/plan
+    margin: compass.$margin;
+    z-index: psv.$ui-zindex - 1; // under map/plan
     cursor: default;
     aspect-ratio: 1;
 
     @at-root .psv--has-navbar & {
-        margin-bottom: calc(#{$psv-navbar-height} + #{$psv-compass-margin});
+        margin-bottom: calc(#{psv.$navbar-height} + #{compass.$margin});
     }
 
     canvas,

packages/core/src/styles/_vars.scss

@@ -0,0 +1,119 @@
+// *** MAIN ***
+$main-background-stops: #fff 0%,
+    #fdfdfd 16%,
+    #fbfbfb 33%,
+    #f8f8f8 49%,
+    #efefef 66%,
+    #dfdfdf 82%,
+    #bfbfbf 100% !default;
+$main-background: radial-gradient($main-background-stops) !default;
+$element-focus-outline: 2px solid #007cff !default;
+
+// *** LOADER ***
+$loader-bg-color: rgba(61, 61, 61, 0.5) !default;
+$loader-color: rgba(255, 255, 255, 0.7) !default;
+$loader-width: 150px !default;
+$loader-tickness: 10px !default;
+$loader-border: 3px !default;
+$loader-font: 600 16px sans-serif !default;
+
+// *** NAVBAR ***
+$navbar-height: 40px !default;
+$navbar-background: rgba(61, 61, 61, 0.5) !default;
+
+$caption-font: 16px sans-serif !default;
+$caption-text-color: rgba(255, 255, 255, 0.7) !default;
+
+$buttons-height: 20px !default;
+$buttons-padding: (($navbar-height - $buttons-height) * 0.5) !default;
+$buttons-background: transparent !default;
+$buttons-active-background: rgba(255, 255, 255, 0.2) !default;
+$buttons-color: rgba(255, 255, 255, 0.7) !default;
+$buttons-disabled-opacity: 0.5 !default;
+
+$buttons-hover-scale: 1.2 !default;
+$buttons-hover-scale-delay: 200ms !default;
+
+$zoom-range-width: 80px !default;
+$zoom-range-tickness: 1px !default;
+$zoom-range-diameter: 7px !default;
+$zoom-range-media-min-width: 600px !default;
+
+// *** TOOLTIP ***
+$tooltip-background: rgba(61, 61, 61, 0.8) !default;
+$tooltip-animate-offset: 5px !default;
+$tooltip-animate-delay: 100ms !default;
+$tooltip-radius: 4px !default;
+$tooltip-padding: 0.5em 1em !default;
+$tooltip-arrow-size: 7px !default;
+$tooltip-max-width: 200px !default;
+
+$tooltip-text-color: rgb(255, 255, 255) !default;
+$tooltip-font: 14px sans-serif !default;
+$tooltip-text-shadow: 0 1px #000 !default;
+
+$tooltip-shadow-color: rgba(90, 90, 90, 0.7) !default;
+$tooltip-shadow-offset: 3px !default; // the shadow is always at the opposite side of the arrow
+
+// *** PANEL ***
+$panel-background: rgba(10, 10, 10, 0.7) !default;
+$panel-text-color: rgb(220, 220, 220) !default;
+$panel-font: 16px sans-serif !default;
+$panel-width: 400px !default;
+$panel-padding: 1em !default;
+$panel-animate-delay: 100ms !default;
+
+$panel-resizer-width: 9px !default; // must be odd
+$panel-resizer-background: rgba(0, 0, 0, 0.9) !default;
+$panel-resizer-grip-color: #fff !default;
+$panel-resizer-grip-height: 29px !default; // must be odd
+$panel-close-button-size: 32px !default;
+$panel-close-button-background: $panel-resizer-background !default;
+$panel-close-button-color: #fff !default;
+$panel-close-button-animate-delay: 300ms !default;
+
+$panel-title-font: 24px sans-serif !default;
+$panel-title-icon-size: 24px !default;
+$panel-title-margin: 24px !default;
+
+$panel-menu-item-height: 1.5em !default;
+$panel-menu-item-padding: 0.5em 1em !default;
+$panel-menu-item-active-outline: 1px !default;
+$panel-menu-odd-background: rgba(255, 255, 255, 0.1) !default;
+$panel-menu-even-background: transparent !default;
+$panel-menu-hover-background: rgba(255, 255, 255, 0.2) !default;
+
+// *** NOTIFICATION ***
+$notification-position-from: -$navbar-height !default;
+$notification-position-to: $navbar-height * 2 !default;
+$notification-animate-delay: 200ms !default;
+$notification-background: $tooltip-background !default;
+$notification-radius: $tooltip-radius !default;
+$notification-padding: $tooltip-padding !default;
+$notification-font: $tooltip-font !default;
+$notification-text-color: $tooltip-text-color !default;
+
+// *** OVERLAY ***
+$overlay-opacity: 0.8 !default;
+$overlay-icon-color: rgb(48, 48, 48) !default;
+$overlay-title-font: 30px sans-serif !default;
+$overlay-title-color: black !default;
+$overlay-text-font: 20px sans-serif !default;
+$overlay-text-color: rgba(0, 0, 0, 0.8) !default;
+$overlay-image-size: (
+    portrait: 50%,
+    landscape: 33%,
+) !default;
+
+// *** Z-INDEXES ***
+$canvas-zindex: 0 !default;
+$hud-zindex: 10 !default;
+$polygon-marker-zindex: 20 !default;
+$marker-zindex: 30 !default;
+$ui-zindex: 40 !default;
+$tooltip-zindex: 50 !default;
+$loader-zindex: 80 !default;
+$panel-zindex: 90 !default;
+$navbar-zindex: 90 !default;
+$notification-zindex: 100 !default;
+$overlay-zindex: 110 !default;

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';
+@forward 'vars';
+@use 'viewer';
+@use 'loader';
+@use 'navbar';
+@use 'zoom-range';
+@use 'notification';
+@use 'overlay';
+@use 'panel';
+@use 'tooltip';

packages/core/src/styles/loader.scss

@@ -1,3 +1,5 @@
+@use '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;
     }
 }