fix: improve style appending

Author: feildmaster

src/base/chat/context.js

@@ -7,7 +7,6 @@ import each from 'src/utils/each.js';
 import * as fnUser from 'src/utils/user.js';
 import ignoreUser from 'src/utils/ignoreUser.js';
 import decode from 'src/utils/decode.js';
-import css from 'src/utils/css.js';
 import { buttonCSS, window } from 'src/utils/1.variables.js';
 import Translation from 'src/structures/constants/translation';
 
@@ -17,7 +16,7 @@ const setting = settings.register({
   page: 'Chat',
 });
 
-style.add(css`
+style.add(`
   .chatContext {
     background-color: #F4F4F4;
     margin: 10px;

src/base/styles/toast.js

@@ -1,7 +1,6 @@
-import css from 'src/utils/css.js';
 import style from 'src/utils/style.js';
 
-style.add(css`
+style.add(`
   #AlertToast {
     height: 0;
   }

src/base/underscript/changelog.js

@@ -3,7 +3,6 @@ import axios from 'axios';
 import { scriptVersion } from 'src/utils/1.variables.js';
 import style from 'src/utils/style.js';
 import * as menu from 'src/utils/menu.js';
-import css from 'src/utils/css.js';
 import Translation from 'src/structures/constants/translation';
 
 const changelog = {};
@@ -17,7 +16,7 @@ const keys = {
 };
 
 // Change log :O
-style.add(css`
+style.add(`
   .us-changelog h2 {
     font-size: 24px;
   }

src/base/underscript/patchnotes.js

@@ -3,7 +3,6 @@ import wrap from 'src/utils/2.pokemon.js';
 import { noop, scriptVersion } from 'src/utils/1.variables.js';
 import style from 'src/utils/style.js';
 import { toast } from 'src/utils/2.toasts.js';
-import css from 'src/utils/css.js';
 import Translation from 'src/structures/constants/translation';
 import eventManager from 'src/utils/eventManager';
 import * as changelog from './changelog.js';
@@ -33,7 +32,7 @@ wrap(function patchNotes() {
     installed.value() === scriptVersion
   ) return;
 
-  style.add(css`
+  style.add(`
     #AlertToast div.uschangelog span:nth-of-type(2) {
       max-height: 300px;
       overflow-y: auto;

src/base/underscript/updates.js

@@ -4,7 +4,6 @@ import debugToast from 'src/utils/debugToast';
 import { toast as Toast } from 'src/utils/2.toasts.js';
 import semver from 'src/utils/version.js';
 import { buttonCSS, scriptVersion, window } from 'src/utils/1.variables.js';
-import css from 'src/utils/css.js';
 import createParser from 'src/utils/parser';
 import eventManager from 'src/utils/eventManager';
 import {
@@ -18,7 +17,7 @@ import Translation from 'src/structures/constants/translation';
 
 // Check for script updates
 wrap(() => {
-  style.add(css`
+  style.add(`
     #AlertToast h2,
     #AlertToast h3 {
       margin: 0;

src/utils/settings/index.js

@@ -17,7 +17,7 @@ import DialogHelper from '../DialogHelper.js';
 
 const defaultSetting = new RegisteredSetting();
 
-style.add(styles.split('\n\n'));
+style.add(styles);
 
 /**
  * @type {{[key: string]: RegisteredSetting}}

src/utils/style.js

@@ -1,4 +1,5 @@
 import eventManager from './eventManager.js';
+import last from './last.js';
 
 // Custom CSS classes are great.
 export function newStyle(plugin = false) {
@@ -15,17 +16,18 @@ export function newStyle(plugin = false) {
   });
 
   function add(...styles) {
-    const hasChildren = styles.length || el.children.length;
-    if (loaded && hasChildren) appendStyle();
-    else if (!loaded) eventManager.once(':preload', () => appendStyle());
+    const hasChildren = styles.length + el.children.length;
+    if (hasChildren) {
+      if (loaded) appendStyle();
+      else eventManager.once(':preload', () => appendStyle());
+    }
     return wrapper(append(styles));
   }
 
   function append(styles = [], nodes = []) {
     styles.flat().forEach((s) => {
-      const node = document.createTextNode(s);
-      nodes.push(node);
-      el.appendChild(node);
+      el.append(s);
+      nodes.push(last(el.childNodes));
     });
     return nodes;
   }