fix: avoid FOUC

package.json

@@ -20,7 +20,7 @@
     "@babel/register": "^7.6.0",
     "@gera2ld/plaid": "~1.4.12",
     "@gera2ld/plaid-vue": "~1.4.9",
-    "@gera2ld/plaid-webpack": "~1.4.12",
+    "@gera2ld/plaid-webpack": "~1.5.0",
     "cross-env": "^6.0.0",
     "del": "^5.1.0",
     "fancy-log": "^1.3.2",

scripts/plaid.conf.js

@@ -6,11 +6,20 @@ const { isProd } = require('@gera2ld/plaid/util');
  * - value.html: options object passed to HtmlWebpackPlugin.
  * - value.html.inlineSource: if true, JS and CSS files will be inlined in HTML.
  */
+const injectTo = item => {
+  if ([
+    '../browser.js',
+    '../common.js',
+  ].includes(item.attributes.src)) {
+    return 'head';
+  }
+};
 const htmlFactory = extra => options => ({
   ...options,
   title: 'Violentmonkey',
   ...extra,
   chunks: ['browser', ...options.chunks],
+  injectTo,
 });
 exports.pages = {
   'browser': {

src/common/ui/style/index.js

@@ -2,15 +2,25 @@ import options from '../../options';
 import './style.css';
 
 let style;
+const CACHE_KEY = 'cacheCustomCSS';
+
+const setStyle = (css) => {
+  if (css && !style) {
+    style = document.createElement('style');
+    document.head.appendChild(style);
+  }
+  if (css || style) {
+    css = css || '';
+    style.textContent = css;
+    localStorage.setItem(CACHE_KEY, css);
+  }
+};
+
+setStyle(localStorage.getItem(CACHE_KEY));
+
 options.hook((changes) => {
   if ('customCSS' in changes) {
     const { customCSS } = changes;
-    if (customCSS && !style) {
-      style = document.createElement('style');
-      document.head.appendChild(style);
-    }
-    if (customCSS || style) {
-      style.textContent = customCSS;
-    }
+    setStyle(customCSS);
   }
 });

src/options/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import {
   sendMessage, i18n, getLocaleString, cache2blobUrl,
 } from '#/common';
-import options from '#/common/options';
 import handlers from '#/common/handlers';
 import loadZip from '#/common/zip';
 import '#/common/ui/style';
@@ -22,14 +21,11 @@ initialize();
 
 function initialize() {
   initMain();
-  options.ready.then(() => {
-    const el = document.createElement('div');
-    document.body.appendChild(el);
-    new Vue({
-      render: h => h(App),
-    })
-    .$mount(el);
-  });
+  const vm = new Vue({
+    render: h => h(App),
+  })
+  .$mount();
+  document.body.append(vm.$el);
   loadZip()
   .then((zip) => {
     store.zip = zip;

src/popup/index.js

@@ -10,12 +10,11 @@ tld.initTLD();
 
 Vue.prototype.i18n = i18n;
 
-const el = document.createElement('div');
-document.body.appendChild(el);
-new Vue({
+const vm = new Vue({
   render: h => h(App),
 })
-.$mount(el);
+.$mount();
+document.body.append(vm.$el);
 
 Object.assign(handlers, {
   SetPopup(data, src) {

yarn.lock

@@ -834,10 +834,10 @@
     vue-loader "^15.7.1"
     vue-template-compiler "^2.6.10"
 
-"@gera2ld/plaid-webpack@~1.4.12":
-  version "1.4.12"
-  resolved "https://registry.yarnpkg.com/@gera2ld/plaid-webpack/-/plaid-webpack-1.4.12.tgz#c9d563abcd3195f8573c1bd940b38b463b1ebc76"
-  integrity sha1-ydVjq80xlfhXPBvZQLOLRjsevHY=
+"@gera2ld/plaid-webpack@~1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@gera2ld/plaid-webpack/-/plaid-webpack-1.5.0.tgz#b6dfa4a3ef58c742c61195144a70aad70aa92b72"
+  integrity sha512-K1F5r/mxTEN+AT3z0PSNe91LcRrQoFYeBzT+u1jUuTbufu+sX6N/NeartL2MBmFw8XcRZvvcoB8aU09Sz4TO0g==
   dependencies:
     babel-loader "^8.0.6"
     css-loader "^3.2.0"