Add with-svelte-injected-style example (#63)

* Add with-svelte-injected-style example

* Remove with-svelte-injected-style

* Implement injected styles

with-svelte/contents/plasmo-overlay.css

@@ -1,9 +1,3 @@
-.hw-top {
-  background: red;
-  color: white;
-  font-family: "Fascinate";
-}
-
 #plasmo-shadow-container {
   width: 200px;
   background-color: purple;

with-svelte/contents/plasmo-overlay.svelte

@@ -14,3 +14,13 @@
 </script>
 
 <span class="hw-top">Every living thing wants to survive</span>
+
+<style>
+  .hw-top {
+    background: red;
+    color: white;
+    font-family: "Fascinate";
+    width: 200px;
+    border: 8px solid aqua;
+  }
+</style>

with-svelte/package.json

@@ -5,7 +5,8 @@
   "description": "A basic Plasmo extension.",
   "author": "Plasmo Corp. <[email protected]>",
   "contributors": [
-    "louisgv"
+    "louisgv",
+    "joacoesteban"
   ],
   "scripts": {
     "dev": "plasmo dev",

with-svelte/svelte.config.mjs

@@ -8,7 +8,10 @@ import preprocess from "svelte-preprocess"
 const config = {
   preprocess: preprocess({
     // ...svelte-preprocess options
-  })
+  }),
+  compilerOptions: {
+    css: 'injected', // this is the default mode
+  }
   // ...other svelte options
 }