From 59f2025309eced9620106ab2d6335cbb472347f5 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Sun, 28 Feb 2021 19:22:45 -0500 Subject: [PATCH] Switch to bundling css --- package-lock.json | 205 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 +- src/modules/core.js | 54 +----------- webpack.config.js | 4 + 4 files changed, 215 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c708873..3aed1024 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2571,6 +2571,127 @@ "randomfill": "^1.0.3" } }, + "css-loader": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.0.tgz", + "integrity": "sha512-mFs3Xe2UrzRzL0+ML6e7Q2e/Ozp/WpDcam0l1X+rXgkuFjjsNSrjiyimG6malUOZGVuEjzKp1NqEqN3exG7ZqQ==", + "dev": true, + "requires": { + "camelcase": "^6.2.0", + "cssesc": "^3.0.0", + "icss-utils": "^5.1.0", + "loader-utils": "^2.0.0", + "postcss": "^8.2.6", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.1.0", + "schema-utils": "^3.0.0", + "semver": "^7.3.4" + }, + "dependencies": { + "@types/json-schema": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", + "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", + "dev": true + }, + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true + }, + "camelcase": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", + "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==", + "dev": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "nanoid": { + "version": "3.1.20", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz", + "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==", + "dev": true + }, + "postcss": { + "version": "8.2.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.6.tgz", + "integrity": "sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==", + "dev": true, + "requires": { + "colorette": "^1.2.1", + "nanoid": "^3.1.20", + "source-map": "^0.6.1" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + }, + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } + }, "css-tree": { "version": "1.0.0-alpha.39", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz", @@ -4212,6 +4333,12 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true + }, "ieee754": { "version": "1.1.13", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz", @@ -4713,6 +4840,12 @@ "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, + "klona": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", + "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==", + "dev": true + }, "known-css-properties": { "version": "0.19.0", "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.19.0.tgz", @@ -6512,12 +6645,84 @@ } } }, + "postcss-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-5.0.0.tgz", + "integrity": "sha512-bOvyWP5VHCJbThbv7wrBwCBc3DsVpyCfd+k/wHOL3wTAMMHmSSfNts90EADf8bHa6I810ird1JBEKmBRgJu3cg==", + "dev": true, + "requires": { + "cosmiconfig": "^7.0.0", + "klona": "^2.0.4", + "semver": "^7.3.4" + }, + "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } + }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=", "dev": true }, + "postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true + }, + "postcss-modules-local-by-default": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", + "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.4" + } + }, + "postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0" + } + }, "postcss-reporter": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.1.tgz", diff --git a/package.json b/package.json index d5ea8bd0..8f7b0ce3 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,7 @@ "lint": "npm run lint-js && npm run lint-css", "test": "mocha --require @babel/register --recursive \"./tests/*.js\"", "lint-prod": "npm run lint-js -- --quiet && npm run lint-css -- --quiet", - "test-prod": "npm run test -- --reporter min", - "deploy": "npm run build-prod && npm run build-prod-css" + "test-prod": "npm run test -- --reporter min" }, "repository": { "type": "git", @@ -35,6 +34,7 @@ "babel-loader": "^8.1.0", "babel-plugin-module-resolver": "^4.0.0", "circular-dependency-plugin": "^5.2.0", + "css-loader": "^5.1.0", "eslint": "^7.12.0", "eslint-plugin-react": "^7.21.5", "mocha": "^8.2.0", @@ -42,6 +42,7 @@ "postcss-cli": "^8.1.0", "postcss-csso": "^4.0.0", "postcss-easy-import": "^3.0.0", + "postcss-loader": "^5.0.0", "stylelint": "^13.7.2", "stylelint-config-standard": "^20.0.0", "webpack": "^4.43.0", diff --git a/src/modules/core.js b/src/modules/core.js index 07473a55..f2954b49 100644 --- a/src/modules/core.js +++ b/src/modules/core.js @@ -17,7 +17,7 @@ import DiscordModules from "./discordmodules"; import ComponentPatcher from "./componentpatcher"; import Strings from "./strings"; import LoadingIcon from "../loadingicon"; -import Utilities from "./utilities"; +import Styles from "../styles/index.css"; const {ipcRenderer} = require("electron"); const GuildClasses = DiscordModules.GuildClasses; @@ -38,18 +38,6 @@ export default new class Core { }); } - get dependencies() { - return [ - { - name: "bd-stylesheet", - type: "style", - url: "//cdn.staticaly.com/gh/rauenzi/BetterDiscordApp/{{hash}}/dist/style.css", - backup: "https://rauenzi.github.io/BetterDiscordApp/dist/style.css", - localPath: "style.css" - } - ]; - } - setConfig(config) { if (this.hasStarted) return; Object.assign(Config, config); @@ -59,9 +47,8 @@ export default new class Core { if (this.hasStarted) return; this.hasStarted = true; - // Load dependencies asynchronously if they don't exist - let dependencyPromise = new Promise(r => r()); - if (!window.$ || !window.jQuery) dependencyPromise = this.loadDependencies(); + // Load css early + DOMManager.injectStyle("bd-stylesheet", Styles.toString()); DataStore.initialize(); await LocaleManager.initialize(); @@ -80,7 +67,6 @@ export default new class Core { ComponentPatcher.initialize(); for (const module in Builtins) Builtins[module].initialize(); - await dependencyPromise; Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; const pluginErrors = PluginManager.initialize(); @@ -120,40 +106,6 @@ export default new class Core { }); } - async loadDependencies() { - for (const data of this.dependencies) { - if (Config.local && Config.localPath && data.localPath && data.type == "style") { - const stylepath = path.resolve(Config.localPath, data.localPath); - if (fs.existsSync(stylepath)) { - Logger.log("Startup", `Loading local stylesheet from (${stylepath})`); - const css = fs.readFileSync(stylepath).toString(); - DOMManager.injectStyle(data.name, css); - continue; - } - else { - Logger.warn("Startup", "Local stylesheet was not found, loading remote..."); - } - } - const url = Utilities.formatString(data.url, {hash: Config.hash}); - Logger.log(`Startup`, `Loading Resource (${url})`); - const injector = (data.type == "script" ? DOMManager.injectScript : DOMManager.linkStyle).bind(DOMManager); - try { - await injector(data.name, url); - } - catch (err) { - const backup = Utilities.formatString(data.backup); - Logger.stacktrace(`Startup`, `Could not load ${url}. Using backup ${backup}`, err); - try { - await injector(data.name, backup); - } - catch (e) { - Logger.stacktrace(`Startup`, `Could not load ${url}. Using backup ${backup}`, err); - if (data.name === "jquery") Modals.alert(Strings.Startup.jqueryFailed, Strings.Startup.jqueryFailedDetails); - } - } - } - } - async checkInjectorUpdate() { const request = require("request"); const latestVersion = await new Promise(resolve => { diff --git a/webpack.config.js b/webpack.config.js index 296c4ed2..0d765e04 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,6 +43,10 @@ module.exports = { } }], "@babel/react"] } + }, + { + test: /\.css$/i, + use: ["css-loader", "postcss-loader"], } ] },