WIP styles available globally

index.html

@@ -37,6 +37,7 @@
         const FIVE_MINUTES = 5 * 60 * 1000;
         const THIRTY_MINUTES = 30 * 60 * 1000;
 
+        openmct.install(openmct.plugins.Themes());
         [
             'example/eventGenerator',
             'example/styleguide'

package.json

@@ -27,6 +27,7 @@
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
     "fast-sass-loader": "1.4.6",
+    "fibers": "^4.0.2",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",
@@ -60,8 +61,10 @@
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
+    "sass": "^1.23.7",
+    "sass-loader": "^8.0.0",
     "split": "^1.0.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^1.0.1",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
     "vue-loader": "^15.2.6",

src/api/overlays/components/DialogComponent.vue

@@ -26,8 +26,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin legacyMessage() {
         flex: 0 1 auto;
         font-family: symbolsfont;

src/api/overlays/components/OverlayComponent.vue

@@ -26,8 +26,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
         position: absolute;
         top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;

src/plugins/displayLayout/components/BoxView.vue

@@ -32,8 +32,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
-
     .c-box-view {
         display: flex;
         align-items: stretch;

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -60,8 +60,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin displayMarquee($c) {
         > .c-frame-edit {
             // All other frames

src/plugins/displayLayout/components/EditMarquee.vue

@@ -35,8 +35,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-frame-edit {
         // In Layouts, this is the editing rect and handles
         display: none; // Set to display: block in DisplayLayout.vue

src/plugins/displayLayout/components/ImageView.vue

@@ -32,7 +32,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-image-view {
         background-size: cover;

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************* FRAME */
     .c-frame {
         display: flex;

src/plugins/displayLayout/components/TelemetryView.vue

@@ -45,7 +45,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-telemetry-view {
         display: flex;

src/plugins/displayLayout/components/TextView.vue

@@ -33,7 +33,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-text-view {
         display: flex;

src/plugins/filters/components/FiltersView.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-inspector {
         .c-filter-indication {
             border-radius: $smallCr;

src/plugins/filters/components/GlobalFilters.vue

@@ -26,9 +26,7 @@
     </li>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
+<style lang="scss">    .c-filter-indication {
         // Appears as a block element beneath tables
         @include userSelectNone();
         background: $colorFilterBg;

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -85,7 +85,6 @@
 </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
     
     @mixin containerGrippy($headerSize, $dir) {
         position: absolute;

src/plugins/folderView/components/GridItem.vue

@@ -23,8 +23,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* GRID ITEMS */
     .c-grid-item {
         // Mobile-first

src/plugins/folderView/components/GridView.vue

@@ -9,8 +9,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* GRID VIEW */
     .l-grid-view {
         display: flex;

src/plugins/folderView/components/ListItem.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* LIST ITEM */
     .c-list-item {
         &__name a {

src/plugins/folderView/components/ListView.vue

@@ -53,8 +53,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* LIST VIEW */
     .c-list-view {
         overflow-x: auto !important;

src/plugins/plugins.js

@@ -22,6 +22,7 @@
 
 define([
     'lodash',
+    './themes/plugin',
     './utcTimeSystem/plugin',
     './localTimeSystem/plugin',
     '../../example/generator/plugin',
@@ -47,6 +48,7 @@ define([
     './clearData/plugin'
 ], function (
     _,
+    ThemesPlugin,
     UTCTimeSystem,
     LocalTimeSystem,
     GeneratorPlugin,
@@ -85,6 +87,7 @@ define([
         };
     });
 
+    plugins.Themes = ThemesPlugin.default;
     plugins.UTCTimeSystem = UTCTimeSystem;
     plugins.LocalTimeSystem = LocalTimeSystem;
 

src/plugins/tabs/components/tabs.vue

@@ -42,8 +42,6 @@
 </template>
 
 <style lang="scss">
-    @import '~styles/sass-base.scss';
-
     .c-tabs-view {
         $h: 20px;
         @include abs();

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -11,9 +11,7 @@
     </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
+<style lang="scss">    .c-filter-indication {
         @include userSelectNone();
         background: $colorFilterBg;
         color: $colorFilterFg;

src/plugins/telemetryTable/components/table.vue

@@ -152,8 +152,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-telemetry-table__drop-target {
         position: absolute;
         width: 2px;

src/plugins/timeConductor/Conductor.vue

@@ -104,8 +104,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-input--submit {
         // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
         visibility: none;

src/plugins/timeConductor/ConductorAxis.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-conductor-axis {
         $h: 18px;
         $tickYPos: ($h / 2) + 12px;

src/plugins/timeConductor/ConductorMode.vue

@@ -50,8 +50,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-conductor__mode-menu {
         max-height: 80vh;
         max-width: 500px;

src/plugins/timeConductor/ConductorModeIcon.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @keyframes clock-hands {
         0% { transform: translate(-50%, -50%) rotate(0deg); }
         100% { transform: translate(-50%, -50%) rotate(360deg);  }

src/plugins/timeConductor/DatePicker.vue

@@ -58,8 +58,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************************************** PICKER */
     .c-datetime-picker {
         @include userSelectNone();

src/ui/components/ObjectFrame.vue

@@ -51,8 +51,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-so-view {
         display: flex;
         flex-direction: column;

src/ui/components/ObjectLabel.vue

@@ -10,9 +10,7 @@
 </a>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-object-label {
+<style lang="scss">    .c-object-label {
         // <a> tag and draggable element that holds type icon and name.
         // Used mostly in trees and lists
         border-radius: $controlCr;

src/ui/components/ProgressBar.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************************************** PROGRESS BAR */
     @keyframes progress {
         100% { background-position: $progressAnimW center; }

src/ui/components/ToggleSwitch.vue

@@ -9,8 +9,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-toggle-switch {
         $d: 12px;
         $m: 2px;

src/ui/components/search.vue

@@ -13,8 +13,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-search {
         @include wrappedInput();
 

src/ui/inspector/Elements.vue

@@ -28,8 +28,6 @@
 </div>
 </template>
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-elements-pool {
         display: flex;
         flex-direction: column;

src/ui/inspector/Inspector.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-inspector {
         > [class*="__"] {
             min-height: 50px;

src/ui/inspector/Location.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-location {
         display: flex;
         flex-wrap: wrap;

src/ui/layout/BrowseBar.vue

@@ -247,8 +247,6 @@ const PLACEHOLDER_OBJECT = {};
 </script>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .l-browse-bar {
         display: flex;
         align-items: center;

src/ui/layout/CreateButton.vue

@@ -28,8 +28,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-create-button,
     .c-create-menu {
         font-size: 1.1em;

src/ui/layout/Layout.vue

@@ -58,8 +58,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* SHELL */
     .l-shell {
         position: absolute;

src/ui/layout/mct-tree.vue

@@ -42,8 +42,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-tree-and-search {
         display: flex;
         flex-direction: column;

src/ui/layout/pane.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /**************************** BASE - MOBILE AND DESKTOP */
     .l-multipane {
         display: flex;

src/ui/layout/status-bar/Indicators.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-indicator {
         @include cControl();
         @include cClickIconButtonLayout();

src/ui/layout/status-bar/NotificationBanner.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
         $bgPb: 10%;
         $bgPbD: 10%;

src/ui/preview/Preview.vue

@@ -52,7 +52,6 @@
     </div>
 </template>
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .l-preview-window {
         display: flex;

src/ui/toolbar/components/toolbar-checkbox.vue

@@ -17,8 +17,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-custom-checkbox {
         $d: 14px;
         display: flex;

webpack.config.js

@@ -71,12 +71,19 @@ const webpackConfig = {
             {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
-                    devMode ? 'style-loader': MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'style-loader',
+                        options: {
+                            injectType: 'styleTag' // change to lazyStyleTag and use styles in themes plugin
+                        }
+                    },
                     'css-loader',
                     {
-                        loader: 'fast-sass-loader',
+                        loader: 'sass-loader',
                         options: {
-                            includePaths: bourbon.includePaths
+                            prependData: `
+                                @import "styles/sass-base.scss";
+                            `
                         }
                     }
                 ]