improving cssInjectorFromString

README.md

@@ -38,11 +38,20 @@ toguro --create-client-app // create a client where you can test your app
 
 ## Styling
 
-When I first designed the architecture, vue custom components was still in "beta" version.
-The only way of adding css to the custom components were by either giving all of them `.ce.vue` file extensions, or by doing as I did here where you import your css in the main app.
+As per [Vue Documentation](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue) around custom elements, you can't really add a style tag inside the component without making it a custom element itself (meaning having it with `.ce.vue` extension). As far as I understood, after trying out a few things, you'd need to register each element separately with those extensions, or add the style inline`
 
-As soon as I find/create a way to separate them properly I will be updating the CLI.
-(If you are aware of a better way of doing this already, please let us know by sending an email <3 )
+The best structure I could come up with to allow `code splitting` and work with `shadow root`, was by injecting the css file in the component itself. (The default is using `scss`, but if you want to use something different you can play with the file `globals.d.ts` adding a declaration for your styling loader).
+
+Here's how to inject it:
+
+```
+import { InjectCssInShadowRootFromString } from '@/helpers/css-injector';
+import thisCss from './example.scss';
+
+onMounted(() => {
+  InjectCssInShadowRootFromString(thisCss);
+});
+```
 
 ## How can I test and publish Apps in the meantime?
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toguro/cli",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "Toguro cli to create and manage custom apps",
   "main": "src/cli.js",
   "bin": {

templates/toguro-app-codebase/src/helpers/css-injector.ts

@@ -1,3 +1,5 @@
+import { getCurrentInstance } from 'vue';
+
 export const InjectCssInShadowRoot = (root: HTMLElement, selectors: string) => {
   const styleSheets = document.querySelectorAll(selectors);
   let innerHTML = '';
@@ -10,7 +12,11 @@ export const InjectCssInShadowRoot = (root: HTMLElement, selectors: string) => {
   shadowRoot.appendChild(styleElement);
 };
 
-export const InjectCssInShadowRootFromString = (root: HTMLElement, css: string) => {
+export const InjectCssInShadowRootFromString = (css: string) => {
+  const root = getCurrentInstance()?.root.vnode.el;
+  if (!root) {
+    return;
+  }
   const shadowRoot = root.getRootNode();
   const styleElement = document.createElement('style');
   styleElement.innerHTML = css;

templates/toguro-app-codebase/src/views/components/example/example.vue

@@ -9,6 +9,6 @@
 
   const root = ref<HTMLDivElement>();
   onMounted(() => {
-    InjectCssInShadowRootFromString(root.value!, thisCss);
+    InjectCssInShadowRootFromString(thisCss);
   });
 </script>

templates/toguro-app-codebase/src/views/pages/main/main.vue

@@ -18,6 +18,6 @@
   const appLoaded = computed(gettersOfApp.appLoaded);
 
   onMounted(() => {
-    InjectCssInShadowRootFromString(root.value!, thisCss);
+    InjectCssInShadowRootFromString(thisCss);
   });
 </script>