feat: Inject sfc style to csui root when using vue(PlasmoHQ#675) (Pla…

…smoHQ#686) * Add style-raw:*.vue pipeline * Add getSfcStyleContent to PlasmoCSUI and define it at mount time * Add SfcStyleContent to getStyle argument * Override getStyle when it is not defined
judescripts · Jul 17, 2023 · 462e804 · 462e804
1 parent f42b9b0
commit 462e804
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/cli/plasmo/src/type.ts b/cli/plasmo/src/type.ts
@@ -68,7 +68,12 @@ export type PlasmoMountShadowHost = (
 
 export type PlasmoGetShadowHostId = Getter<string, PlasmoCSUIAnchor>
 
-export type PlasmoGetStyle = Getter<HTMLStyleElement, PlasmoCSUIAnchor>
+export type PlasmoGetStyle = Getter<
+  HTMLStyleElement,
+  PlasmoCSUIAnchor & { sfcStyleContent?: string }
+>
+
+export type PlasmoGetSfcStyleContent = Getter<string>
 
 /**
  * @return a cleanup unwatch function that will be run when unmounted
@@ -113,6 +118,7 @@ export type PlasmoCSUIWatch = (props: {
 export type PlasmoCSUI<T> = {
   default: any
   getStyle: PlasmoGetStyle
+  getSfcStyleContent: PlasmoGetSfcStyleContent
   getShadowHostId: PlasmoGetShadowHostId
 
   getOverlayAnchor: PlasmoGetOverlayAnchor

diff --git a/cli/plasmo/templates/static/common/csui.ts b/cli/plasmo/templates/static/common/csui.ts
@@ -32,7 +32,11 @@ async function injectAnchor<T>(
   mountState?: PlasmoCSUIMountState
 ) {
   if (typeof Mount.getStyle === "function") {
-    shadowRoot.prepend(await Mount.getStyle(anchor))
+    const sfcStyleContent =
+      typeof Mount.getSfcStyleContent === "function"
+        ? await Mount.getSfcStyleContent()
+        : ""
+    shadowRoot.prepend(await Mount.getStyle({ ...anchor, sfcStyleContent }))
   }
 
   if (typeof Mount.getShadowHostId === "function") {

diff --git a/cli/plasmo/templates/static/vue3/content-script-ui-mount.ts b/cli/plasmo/templates/static/vue3/content-script-ui-mount.ts
@@ -10,14 +10,30 @@ import { createApp } from "vue"
 // @ts-ignore
 import RawMount from "__plasmo_mount_content_script__"
 
+// prettier-sort-ignore
+// @ts-ignore
+import SfcStyleContent from "style-raw:__plasmo_mount_content_script__"
+
 import type {
   PlasmoCSUI,
   PlasmoCSUIAnchor,
   PlasmoCSUIHTMLContainer
 } from "~type"
 
 // Escape parcel's static analyzer
-const Mount = RawMount.plasmo as PlasmoCSUI<PlasmoCSUIHTMLContainer>
+const Mount = (RawMount.plasmo || {}) as PlasmoCSUI<PlasmoCSUIHTMLContainer>
+
+if (typeof SfcStyleContent === "string") {
+  Mount.getSfcStyleContent = () => SfcStyleContent
+
+  if (typeof Mount.getStyle !== "function") {
+    Mount.getStyle = ({ sfcStyleContent }) => {
+      const element = document.createElement("style")
+      element.textContent = sfcStyleContent
+      return element
+    }
+  }
+}
 
 const observer = createAnchorObserver(Mount)
 

diff --git a/core/parcel-config/index.json b/core/parcel-config/index.json
@@ -42,6 +42,7 @@
     "template:*.vue": ["@plasmohq/parcel-transformer-vue"],
     "script:*.vue": ["@plasmohq/parcel-transformer-vue"],
     "style:*.vue": ["@plasmohq/parcel-transformer-vue"],
+    "style-raw:*.vue": ["@plasmohq/parcel-transformer-vue"],
     "custom:*.vue": ["@plasmohq/parcel-transformer-vue"],
 
     "*.svelte": ["@plasmohq/parcel-transformer-svelte"],

diff --git a/core/parcel-transformer-vue/src/index.ts b/core/parcel-transformer-vue/src/index.ts
@@ -338,7 +338,8 @@ async function processPipeline({
 
       return [scriptAsset]
     }
-    case "style": {
+    case "style":
+    case "style-raw": {
       let cssModules = {}
       let assets = await Promise.all(
         styles.map(async (style, i) => {
@@ -408,11 +409,12 @@ async function processPipeline({
           return styleAsset
         })
       )
-      if (Object.keys(cssModules).length !== 0) {
-        assets.push({
-          type: "js",
-          uniqueKey: asset.id + "-cssModules",
-          content: `
+      if (asset.pipeline == "style") {
+        if (Object.keys(cssModules).length !== 0) {
+          assets.push({
+            type: "js",
+            uniqueKey: asset.id + "-cssModules",
+            content: `
  import {render} from 'template:./${basePath}';
  let cssModules = ${JSON.stringify(cssModules)};
  ${
@@ -425,9 +427,22 @@ async function processPipeline({
      : ""
  }
  export default cssModules;`
-        })
+          })
+        }
+        return assets
+      } else if (asset.pipeline == "style-raw") {
+        const styleRawString = assets.map((a) => a.content).join("\n")
+        return [
+          {
+            type: "js",
+            uniqueKey: asset.id + "-cssRawString",
+            content: `
+const styleRawString = \`${styleRawString}\`
+export default styleRawString
+          `
+          }
+        ]
       }
-      return assets
     }
     case "custom": {
       let toCall = []