Closes #1513 Migrate to SASS modules

mistic100 · Dec 21, 2024 · 7e42eec · 7e42eec
1 parent a27b833
commit 7e42eec
Show file tree

Hide file tree

Showing 49 changed files with 797 additions and 877 deletions.
diff --git a/build/plugins/esbuild-plugin-scss-bundle.ts b/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,34 @@ 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([
+                        // 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`,
+                                );
+                                if (file.endsWith('index.scss')) {
+                                    content = banner + '\n' + content;
+                                }
+                                return writeFile(outdir + '/styles/' + path.basename(file), content);
+                            })),
+                    ]))
+                    .then(() => void 0);
             });
         },
     };

diff --git a/build/templates/package.ts b/build/templates/package.ts
@@ -39,9 +39,9 @@ export const packageJson = (pkg: any) => {
 
     if (pkg.psv.style) {
         content.style = 'index.css';
-        content.sass = 'index.scss';
+        content.sass = 'styles/index.scss';
         content.exports['./index.css'] = './index.css';
-        content.exports['./index.scss'] = './index.scss';
+        content.exports['./index.scss'] = './styles/index.scss';
     }
 
     if (pkg.name === '@photo-sphere-viewer/core') {

diff --git a/build/tsup.config.ts b/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';

diff --git a/docs/guide/style.md b/docs/guide/style.md
diff --git a/docs/plugins/gallery.md b/docs/plugins/gallery.md
@@ -152,15 +152,15 @@ If you use a [custom navbar](../guide/navbar.md) you will need to manually add t
 
 ## SCSS variables
 
-| variable | default | description |
-| -------- | ------- | ----------- |
-| $psv-gallery-breakpoint | 500px | Screen size below which the gallery is displayed full-height |
-| $psv-gallery-padding | 15px | Padding of the container |
-| $psv-gallery-border | 1px solid $psv-caption-text-color | Border between the gallery and the navbar |
-| $psv-gallery-background | $psv-navbar-background | Background of the gallery |
-| $psv-gallery-item-radius | 5px | Corner radius of gallery items |
-| $psv-gallery-item-active-border | 3px solid white | Border of active gallery item |
-| $psv-gallery-title-font | $psv-caption-font | Font of the gallery item title |
-| $psv-gallery-title-color | $psv-caption-text-color | Color of the gallery item title |
-| $psv-gallery-title-background | rgba(0, 0, 0, .6) | Background of the gallery item title |
-| $psv-gallery-thumb-hover-scale | 1.2 | Scale factor of thumbnails on mouse hover |
+| variable            | default                            | description                                                  |
+| ------------------- | ---------------------------------- | ------------------------------------------------------------ |
+| $breakpoint         | 500px                              | Screen size below which the gallery is displayed full-height |
+| $padding            | 15px                               | Padding of the container                                     |
+| $border             | 1px solid core.$caption-text-color | Border between the gallery and the navbar                    |
+| $background         | core.$navbar-background            | Background of the gallery                                    |
+| $item-radius        | 5px                                | Corner radius of gallery items                               |
+| $item-active-border | 3px solid white                    | Border of active gallery item                                |
+| $title-font         | core.$caption-font                 | Font of the gallery item title                               |
+| $title-color        | core.$caption-text-color           | Color of the gallery item title                              |
+| $title-background   | rgba(0, 0, 0, .6)                  | Background of the gallery item title                         |
+| $thumb-hover-scale  | 1.2                                | Scale factor of thumbnails on mouse hover                    |
diff --git a/docs/plugins/map.md b/docs/plugins/map.md
@@ -393,15 +393,15 @@ Triggered when the map is maximized (`view=maximized`), minimized or opened (`vi
 
 ## SCSS variables
 
-| variable | default | description |
-| -------- | ------- | ----------- |
-| $psv-map-radius | 8px | Corner radius of the widget (only if shape=square) |
-| $psv-map-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget |
-| $psv-map-background | rgba(61, 61, 61, .7) | Background color of the map |
-| $psv-map-button-size | 34px | Size of buttons |
-| $psv-map-button-background | rgba(0, 0, 0, .5) | Background color of buttons |
-| $psv-map-button-color | $psv-buttons-color | Color of buttons |
-| $psv-map-toolbar-font | 12px sans-serif | Font for the zoom indicator |
-| $psv-map-toolbar-text-color | white | Color of the zoom indicator |
-| $psv-map-toolbar-background | #222 | Background color of the zoom indicator |
-| $psv-map-transition | ease-in-out .3s | Transition |
+| variable            | default                   | description                                        |
+| ------------------- | ------------------------- | -------------------------------------------------- |
+| $radius             | 8px                       | Corner radius of the widget (only if shape=square) |
+| $shadow             | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget                       |
+| $background         | rgba(61, 61, 61, .7)      | Background color of the map                        |
+| $button-size        | 34px                      | Size of buttons                                    |
+| $button-background  | rgba(0, 0, 0, .5)         | Background color of buttons                        |
+| $button-color       | core.$buttons-color       | Color of buttons                                   |
+| $toolbar-font       | 12px sans-serif           | Font for the zoom indicator                        |
+| $toolbar-text-color | white                     | Color of the zoom indicator                        |
+| $toolbar-background | #222                      | Background color of the zoom indicator             |
+| $transition         | ease-in-out .3s           | Transition                                         |
diff --git a/docs/plugins/plan.md b/docs/plugins/plan.md
@@ -362,11 +362,11 @@ Triggered when the map is maximized (`view=maximized`), minimized or opened (`vi
 
 ## SCSS variables
 
-| variable | default | description |
-| -------- | ------- | ----------- |
-| $psv-plan-radius | 8px | Corner radius of the widget |
-| $psv-plan-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget |
-| $psv-plan-button-size | 34px | Size of buttons |
-| $psv-plan-button-background | rgba(0, 0, 0, .5) | Background color of buttons |
-| $psv-plan-button-color | white | Icon color if buttons |
-| $psv-map-transition | ease-in-out .3s | Transition |
+| variable           | default                   | description                  |
+| ------------------ | ------------------------- | ---------------------------- |
+| $radius            | 8px                       | Corner radius of the widget  |
+| $shadow            | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget |
+| $button-size       | 34px                      | Size of buttons              |
+| $button-background | rgba(0, 0, 0, .5)         | Background color of buttons  |
+| $button-color      | white                     | Icon color if buttons        |
+| $transition        | ease-in-out .3s           | Transition                   |
diff --git a/docs/plugins/settings.md b/docs/plugins/settings.md
@@ -154,14 +154,14 @@ If you use a [custom navbar](../guide/navbar.md) you will need to manually add t
 
 ## SCSS variables
 
-| variable | default | description |
-| -------- | ------- | ----------- |
-| $psv-settings-font | $psv-caption-font | Font of settings |
-| $psv-settings-text-color | $psv-panel-text-color | Text color of settings |
-| $psv-settings-background | $psv-panel-background | Background color of settings |
-| $psv-settings-item-height | $psv-panel-menu-item-height | Height of each settings item |
-| $psv-settings-item-padding | $psv-panel-menu-item-padding | Padding of each settings item |
-| $psv-settings-hover-background | $psv-panel-menu-hover-background | Background color of items on mouse hover |
-| $psv-settings-badge-font | 10px / .9 monospace | Font of the badge displayed on the button |
-| $psv-settings-badge-text-color | white | Text color if the badge |
-| $psv-settings-badge-background | #111 | Background color of the badge |
+| variable          | default                           | description                               |
+| ----------------- | --------------------------------- | ----------------------------------------- |
+| $font             | core.$caption-font                | Font of settings                          |
+| $text-color       | core.$panel-text-color            | Text color of settings                    |
+| $background       | core.$panel-background            | Background color of settings              |
+| $item-height      | core.$panel-menu-item-height      | Height of each settings item              |
+| $item-padding     | core.$panel-menu-item-padding     | Padding of each settings item             |
+| $hover-background | core.$panel-menu-hover-background | Background color of items on mouse hover  |
+| $badge-font       | 10px / .9 monospace               | Font of the badge displayed on the button |
+| $badge-text-color | white                             | Text color if the badge                   |
+| $badge-background | #111                              | Background color of the badge             |
diff --git a/docs/plugins/video.md b/docs/plugins/video.md
@@ -175,19 +175,19 @@ If you use a [custom navbar](../guide/navbar.md) you will need to manually add t
 
 ## SCSS variables
 
-| variable | default | description |
-| -------- | ------- | ----------- |
-| $psv-progressbar-height | 3px | Height of the progress bar |
-| $psv-progressbar-height-active | 5px | Height of the progress bar on mouse hover |
-| $psv-progressbar-progress-color | $psv-buttons-color | Color of the playing progress bar |
-| $psv-progressbar-buffer-color | $psv-buttons-active-background | Color of the buffer progress bar |
-| $psv-progressbar-handle-size | 9px | Size of the seek handle |
-| $psv-progressbar-handle-color | white | Color of the seek handle |
-| $psv-volume-height | 80px | Height of the volume control |
-| $psv-volume-width | $psv-progressbar-height-active | Width of the volume control |
-| $psv-volume-bar-color | $psv-progressbar-progress-color | Color of the volume controle |
-| $psv-volume-track-color | $psv-progressbar-buffer-color | Background color of the volume control |
-| $psv-volume-handle-size | $psv-progressbar-handle-size | Size of the volume handle |
-| $psv-volume-handle-color | $psv-progressbar-handle-color | Color of the volume handle |
-| $psv-video-bigbutton-color | $psv-buttons-color | Color of the central play button |
-| $psv-video-bigbutton-size | (portrait: 20vw,<br>landscape: 10vw) | Size if the central play button, depending on screen orientation |
+| variable                    | default                              | description                                                      |
+| --------------------------- | ------------------------------------ | ---------------------------------------------------------------- |
+| $progressbar-height         | 3px                                  | Height of the progress bar                                       |
+| $progressbar-height-active  | 5px                                  | Height of the progress bar on mouse hover                        |
+| $progressbar-progress-color | core.$buttons-color                  | Color of the playing progress bar                                |
+| $progressbar-buffer-color   | core.$buttons-active-background      | Color of the buffer progress bar                                 |
+| $progressbar-handle-size    | 9px                                  | Size of the seek handle                                          |
+| $progressbar-handle-color   | white                                | Color of the seek handle                                         |
+| $volume-height              | 80px                                 | Height of the volume control                                     |
+| $volume-width               | $progressbar-height-active           | Width of the volume control                                      |
+| $volume-bar-color           | $progressbar-progress-color          | Color of the volume controle                                     |
+| $volume-track-color         | $progressbar-buffer-color            | Background color of the volume control                           |
+| $volume-handle-size         | $progressbar-handle-size             | Size of the volume handle                                        |
+| $volume-handle-color        | $progressbar-handle-color            | Color of the volume handle                                       |
+| $bigbutton-color            | core.$buttons-color                  | Color of the central play button                                 |
+| $bigbutton-size             | (portrait: 20vw,<br>landscape: 10vw) | Size if the central play button, depending on screen orientation |
diff --git a/docs/plugins/virtual-tour.md b/docs/plugins/virtual-tour.md
@@ -543,3 +543,11 @@ virtualTourPlugin.addEventListener('node-changed', ({ node, data }) => {
 #### `enter-arrow(link, node)` | `leave-arrow(link, node)`
 
 Triggered when the user puts the cursor hover or away an arrow.
+
+## SCSS variables
+
+| variable           | default                                    | description                             |
+| ------------------ | ------------------------------------------ | --------------------------------------- |
+| $link-button-color | rgba(255, 255, 255, 0.8)                   | Color of the default arrow image        |
+| $link-button-ring  | rgb(97, 170, 242)                          | Color of the ring effect on mouse hover |
+| $link-shadow       | drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) | Shadow applied to all arrows            |
diff --git a/package.json b/package.json
@@ -44,12 +44,12 @@
     "cypress-visual-regression": "^5.2.2",
     "esbuild-sass-plugin": "^3.3.1",
     "eslint": "^9.17.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.12.0",

diff --git a/packages/compass-plugin/src/index.ts b/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';
diff --git a/packages/compass-plugin/src/styles/_vars.scss b/packages/compass-plugin/src/styles/_vars.scss
@@ -0,0 +1 @@
+$margin: 10px !default;
diff --git a/packages/compass-plugin/src/style.scss → ...ages/compass-plugin/src/styles/index.scss b/packages/compass-plugin/src/style.scss → ...ages/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,