introduced minified css solution: css files will not be autoinjected, instead they are minified in dist directory and then injected from within bundle files

client/dist/inject.css

@@ -0,0 +1 @@
+#containerBookingBtn{display:none;margin:0}#get_flash{display:none}.ui-dialog-titlebar{margin-left:1rem;margin-right:1rem}.ui-dialog-title{text-align:center}.ui-widget-overlay{background:#fff;opacity:1;width:100vw;height:100vh}#openSeatmap img{width:64px}#openSeatmap{padding:1rem;font-weight:700;color:#ffb201;font-size:1rem;cursor:pointer}#openSeatmap span{font-size:.8rem}#foobarParent{display:none}div#dialogSeatmap{padding-top:0}.ui-widget-header{background:#fff;border:1px solid #c6c6c6;border-bottom-right-radius:0;border-bottom-left-radius:0}.ui-dialog{background:#fff;left:0!important;padding:0;top:0!important;right:0!important}.ui-dialog .ui-dialog-content{padding:0}.ui-dialog-titlebar{margin-left:0;margin-right:0;padding:0!important;display:none}#iframeSeatmap{height:100vh;background:#fff;width:100%}.ui-corner-all{border-radius:0}.ui-dialog-title{display:none}.ui-widget{border:none!important}

client/dist/jBox.all.min.css

@@ -1 +0,0 @@
-/home/zino/projects/seatmapv2/staging/seatmapv2/client/node_modules/jbox/dist/jBox.all.min.css

client/package.json

@@ -7,8 +7,12 @@
     "browserifyf": "func() { browserify --debug -p [ tsify ] $1 > $2; }; func",
     "watchifyfdev": "func() { watchify -t [ envify --NODE_ENV development ] --debug --verbose -p [ tsify ] $1 -o $2; }; func",
     "watchifyfprod": "func() { watchify -g uglifyify -t [ envify --NODE_ENV production ] --debug --verbose -p [ tsify ] $1 -o $2; }; func",
-    "watchifyfcssdev": "func() { watchify -t [ envify --NODE_ENV development ] -g browserify-css --debug --verbose -p [ tsify ] $1 -o $2; }; func",
+    "watchifyfcssdev": "func() { watchify -t [ envify --NODE_ENV development ] -t [ browserify-css ] --output $1 ] --debug --verbose -p [ tsify ] $2 -o $3; }; func",
-    "watchifyfcssprod": "func() { watchify -t [ envify --NODE_ENV production ] -g browserify-css --debug --verbose -p [ tsify ] $1 -o $2; }; func"
+    "watchifyfcssprod": "func() { watchify -t [ envify --NODE_ENV production ] -t [ browserify-css ] --debug --verbose -p [ tsify ] $1 -o $2; }; func",
+    "injectdev": "func() { watchify -t [ envify --NODE_ENV development ] -t [ browserify-css --output dist/inject.css ] --debug --verbose -p [ tsify ] src/inject.ts -o dist/inject.js; }; func",
+    "injectprod": "func() { watchify -t [ envify --NODE_ENV production ] -t [ browserify-css --output dist/inject.css ] --debug --verbose -p [ tsify ] src/inject.ts -o dist/inject.js; }; func",
+    "seatmapdev": "func() { watchify -t [ envify --NODE_ENV development ] -t [ browserify-css --output dist/seatmap.css ] --debug --verbose -p [ tsify ] src/seatmap.ts -o dist/seatmap.js; }; func",
+    "seatmapprod": "func() { watchify -t [ envify --NODE_ENV production ] -t [ browserify-css --output dist/seatmap.css ] --debug --verbose -p [ tsify ] src/seatmap.ts -o dist/seatmap.js; }; func"
   },
   "keywords": [],
   "author": "",
@@ -34,8 +38,9 @@
     "xml2js": "^0.4.23"
   },
   "browserify-css": {
-    "autoInject": true,
+    "autoInject": false,
-    "minify": false,
+    "minify": true,
-    "rootDir": "."
+    "rootDir": ".",
+    "stripComments": true
   }
-}
+}

client/src/css/seatmap.css

@@ -1,3 +1,5 @@
+@import url("../../node_modules/jbox/dist/jBox.all.css");
+
 div.seatCharts-cell {
   height: 1vw;
   display: table-cell;

client/src/css/styleChild.css

@@ -1,291 +0,0 @@
-div.seatCharts-cell {
-  height: 1vw;
-  display: table-cell;
-  width: 1vw;
-  margin: 0.1vw;
-  white-space: nowrap;
-  font-size: 0.6vw;
-  line-height: 1.1vw;
-  color: black;
-  font-weight: bold;
-}
-
-div.seatCharts-row {
-  height: 1.6vw;
-  display: table-row;
-}
-
-div.seatCharts-space {
-  background-color: transparent;
-}
-
-div.seatCharts-seat {
-  -webkit-border-radius: 0.2vw;
-  -moz-border-radius: 0.2vw;
-  border-radius: 0.2vw;
-}
-
-/* div.seatCharts-seat,
-div.seatCharts-seat.available {
-  border: 0.1rem solid #5c5c5c;
-} */
-
-div.seatCharts-seat.selected,
-div.seatCharts-seat.focused {
-  border: 0.1vw solid black;
-  /* filter: brightness(2); */
-}
-
-div.seatCharts-seat.selected {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuMjg1IDJsLTExLjI4NSAxMS41NjctNS4yODYtNS4wMTEtMy43MTQgMy43MTYgOSA4LjcyOCAxNS0xNS4yODV6Ii8+PC9zdmc+);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 100% 100%, auto;
-}
-
-select#dropdownSeatmap {
-  color: #5c5c5c;
-  font-weight: bold;
-}
-
-/* #loftloader-wrapper .loader-inner {
-  top: 50%;
-} */
-
-ul.seatCharts-legendList {
-  list-style: none;
-  margin: 0;
-}
-
-li.seatCharts-legendItem {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  line-height: 1.6rem;
-}
-
-#JSCLegend div.seatCharts-cell {
-  height: 1rem;
-  width: 1rem;
-  margin: 0 0.5rem 0 0;
-}
-
-span.seatCharts-legendDescription {
-  margin: 0;
-}
-
-div.seatCharts-seat.unavailable {
-  background-color: #ccc !important;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='4'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 100% 100%, auto;
-  border: none;
-}
-
-#JSCLegendInner select {
-  color: #5c5c5c;
-  font-weight: bold;
-}
-
-#JSCLegendInner select option {
-  color: white;
-}
-
-.jBox-Notice .jBox-content {
-  font-size: 1rem;
-  padding: .1rem 2rem;
-}
-
-select#dropdownLegend, select#dropdownSeatmap, .dropdownBuyerTypes {
-  width: 14rem;
-  border-radius: 4px;
-  border-color: #ccc;
-  height: 3rem;
-}
-
-#modalCart .uabb-button {
-  width: 15rem;
-}
-
-.cartItemColoredSquare {
-  width: 1rem;
-  height: 1rem;
-  margin: .4rem 1rem 0 0;
-  border: 1px solid black;
-  float: left;
-}
-
-.cartItemCategory {
-  font-weight: bold;
-}
-
-.cartItem {
-  padding: 1rem;
-  border-radius: 5px;
-  margin: 0 0 1rem 0;
-  width: 20rem;
-  border: 1px solid #ccc;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
-
-.cartItemCategory, .cartItemSeat {
-  color: black;
-}
-
-#cartItemHTML {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#modalCartRow {
-  /* max-height: 40vw; */
-  overflow: auto;
-}
-
-/* .cartItemCross {
-  text-align: right;
-  line-height: 0;
-  cursor: pointer;
-} */
-
-#modalCart-overlay .uabb-overlay {
-  background: white;
-}
-
-
-#modalCart-overlay .uabb-close-icon {
-  margin-top: 2.2rem;
-  display: none;
-}
-
-.dropdownBuyerTypes {
-  padding: .2rem;
-  margin-top: .4rem;
-}
-
-#modalCart .uabb-button:hover {
-  border: 1px solid #5c5c5c;
-}
-
-.trimText {
-  line-height: normal;
-  font-size: 1vw;
-}
-
-span.trimChar {
-  font-weight: normal;
-  font-size: 1vw;
-}
-
-/**
- * ==============================================
- * Dot Pulse
- * ==============================================
- */
- .dot-pulse {
-  position: relative;
-  left: -9999px;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  background-color: #5c5c5c;
-  color: #5c5c5c;
-  box-shadow: 9999px 0 0 -5px #5c5c5c;
-  animation: dotPulse 1.5s infinite linear;
-  animation-delay: .25s;
-}
-
-.dot-pulse::before, .dot-pulse::after {
-  content: '';
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  background-color: #5c5c5c;
-  color: #5c5c5c;
-}
-
-.dot-pulse::before {
-  box-shadow: 9984px 0 0 -5px #5c5c5c;
-  animation: dotPulseBefore 1.5s infinite linear;
-  animation-delay: 0s;
-}
-
-.dot-pulse::after {
-  box-shadow: 10014px 0 0 -5px #5c5c5c;
-  animation: dotPulseAfter 1.5s infinite linear;
-  animation-delay: .5s;
-}
-
-@keyframes dotPulseBefore {
-  0% {
-    box-shadow: 9984px 0 0 -5px #5c5c5c;
-  }
-  30% {
-    box-shadow: 9984px 0 0 2px #5c5c5c;
-  }
-  60%,
-  100% {
-    box-shadow: 9984px 0 0 -5px #5c5c5c;
-  }
-}
-
-@keyframes dotPulse {
-  0% {
-    box-shadow: 9999px 0 0 -5px #5c5c5c;
-  }
-  30% {
-    box-shadow: 9999px 0 0 2px #5c5c5c;
-  }
-  60%,
-  100% {
-    box-shadow: 9999px 0 0 -5px #5c5c5c;
-  }
-}
-
-@keyframes dotPulseAfter {
-  0% {
-    box-shadow: 10014px 0 0 -5px #5c5c5c;
-  }
-  30% {
-    box-shadow: 10014px 0 0 2px #5c5c5c;
-  }
-  60%,
-  100% {
-    box-shadow: 10014px 0 0 -5px #5c5c5c;
-  }
-}
-
-#btnCloseModal {
-  cursor: pointer;
-}
-
-#htmlSeatmapInner {
-  /* background: grey; */
-  height: 66vh;
-}
-
-#htmlSeatmapInner .fl-module-content, #htmlSeatmapInner .fl-html {
-  height: 100%;
-}
-
-#containerSeatmapInner {
-  border: 1px solid black;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
-}
-
-#modalCart-overlay {
-  overflow-y: scroll;
-}
-
-#bottomHTML {
-  text-align: center;
-}
-
-#bottomHTML h6, #bottomHTML a {
-  color: #999;
-}

client/src/css/styleParent.css

@@ -1,93 +0,0 @@
- #containerBookingBtn {
-    display: none;
-    margin: 0;
-}
-
-#get_flash {
-    display: none;
-}
-
-.ui-dialog-titlebar {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-
-.ui-dialog-title {
-    text-align: center;
-}
-
-.ui-widget-overlay {
-    background: white;
-    opacity: 1;
-    width: 100vw;
-    height: 100vh;
-}
-
-#openSeatmap img {
-    width: 64px;
-}
-
-#openSeatmap {
-    padding: 1rem;
-    font-weight: bold;
-    color: #ffb201;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-#openSeatmap span {
-    font-size: .8rem;
-    /* color: #5c5c5c; */
-}
-
-#foobarParent {
-    display: none;
-}
-
-div#dialogSeatmap {
-    padding-top: 0;
-}
-
-.ui-widget-header {
-    background: #fff;
-    border: 1px solid #c6c6c6;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.ui-dialog {
-    background: white;
-    left: 0 !important;
-    padding: 0;
-    top: 0 !important;
-    right: 0 !important;
-}
-
-.ui-dialog .ui-dialog-content {
-    padding: 0;
-}
-
-.ui-dialog-titlebar {
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0 !important;
-    display: none;
-}
-
-#iframeSeatmap {
-    height: 100vh;
-    background: white;
-    width: 100%;
-}
-
-.ui-corner-all {
-    border-radius: 0;
-}
-
-.ui-dialog-title {
-    display: none;
-}
-
-.ui-widget {
-    border: none !important;
-}

client/src/inject.ts

@@ -7,7 +7,7 @@ import * as Parser from './modules/parser';
 import * as UI from "./modules/ui";
 import * as BookingBtn from "./modules/bookingButton";
 import * as Parent from "./modules/parent";
-// require("../src/css/styleParent.css");
+require("../src/css/inject.css");
 
 let inputsWithValue: I.InputsWithValue;
 

client/src/modules/child.ts

@@ -100,8 +100,8 @@ export function injectResources(): void {
     const resources = config.resources[branch];
 
     Utils.inject(resources.JSC, "js", "head");
-    Utils.inject(resources.CSSJSC, "css", "body");
+    Utils.inject(resources.CSSJSC, "css", "body");    
+    Utils.inject(resources.CSSjQueryUI, "css", "body");    
     Utils.inject(resources.CSSChild, "css", "body");
-    Utils.inject(resources.CSSjQueryUI, "css", "body");
+    // Utils.inject(resources.CSSjBox, "css", "body");
-    Utils.inject(resources.CSSjBox, "css", "body");
 }

client/src/modules/config.ts

@@ -10,18 +10,18 @@ export const config: I.Config = {
         master: {
             seatmap: "https://tickets.zinomedia.de",
             JSC: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
-            CSSChild: "https://tickets.zinomedia.de/dist/styleChild.css",
+            CSSChild: "https://tickets.zinomedia.de/dist/seatmap.css",
             CSSJSC: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
-            CSSParent: "https://tickets.zinomedia.de/dist/styleParent.css",
+            CSSParent: "https://tickets.zinomedia.de/dist/inject.css",
             CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css",
             CSSjBox: "https://tickets.zinomedia.de/dist/jBox.all.min.css"
         },
         staging: {
             seatmap: "https://staging.tickets.zinomedia.de",
             JSC: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.min.js",
-            CSSChild: "https://staging.tickets.zinomedia.de/dist/styleChild.css",
+            CSSChild: "https://staging.tickets.zinomedia.de/dist/seatmap.css",
             CSSJSC: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
-            CSSParent: "https://staging.tickets.zinomedia.de/dist/styleParent.css",
+            CSSParent: "https://staging.tickets.zinomedia.de/dist/inject.css",
             CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css",
             CSSjBox: "https://staging.tickets.zinomedia.de/dist/jBox.all.min.css"
         }

client/src/seatmap.ts

@@ -8,8 +8,7 @@ import * as Cart from "./modules/cart";
 import * as BookingBtn from "./modules/bookingButton";
 import * as Child from './modules/child';
 import * as UI from "./modules/ui";
-// require("jbox/dist/jBox.all.css");
+require("../src/css/seatmap.css");
-// require("../src/css/styleChild.css");
 
 window.addEventListener('load', () => {
     // Inject JSC (jQuery Seat Charts)