Fix/styles in vue sfc not injected to shadow dom

core/parcel-config/index.json

@@ -53,7 +53,8 @@
   },
   "namers": ["@plasmohq/parcel-namer-manifest", "..."],
   "packagers": {
-    "manifest.json": "@plasmohq/parcel-packager"
+    "manifest.json": "@plasmohq/parcel-packager",
+    "*.{js,mjs,cjs}": "@plasmohq/parcel-packager-vue-content-script-style-injector"
   },
   "optimizers": {
     "data-base64:*": ["...", "@parcel/optimizer-data-url"],

core/parcel-config/package.json

@@ -35,6 +35,7 @@
     "@plasmohq/parcel-optimizer-encapsulate": "workspace:*",
     "@plasmohq/parcel-optimizer-es": "workspace:*",
     "@plasmohq/parcel-packager": "workspace:*",
+    "@plasmohq/parcel-packager-vue-content-script-style-injector": "workspace:*",
     "@plasmohq/parcel-resolver": "workspace:*",
     "@plasmohq/parcel-resolver-post": "workspace:*",
     "@plasmohq/parcel-runtime": "workspace:*",

core/parcel-packager-vue-content-script-style-injector/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+
+dist/

core/parcel-packager-vue-content-script-style-injector/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@plasmohq/parcel-packager-vue-content-script-style-injector",
+  "version": "0.6.14",
+  "description": "Plasmo Parcel Packager for Web Extension Manifest",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "prepublishOnly": "pnpm build",
+    "build": "rm -rf ./dist && mkdir dist && cp ./src/* ./dist"
+  },
+  "author": "Plasmo Corp. <[email protected]>",
+  "homepage": "https://docs.plasmo.com/",
+  "engines": {
+    "parcel": ">= 2.7.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PlasmoHQ/plasmo.git"
+  },
+  "devDependencies": {
+    "@plasmo/config": "workspace:*",
+    "@plasmo/constants": "workspace:*",
+    "@plasmo/utils": "workspace:*",
+    "tsup": "7.2.0"
+  },
+  "dependencies": {
+    "@parcel/core": "2.9.3",
+    "@parcel/diagnostic": "2.9.3",
+    "@parcel/hash": "2.9.3",
+    "@parcel/plugin": "2.9.3",
+    "@parcel/source-map": "2.9.3",
+    "@parcel/types": "2.9.3",
+    "@parcel/utils": "2.9.3",
+    "globals": "13.23.0",
+    "nullthrows": "1.1.1"
+  }
+}

core/parcel-packager-vue-content-script-style-injector/src/CJSOutputFormat.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CJSOutputFormat = void 0;
+class CJSOutputFormat {
+  constructor(packager) {
+    this.packager = packager;
+  }
+  buildBundlePrelude() {
+    let res = '';
+    let lines = 0;
+    for (let [source, specifiers] of this.packager.externals) {
+      // CJS only supports the namespace symbol. This ensures that all accesses
+      // are live and the `this` binding is correct.
+      let namespace = specifiers.get('*');
+      if (namespace) {
+        res += `var ${namespace} = require(${JSON.stringify(source)});\n`;
+        lines++;
+      } else {
+        res += `require(${JSON.stringify(source)});\n`;
+        lines++;
+      }
+    }
+    if (res.length > 0) {
+      res += '\n';
+      lines++;
+    }
+    return [res, lines];
+  }
+  buildBundlePostlude() {
+    return ['', 0];
+  }
+}
+exports.CJSOutputFormat = CJSOutputFormat;

core/parcel-packager-vue-content-script-style-injector/src/DevPackager.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DevPackager = void 0;
+function _utils() {
+  const data = require("@parcel/utils");
+  _utils = function () {
+    return data;
+  };
+  return data;
+}
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
+  _sourceMap = function () {
+    return data;
+  };
+  return data;
+}
+function _assert() {
+  const data = _interopRequireDefault(require("assert"));
+  _assert = function () {
+    return data;
+  };
+  return data;
+}
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _fs() {
+  const data = _interopRequireDefault(require("fs"));
+  _fs = function () {
+    return data;
+  };
+  return data;
+}
+var _utils2 = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const PRELUDE = _fs().default.readFileSync(_path().default.join(__dirname, 'dev-prelude.js'), 'utf8').trim().replace(/;$/, '');
+class DevPackager {
+  constructor(options, bundleGraph, bundle, parcelRequireName) {
+    this.options = options;
+    this.bundleGraph = bundleGraph;
+    this.bundle = bundle;
+    this.parcelRequireName = parcelRequireName;
+  }
+  async package() {
+    // Load assets
+    let queue = new (_utils().PromiseQueue)({
+      maxConcurrent: 32
+    });
+    this.bundle.traverseAssets(asset => {
+      queue.add(async () => {
+        let [code, mapBuffer] = await Promise.all([asset.getCode(), this.bundle.env.sourceMap && asset.getMapBuffer()]);
+        return {
+          code,
+          mapBuffer
+        };
+      });
+    });
+    let results = await queue.run();
+    let assets = '';
+    let i = 0;
+    let first = true;
+    let map = new (_sourceMap().default)(this.options.projectRoot);
+    let prefix = this.getPrefix();
+    let lineOffset = (0, _utils().countLines)(prefix);
+    let script = null;
+    this.bundle.traverse(node => {
+      let wrapped = first ? '' : ',';
+      if (node.type === 'dependency') {
+        let resolved = this.bundleGraph.getResolvedAsset(node.value, this.bundle);
+        if (resolved && resolved.type !== 'js') {
+          // if this is a reference to another javascript asset, we should not include
+          // its output, as its contents should already be loaded.
+          (0, _assert().default)(!this.bundle.hasAsset(resolved));
+          wrapped += JSON.stringify(this.bundleGraph.getAssetPublicId(resolved)) + ':[function() {},{}]';
+        } else {
+          return;
+        }
+      }
+      if (node.type === 'asset') {
+        let asset = node.value;
+        (0, _assert().default)(asset.type === 'js', 'all assets in a js bundle must be js assets');
+
+        // If this is the main entry of a script rather than a module, we need to hoist it
+        // outside the bundle wrapper function so that its variables are exposed as globals.
+        if (this.bundle.env.sourceType === 'script' && asset === this.bundle.getMainEntry()) {
+          script = results[i++];
+          return;
+        }
+        let deps = {};
+        let dependencies = this.bundleGraph.getDependencies(asset);
+        for (let dep of dependencies) {
+          let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
+          if (this.bundleGraph.isDependencySkipped(dep)) {
+            deps[(0, _utils2.getSpecifier)(dep)] = false;
+          } else if (resolved) {
+            deps[(0, _utils2.getSpecifier)(dep)] = this.bundleGraph.getAssetPublicId(resolved);
+          } else {
+            // An external module - map placeholder to original specifier.
+            deps[(0, _utils2.getSpecifier)(dep)] = dep.specifier;
+          }
+        }
+        let {
+          code,
+          mapBuffer
+        } = results[i];
+        let output = code || '';
+        wrapped += JSON.stringify(this.bundleGraph.getAssetPublicId(asset)) + ':[function(require,module,exports) {\n' + output + '\n},';
+        wrapped += JSON.stringify(deps);
+        wrapped += ']';
+        if (this.bundle.env.isNode() && asset.meta.has_node_replacements === true) {
+          const relPath = (0, _utils().normalizeSeparators)(_path().default.relative(this.bundle.target.distDir, _path().default.dirname(asset.filePath)));
+          wrapped = wrapped.replace('$parcel$dirnameReplace', relPath);
+          wrapped = wrapped.replace('$parcel$filenameReplace', relPath);
+        }
+        if (this.bundle.env.sourceMap) {
+          if (mapBuffer) {
+            map.addBuffer(mapBuffer, lineOffset);
+          } else {
+            map.addEmptyMap(_path().default.relative(this.options.projectRoot, asset.filePath).replace(/\\+/g, '/'), output, lineOffset);
+          }
+          lineOffset += (0, _utils().countLines)(output) + 1;
+        }
+        i++;
+      }
+      assets += wrapped;
+      first = false;
+    });
+    let entries = this.bundle.getEntryAssets();
+    let mainEntry = this.bundle.getMainEntry();
+    if (!this.isEntry() && this.bundle.env.outputFormat === 'global' || this.bundle.env.sourceType === 'script') {
+      // In async bundles we don't want the main entry to execute until we require it
+      // as there might be dependencies in a sibling bundle that hasn't loaded yet.
+      entries = entries.filter(a => {
+        var _mainEntry;
+        return a.id !== ((_mainEntry = mainEntry) === null || _mainEntry === void 0 ? void 0 : _mainEntry.id);
+      });
+      mainEntry = null;
+    }
+    let contents = prefix + '({' + assets + '},' + JSON.stringify(entries.map(asset => this.bundleGraph.getAssetPublicId(asset))) + ', ' + JSON.stringify(mainEntry ? this.bundleGraph.getAssetPublicId(mainEntry) : null) + ', ' + JSON.stringify(this.parcelRequireName) + ')' + '\n';
+
+    // The entry asset of a script bundle gets hoisted outside the bundle wrapper function
+    // so that its variables become globals. We need to replace any require calls for
+    // runtimes with a parcelRequire call.
+    if (this.bundle.env.sourceType === 'script' && script) {
+      let entryMap;
+      let mapBuffer = script.mapBuffer;
+      if (mapBuffer) {
+        entryMap = new (_sourceMap().default)(this.options.projectRoot, mapBuffer);
+      }
+      contents += (0, _utils2.replaceScriptDependencies)(this.bundleGraph, this.bundle, script.code, entryMap, this.parcelRequireName);
+      if (this.bundle.env.sourceMap && entryMap) {
+        map.addSourceMap(entryMap, lineOffset);
+      }
+    }
+    return {
+      contents,
+      map
+    };
+  }
+  getPrefix() {
+    let interpreter;
+    let mainEntry = this.bundle.getMainEntry();
+    if (mainEntry && this.isEntry() && !this.bundle.target.env.isBrowser()) {
+      let _interpreter = mainEntry.meta.interpreter;
+      (0, _assert().default)(_interpreter == null || typeof _interpreter === 'string');
+      interpreter = _interpreter;
+    }
+    let importScripts = '';
+    if (this.bundle.env.isWorker()) {
+      let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
+      for (let b of bundles) {
+        importScripts += `importScripts("${(0, _utils().relativeBundlePath)(this.bundle, b)}");\n`;
+      }
+    }
+    return (
+      // If the entry asset included a hashbang, repeat it at the top of the bundle
+      (interpreter != null ? `#!${interpreter}\n` : '') + importScripts + PRELUDE
+    );
+  }
+  isEntry() {
+    return !this.bundleGraph.hasParentBundleOfType(this.bundle, 'js') || this.bundle.env.isIsolated() || this.bundle.bundleBehavior === 'isolated';
+  }
+}
+exports.DevPackager = DevPackager;

core/parcel-packager-vue-content-script-style-injector/src/ESMOutputFormat.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ESMOutputFormat = void 0;
+class ESMOutputFormat {
+  constructor(packager) {
+    this.packager = packager;
+  }
+  buildBundlePrelude() {
+    let res = '';
+    let lines = 0;
+    for (let [source, specifiers] of this.packager.externals) {
+      let defaultSpecifier = null;
+      let namespaceSpecifier = null;
+      let namedSpecifiers = [];
+      for (let [imported, symbol] of specifiers) {
+        if (imported === 'default' /* || isCommonJS*/) {
+          defaultSpecifier = symbol;
+        } else if (imported === '*') {
+          namespaceSpecifier = `* as ${symbol}`;
+        } else {
+          let specifier = imported;
+          if (symbol !== imported) {
+            specifier += ` as ${symbol}`;
+          }
+          namedSpecifiers.push(specifier);
+        }
+      }
+
+      // ESModule syntax allows combining default and namespace specifiers, or default and named, but not all three.
+
+      let imported = '';
+      if (namespaceSpecifier) {
+        let s = namespaceSpecifier;
+        if (defaultSpecifier) {
+          s = `${defaultSpecifier}, ${namespaceSpecifier}`;
+        }
+        res += `import ${s} from ${JSON.stringify(source)};\n`;
+        lines++;
+      } else if (defaultSpecifier) {
+        imported = defaultSpecifier;
+        if (namedSpecifiers.length > 0) {
+          imported += `, {${namedSpecifiers.join(', ')}}`;
+        }
+      } else if (namedSpecifiers.length > 0) {
+        imported = `{${namedSpecifiers.join(', ')}}`;
+      }
+      if (imported.length > 0) {
+        res += `import ${imported} from ${JSON.stringify(source)};\n`;
+        lines++;
+      } else if (!namespaceSpecifier) {
+        res += `import ${JSON.stringify(source)};\n`;
+        lines++;
+      }
+    }
+    if (res.length > 0) {
+      res += '\n';
+      lines++;
+    }
+    return [res, lines];
+  }
+  buildBundlePostlude() {
+    let res = '';
+    let lines = 0;
+    let exportSpecifiers = [];
+    for (let {
+      asset,
+      exportSymbol,
+      local,
+      exportAs
+    } of this.packager.exportedSymbols.values()) {
+      if (this.packager.wrappedAssets.has(asset.id)) {
+        let obj = `parcelRequire("${this.packager.bundleGraph.getAssetPublicId(asset)}")`;
+        res += `\nvar ${local} = ${this.packager.getPropertyAccess(obj, exportSymbol)};`;
+        lines++;
+      }
+      for (let as of exportAs) {
+        let specifier = local;
+        if (exportAs !== local) {
+          specifier += ` as ${as}`;
+        }
+        exportSpecifiers.push(specifier);
+      }
+    }
+    if (exportSpecifiers.length > 0) {
+      res += `\nexport {${exportSpecifiers.join(', ')}};`;
+      lines++;
+    }
+    return [res, lines];
+  }
+}
+exports.ESMOutputFormat = ESMOutputFormat;