fix(jwc-core): inject styles into host

jwcjs · Dec 17, 2022 · f198477 · f198477
1 parent 0e88121
commit f198477
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 91 deletions.
diff --git a/packages/jwc-core/src/wc-class.ts b/packages/jwc-core/src/wc-class.ts
@@ -29,7 +29,6 @@ export class JwcComponent extends HTMLElement implements JwcElement {
   public previousVNode = null;
 
   public host: HTMLElement;
-  public css: any;
 
   public override shadowRoot: ShadowRoot;
 
@@ -95,10 +94,8 @@ export class JwcComponent extends HTMLElement implements JwcElement {
   private initShadowRoot() {
     let shadowRoot: ShadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' });
     shadowRoot = this.initCSS(this.shadowRoot);
-    if(this.css) {
-      shadowRoot.appendChild(createCSSElement(
-        typeof this.css === 'function' ? this.css() : this.css
-      ))
+    if(this.$options.css) {
+      shadowRoot.appendChild(createCSSElement(this.$options.css))
     }
     if (this.inlineStyles) {
       this.customStyles = createCSSElement(this.inlineStyles);

diff --git a/packages/jwc-starter-vite-ts/src/App.css b/packages/jwc-starter-vite-ts/src/App.css
@@ -6,72 +6,6 @@
   text-align: center;
 }
 
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -84,21 +18,21 @@ button:focus-visible {
 .logo.jwc:hover {
   filter: drop-shadow(0 0 2em rgb(0, 0, 0));
 }
-/* 
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-} */
-/* 
+}
+
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
-} */
+}
 
 .card {
   padding: 2em;
@@ -108,23 +42,35 @@ button:focus-visible {
   color: #888;
 }
 
+@media (prefers-color-scheme: dark) {
+  .logo.jwc:hover {
+    filter: drop-shadow(0 0 2em rgb(255, 255, 255));
+  }
+}
+
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
   button {
     background-color: #f9f9f9;
   }
 }
-
-
-@media (prefers-color-scheme: dark) {
-  .logo.jwc:hover {
-    filter: drop-shadow(0 0 2em rgb(255, 255, 255));
-  }
-}
diff --git a/packages/jwc-starter-vite-ts/src/App.tsx b/packages/jwc-starter-vite-ts/src/App.tsx
@@ -1,10 +1,10 @@
 import { JwcComponent, Component, Prop, Event } from "@jwcjs/core";
 import { h } from "@jwcjs/runtime";
-import style from './App.css'
+import styles from './App.css?inline'
 
 @Component({
   name: "app-element",
-  css: style
+  css: styles
 })
 export class App extends JwcComponent {
   constructor() {

diff --git a/packages/jwc-starter-vite-ts/src/index.css b/packages/jwc-starter-vite-ts/src/index.css
@@ -0,0 +1,62 @@
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}