Fix CSS generation

package.json

@@ -43,6 +43,7 @@
     "@csstools/postcss-sass": "^4.0.0",
     "@pixi/jsdoc-template": "^2.5.1",
     "@rollup/plugin-alias": "^3.0.1",
+    "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-inject": "^4.0.1",
     "@rollup/plugin-replace": "^2.3.1",
     "@vuepress/plugin-active-header-links": "^1.2.0",
@@ -67,8 +68,7 @@
     "postcss-banner": "^3.0.0",
     "promise-polyfill": "^8.1.3",
     "raw-loader": "^4.0.0",
-    "rollup": "^2.0.2",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup": "^2.36.2",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-postcss": "^3.1.0",
     "rollup-plugin-string": "^3.0.0",

rollup.config.js

@@ -1,9 +1,9 @@
 import alias from '@rollup/plugin-alias';
+import babel from '@rollup/plugin-babel';
 import inject from '@rollup/plugin-inject';
 import replace from '@rollup/plugin-replace';
 import fs from 'fs';
 import path from 'path';
-import babel from 'rollup-plugin-babel';
 import localResolve from 'rollup-plugin-local-resolve';
 import postcss from 'rollup-plugin-postcss'
 import { string } from 'rollup-plugin-string';
@@ -35,6 +35,7 @@ const baseConfig = {
   output  : {
     format   : 'umd',
     sourcemap: true,
+    interop  : false,
     banner   : banner,
     globals  : {
       'three' : 'THREE',
@@ -50,7 +51,8 @@ const baseConfig = {
   plugins : () => [
     localResolve(),
     babel({
-      exclude: 'node_modules/**',
+      exclude     : 'node_modules/**',
+      babelHelpers: 'bundled',
     }),
     postcss({
       extract  : true,

src/Viewer.js

@@ -16,7 +16,6 @@ import { EventsHandler } from './services/EventsHandler';
 import { Renderer } from './services/Renderer';
 import { TextureLoader } from './services/TextureLoader';
 import { TooltipRenderer } from './services/TooltipRenderer';
-import './styles/viewer.scss';
 import {
   bound,
   each,

src/buttons/AutorotateButton.js

@@ -3,8 +3,6 @@ import playActive from '../icons/play-active.svg';
 import play from '../icons/play.svg';
 import { AbstractButton } from './AbstractButton';
 
-import '../styles/buttons/autorotate.scss';
-
 /**
  * @summary Navigation bar autorotate button class
  * @extends PSV.buttons.AbstractButton

src/buttons/ZoomRangeButton.js

@@ -3,8 +3,6 @@ import { SYSTEM } from '../data/system';
 import { getStyle } from '../utils';
 import { AbstractButton } from './AbstractButton';
 
-import '../styles/buttons/zoom-range.scss';
-
 /**
  * @summary Navigation bar zoom button class
  * @extends PSV.buttons.AbstractButton

src/components/Loader.js

@@ -2,8 +2,6 @@ import { SYSTEM } from '../data/system';
 import { getStyle } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 
-import '../styles/loader.scss';
-
 /**
  * @summary Loader class
  * @extends PSV.components.AbstractComponent

src/components/Navbar.js

@@ -8,7 +8,6 @@ import { ZoomOutButton } from '../buttons/ZoomOutButton';
 import { ZoomRangeButton } from '../buttons/ZoomRangeButton';
 import { DEFAULTS } from '../data/config';
 import { PSVError } from '../PSVError';
-import '../styles/navbar.scss';
 import { clone, logWarn } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 import { NavbarCaption } from './NavbarCaption';

src/components/Notification.js

@@ -1,8 +1,6 @@
 import { EVENTS } from '../data/constants';
 import { AbstractComponent } from './AbstractComponent';
 
-import '../styles/notification.scss';
-
 /**
  * @summary Notification class
  * @extends PSV.components.AbstractComponent

src/components/Overlay.js

@@ -2,8 +2,6 @@ import { EVENTS } from '../data/constants';
 import { AbstractComponent } from './AbstractComponent';
 import { PSVError } from '../PSVError';
 
-import '../styles/overlay.scss';
-
 /**
  * @summary Overlay class
  * @extends PSV.components.AbstractComponent

src/components/Panel.js

@@ -1,8 +1,6 @@
 import { EVENTS } from '../data/constants';
 import { SYSTEM } from '../data/system';
 import { PSVError } from '../PSVError';
-
-import '../styles/panel.scss';
 import { toggleClass } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 

src/components/Tooltip.js

@@ -3,8 +3,6 @@ import { PSVError } from '../PSVError';
 import { addClasses, parsePosition } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 
-import '../styles/tooltip.scss';
-
 const LEFT_MAP = { 0: 'left', 0.5: 'center', 1: 'right' };
 const TOP_MAP = { 0: 'top', 0.5: 'center', 1: 'bottom' };
 const STATE = { NONE: 0, SHOWING: 1, HIDING: 2, READY: 3 };

src/index.js

@@ -7,6 +7,7 @@ import './data/constants'; // for jsdoc
 import { SYSTEM } from './data/system';
 import { AbstractPlugin } from './plugins/AbstractPlugin';
 import { PSVError } from './PSVError';
+import './styles/index.scss';
 import * as utils from './utils';
 import { Viewer } from './Viewer';
 

src/styles/index.scss

@@ -0,0 +1,9 @@
+@import 'viewer';
+@import 'loader';
+@import 'navbar';
+@import 'buttons/autorotate';
+@import 'buttons/zoom-range';
+@import 'notification';
+@import 'overlay';
+@import 'panel';
+@import 'tooltip';