feat: allow extraction of css to external files

Author: feildmaster

package-lock.json

@@ -58,6 +58,7 @@
     "axios": "^0.21.4",
     "luxon": "^1.28.0",
     "popper.js": "^1.16.1",
+    "rollup-plugin-import-css": "^3.2.1",
     "showdown": "^2.0.0",
     "simpletoast": "github:feildmaster/SimpleToast",
     "tippy.js": "^4.3.5"

package.json

@@ -5,6 +5,8 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const cleanup = require('rollup-plugin-cleanup');
 const multi = require('@rollup/plugin-multi-entry');
 const externals = require('rollup-plugin-external-globals');
+const css = require('rollup-plugin-import-css');
+
 const { version } = require('./package.json');
 
 const debug = process.argv.includes('--configDebug');
@@ -64,6 +66,7 @@ module.exports = [{
   external: ['luxon', 'showdown', 'axios', 'tippy.js'],
   plugins: [
     nodeResolve({ browser: true }),
+    css(),
     multi({
       exports: false,
     }),

rollup.config.js

@@ -97,7 +97,7 @@ wrap(() => {
     latest.set(data);
     if (updateToast) updateToast.close('stale');
     const path = `underscript@${data.version}/${data.unpkg}`;
-    const css = {
+    const baseStyle = {
       border: '',
       height: '',
       background: '',
@@ -112,19 +112,19 @@ wrap(() => {
       buttons: [{
         text: 'Update (github)',
         className: 'dismiss',
-        css,
+        css: baseStyle,
       }, {
         text: 'Update (unpkg)',
         className: 'dismiss',
-        css,
+        css: baseStyle,
         onclick(e) {
           location.href = `${baseURL}/${path}`;
           this.close('update');
         },
       }, {
         text: 'Update (jsdelivr)',
         className: 'dismiss',
-        css,
+        css: baseStyle,
         onclick: (e) => {
           location.href = `https://cdn.jsdelivr.net/npm/${path}`;
           this.close('update');

src/base/updates.js

@@ -1,12 +1,14 @@
 export default function css(strings = [], ...values) {
   const evaluated = strings.reduce((acc, string, i) => {
-    acc.push(string
-      .trimStart()
-      // .replace(/[ ]{2}/g, ' ')
-      // trim "  }" and "  \n"
-      .replace(/^[ ]+(?<last>[\n}])/gm, '$<last>')
-      // trim "  *"
-      .replace(/(?:^|})\n+[ ]{1,2}(?<last>[^ /])/gm, '}\n\n$<last>'));
+    if (string) {
+      acc.push(string
+        .trimStart()
+        // .replace(/[ ]{2}/g, ' ')
+        // trim "  }" and "  \n"
+        .replace(/^[ ]+(?<last>[\n}])/gm, '$<last>')
+        // trim "  *"
+        .replace(/(?:^|})\n+[ ]{1,2}(?<last>[^ /])/gm, '}\n\n$<last>'));
+    }
     const value = values[i];
     if (value) acc.push(value.toString());
     return acc;

src/utils/css.js

@@ -4,34 +4,33 @@ import SettingType from './types/setting.js';
 export default class RegisteredSetting {
   /** @type {string} */
   #key;
-  /** @type {string} */
+  /** @type {string | function(): string} */
   #name;
   /** @type {SettingType} */
   #type;
   /** @type {string} (or plugin) */
   #page;
   /** @type {string} */
   #category;
-  /** @type {any} */
   #default;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #disabled;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #hidden;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #remove;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #export;
-  /** @type {string} */
+  /** @type {string?} */
   #prefix;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #reset;
   #data;
-  /** @type {string | Function} */
+  /** @type {string | null | function(): string?} */
   #note;
-  /** @type {boolean | Function} */
+  /** @type {boolean | null | function(): boolean?} */
   #refresh;
-  /** @type {Function} */
+  /** @type {function(any, any): never} */
   #onChange;
   /** @type {EventEmitter} */
   #events;
@@ -83,8 +82,11 @@ export default class RegisteredSetting {
     return this.#key;
   }
 
+  /**
+   * @returns {string}
+   */
   get name() {
-    return this.#name;
+    return this.#value(this.#name);
   }
 
   get type() {
@@ -123,15 +125,18 @@ export default class RegisteredSetting {
     return this.#value(this.#reset) === true;
   }
 
+  /**
+   * @returns {unknown}
+   */
   get data() {
-    return this.#data;
+    return this.#value(this.#data);
   }
 
   get note() {
     const notes = [];
 
     const note = this.#value(this.#note);
-    if (note) {
+    if (typeof note === 'string') {
       notes.push(note);
     }
 
@@ -161,6 +166,10 @@ export default class RegisteredSetting {
     this.#events.emit('setting:change', key, val, prev);
   }
 
+  set value(val) {
+    this.update(val);
+  }
+
   get value() {
     const val = localStorage.getItem(this.key);
     if (!val) {
@@ -169,6 +178,9 @@ export default class RegisteredSetting {
     return this.type.value(val);
   }
 
+  /**
+   * @returns {unknown}
+   */
   get default() {
     const val = this.#default;
     if (val !== undefined) {