Use .theme.css format, update documentation.

• Use `.theme.css` format (like in BetterDiscord) for user stylesheets. • Update documentation of custom styles feature.
SpacingBat3 · May 4, 2022 · f89f426 · f89f426
1 parent 964e2e1
commit f89f426
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 39 deletions.
diff --git a/docs/Features.md b/docs/Features.md
@@ -81,12 +81,26 @@ broken, so don't expect you will be able to use them as you intent to.
 
 #### 1. Custom Discord Styles
 
-From version `3.0.0`, WebCord is capable of styling Discord pages, yet the
-implementation is still very limited and most of existing themes are not
-functional yet.
-
-You can apply themes by creating a file in `{userData}/Themes/{theme name}/index.css`
-as for now.
+Since version `3.0.0`, WebCord is capable of styling Discord pages – unlike
+browser extensions like Stylus it does that without injecting any HTML elements
+to the page, to be more difficult to detect the modifications. On the other hand,
+the injected stylesheets can be easily overwritten by Discord CSS for some
+properties, which could be prevented with the `!important` rule. Moreover, using
+`@import` keyword for referencing an another CSS stylesheet wouldn't work at all
+as well and needed to be resolved before injection. That is why the
+implementation up to WebCord `3.1.3` was so problematic and didn't play well
+with most already pre-made Discord themes.
+
+However, it is now greatly improved in `master` branch – most themes, which does
+not rely on remote content like images and fonts should be now mostly
+functional, since WebCord is now capable of resolving `@import` statements and
+fixing the themes on the fly to make Chromium render them correctly. The only
+issue now is to allow styles to provide their own Content Security Policy in
+order to allow loading the remote content needed for scripts to function
+properly.
+
+Currently WebCord loads CSS themes from `{userData}/Themes/` directory when
+they ends with `.theme.css` extension, like most BetterDiscord themes does.
 
 #### 2. Chromium Extensions
 

diff --git a/sources/code/main/modules/extensions.ts b/sources/code/main/modules/extensions.ts
@@ -59,7 +59,7 @@ export async function loadStyles(webContents:Electron.WebContents) {
     const [
         { app },
         { readFile, readdir },
-        { watch, existsSync, mkdirSync },
+        { watch, existsSync, mkdirSync, statSync },
         { resolve }
     ] = await Promise.all([
         import("electron/main"),
@@ -73,39 +73,35 @@ export async function loadStyles(webContents:Electron.WebContents) {
         // Read CSS module directories.
         readdir(stylesDir)
             .then(paths => {
-                // Read directories containing CSS files. 
-                for(const directory of paths) readdir(resolve(stylesDir,directory))
-                    .then(paths => {
-                        const promises:Promise<Buffer>[] = [];
-                        if(paths.includes("index.css")) {
-                            const index = resolve(stylesDir,directory,"index.css")
-                            promises.push(readFile(index));
-                            if(process.platform !== "win32" && process.platform !== "darwin") {
-                                const fsWatch = watch(index);
-                                fsWatch.once("change", () => {
-                                    webContents.reload();
-                                })
-                                webContents.once("did-finish-load", () => fsWatch.close());
-                            }
+                const promises:Promise<Buffer>[] = [];
+                for(const path of paths) {
+                    const index = resolve(stylesDir,path);
+                    if (/^.+\.theme\.css$/.test(path) && statSync(index).isFile()) {
+                        promises.push(readFile(index));
+                        if(process.platform !== "win32" && process.platform !== "darwin") {
+                            const fsWatch = watch(index);
+                            fsWatch.once("change", () => {
+                                webContents.reload();
+                            })
+                            webContents.once("did-finish-load", () => fsWatch.close());
                         }
-                        Promise.all(promises).then(dataArray => {
-                            const themeIDs:Promise<string>[] = []
-                            for(const data of dataArray)
-                                themeIDs.push(
-                                    parseImports(data.toString())
-                                        /* Makes all CSS variables and color /
-                                         * backround properties `!important`
-                                         * (this should fix most styles).
-                                         */
-                                        .then(data => data.replaceAll(/((?:--|color|background)[^:;{]*:(?![^:]*?!important)[^:;]*)(;|})/g, '$1 !important$2'))
-                                        .then(data => webContents.insertCSS(data))
-                                );
-                            callback(themeIDs);
-                        }).catch(reason => reject(reason));
-                    })
-                    .catch(reason => reject(reason))
-            })
-            .catch(reason => reject(reason))
+                    }
+                }
+                Promise.all(promises).then(dataArray => {
+                    const themeIDs:Promise<string>[] = []
+                    for(const data of dataArray)
+                        themeIDs.push(
+                            parseImports(data.toString())
+                                /* Makes all CSS variables and color /
+                                 * backround properties `!important`
+                                 * (this should fix most styles).
+                                 */
+                                .then(data => data.replaceAll(/((?:--|color|background)[^:;{]*:(?![^:]*?!important)[^:;]*)(;|})/g, '$1 !important$2'))
+                                .then(data => webContents.insertCSS(data))
+                        );
+                    callback(themeIDs);
+                }).catch(reason => reject(reason));
+            }).catch(reason => reject(reason));
     });
     if(process.platform === "win32" || process.platform === "darwin")
         watch(stylesDir, {recursive:true}).once("change", () => {