feat(styles service): for creating helper css classes to prevent fouc

Author: jyounce

src/client/scripts/private/mixins/base.js

@@ -5,6 +5,8 @@ import { props, withComponent } from '../../../../../skatejs/dist/esnext/index.j
 import { html, render }         from '../../../../../lit-html/lit-html.js';
 import EventService             from '../../private/services/event.js';
 import ViewService              from '../../private/services/view.js';
+import Styles                   from '../../private/services/styles.js';
+Styles.addUtils(); // only runs once
 
 const Base = (BaseElm = HTMLElement) => class extends withComponent(BaseElm) {
 	/* Lifecycle

src/client/scripts/private/services/styles.js

@@ -0,0 +1,26 @@
+/************************************
+ * STYLES SERVICE
+ * ---------------------------------
+ * HOW TO USE
+ - import Styles from './styles.js';
+ * API
+ - Styles.addUtils(); :void
+ ************************************/
+const ID = 'rb-style-helpers';
+const STYLES = `
+	[rb-hide] { display: none !important; }
+`;
+
+const StylesService = {
+	addUtils() { // :void (ex: rb-toggle.js)
+		if (document.getElementById(ID)) return;
+		const styleElm = document.createElement('style');
+		styleElm.id = ID;
+		document.head.appendChild(styleElm);
+		styleElm.appendChild(document.createTextNode(STYLES));
+	}
+};
+
+/* Export it!
+ *************/
+export default StylesService;