feat: rspack

package.json

@@ -50,8 +50,8 @@
     "storybook:build": "NODE_OPTIONS=--max_old_space_size=4096 build-storybook",
     "storybook": "NODE_OPTIONS=--max_old_space_size=4096 start-storybook -p 6006",
     "test": "visyn_scripts test",
-    "webpack:dev": "visyn_scripts build --mode development --env workspace_mode=single",
-    "webpack:prod": "visyn_scripts build --mode production --env workspace_mode=single"
+    "bundle:dev": "visyn_scripts bundle --mode development --env workspace_mode=single",
+    "bundle:prod": "visyn_scripts bundle --mode production --env workspace_mode=single"
   },
   "dependencies": {
     "@popperjs/core": "^2.9.3",
@@ -107,7 +107,8 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "webpack": "5.74.0"
+    "visyn_core": "git+ssh://git@github.com/datavisyn/visyn_core#rspack",
+    "visyn_scripts": "git+ssh://git@github.com/datavisyn/visyn_scripts#rspack"
   },
   "visyn": {
     "entries": {

src/scss/abstracts/_variables.scss

@@ -74,7 +74,7 @@ $anchor_color: red !default;
 $anchor_color_hover: darkred !default;
 
 /* phovea_ui */
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts' !default;
+$fa-font-path: '@fortawesome/fontawesome-free/webfonts' !default;
 
 $phovea-loading-icon-url: url('../../assets/caleydo_c_anim.svg') !default;
 $phovea-loading-icon-size: auto !default;
@@ -103,6 +103,6 @@ $hover-data-color: #ffc46b !default;
 
 // TODO: Without this, we get "Can't resolve './node_modules/lineupengine/src/styles/lineupengine/src/assets/loading.svg' in '.../workspaces/<repo>'"
 // Why do I need to do this? Probably because lineupjs defines $engine_assets and it is resolving it relatively?
-$engine_assets: '~lineupengine/src/assets';
+$engine_assets: 'lineupengine/src/assets';
 $engine_loading_image: url('#{$engine_assets}/loading.svg') !default;
 $engine_loading_static_image: url('#{$engine_assets}/loading_s.svg') !default;

src/scss/components/_view_lineup.scss

@@ -73,7 +73,7 @@
   }
 }
 
-$lu_assets: "~lineupjs/src/assets";
+$lu_assets: "lineupjs/src/assets";
 
 @at-root {
   .tdp-ranking-export-form {

src/scss/fontawesome.scss

@@ -1,3 +1,3 @@
-@import "~@fortawesome/fontawesome-free/scss/functions";
-@import "~@fortawesome/fontawesome-free/scss/variables";
-@import "~@fortawesome/fontawesome-free/scss/mixins";
+@import "@fortawesome/fontawesome-free/scss/functions";
+@import "@fortawesome/fontawesome-free/scss/variables";
+@import "@fortawesome/fontawesome-free/scss/mixins";

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "~visyn_core/dist/scss/main.scss";
+@import "visyn_core/dist/scss/main.scss";
 
 @import "./abstracts/functions";
 @import './abstracts/variables';

src/scss/storybook.scss

@@ -6,7 +6,7 @@
 @import "./vendors/bootstrap/1_variables_mixins_utilities";
 
 // map-merge my theme-colors
-// @import "~target360/dist/scss/vendors/bootstrap_modify_maps";
+// @import "target360/dist/scss/vendors/bootstrap_modify_maps";
 
 // Include all Bootstrap components as needed
 @import "./vendors/bootstrap/2_components";

src/scss/vendors/_font-awesome.scss

@@ -1,7 +1,7 @@
-@import '~@fortawesome/fontawesome-free/scss/solid';
-@import '~@fortawesome/fontawesome-free/scss/regular';
-@import '~@fortawesome/fontawesome-free/scss/brands';
-@import '~@fortawesome/fontawesome-free/scss/fontawesome';
+@import '@fortawesome/fontawesome-free/scss/solid';
+@import '@fortawesome/fontawesome-free/scss/regular';
+@import '@fortawesome/fontawesome-free/scss/brands';
+@import '@fortawesome/fontawesome-free/scss/fontawesome';
 
 
 // vertically align all font-awesome icons inside of the .btn class

src/scss/vendors/_lineup.scss

@@ -1,12 +1,12 @@
 $lu_dialog_font_size: 0.9rem !default;
 $lu_toolbar_font_size: 0.9rem !default;
 
-$lu_assets: '~lineupjs/src/assets' !default;
+$lu_assets: 'lineupjs/src/assets' !default;
 $lu_use_font_awesome: true !default;
 // do not include Font Awesome files from LineUp, but use ours instead
 $lu_include_font_awesome: false !default;
 
-@import '~lineupjs/src/style.scss';
+@import 'lineupjs/src/style.scss';
 
 .lu {
   // use a fixed font-size for the ranking + side panel with the Roboto font family.

src/scss/vendors/_select2.scss

@@ -1,8 +1,8 @@
 /**
  * Additional jQuery select2 styles
  */
- @import "~select2/dist/css/select2.min.css";
- @import "~select2-bootstrap-theme/dist/select2-bootstrap.min.css";
+ @import "select2/dist/css/select2.min.css";
+ @import "select2-bootstrap-theme/dist/select2-bootstrap.min.css";
 
 .select2-results__option .ensg,
 .select2-selection__rendered .ensg {

src/scss/vendors/bootstrap/_1_variables_mixins_utilities.scss

@@ -1,13 +1,13 @@
 // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 // @see https://getbootstrap.com/docs/5.1/customize/sass/#importing
 
-@import "~bootstrap/scss/functions";
+@import "bootstrap/scss/functions";
 
 // 2. Include remainder of required Bootstrap stylesheets (required)
 // @see https://getbootstrap.com/docs/5.1/customize/sass/#importing
 
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 
 // $spacers, $theme-colors need to be adapted before importing the utilities to generate the m-* and p-*, text-*, border-*, bg-* utility classes
 // @see https://getbootstrap.com/docs/5.1/utilities/spacing/ and https://getbootstrap.com/docs/5.1/utilities/colors/