From c9e1cd7b0c68f912fc4369739b7267b176b5126b Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sun, 17 Mar 2019 07:45:46 +0000 Subject: [PATCH 1/5] Process urls in SCSS --- core/src/main.js | 23 ++++++++++++++++++++++ package-lock.json | 50 +++++++++++++++++++++++++++++++++++------------ package.json | 3 +++ 3 files changed, 63 insertions(+), 13 deletions(-) diff --git a/core/src/main.js b/core/src/main.js index 85c6dd1ad..2aa0a9c0c 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -52,6 +52,10 @@ import deepmerge from 'deepmerge'; import ContentSecurityPolicy from 'csp-parse'; import keytar from 'keytar'; +import postcss from 'postcss'; +import postcssUrl from 'postcss-url'; +import postcssScss from 'postcss-scss'; + import { FileUtils, BDIpc, Config, WindowUtils, Updater, Editor, Database } from './modules'; const sparkplug = path.resolve(__dirname, 'sparkplug.js'); @@ -83,12 +87,31 @@ class Comms { }); }); + const sassImporter = async (context, url, prev) => { + const file = path.resolve(prev, url); + + console.log('Importing', file, url, prev, context); + + const scss = await FileUtils.readFile(file); + + const result = await postcss([postcssUrl({url: 'inline', encodeType: 'base64', optimizeSvgEncode: true})]) + .process(scss, {from: file, syntax: postcssScss}); + + console.log('Processed', file, result); + + return {contents: result.css}; + }; + BDIpc.on('bd-compileSass', (event, options) => { if (typeof options.path === 'string' && typeof options.data === 'string') { options.data = `${options.data} @import '${options.path.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}';`; options.path = undefined; } + options.importer = function (url, prev, done) { + sassImporter(this, url, prev).then(done, done); + }; + sass.render(options, (err, result) => { if (err) event.reject(err); else event.reply(result); diff --git a/package-lock.json b/package-lock.json index e198080ca..1fa81af57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "betterdiscord", - "version": "2.0.0-beta.4", + "version": "2.0.0-beta.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2350,7 +2350,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -2358,8 +2357,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-support": { "version": "1.1.3", @@ -5594,8 +5592,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -7192,6 +7189,11 @@ "brorand": "^1.0.1" } }, + "mime": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==" + }, "mime-db": { "version": "1.38.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz", @@ -8354,7 +8356,6 @@ "version": "7.0.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", - "dev": true, "requires": { "chalk": "^2.4.2", "source-map": "^0.6.1", @@ -8365,7 +8366,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -8374,7 +8374,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -8385,7 +8384,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -8395,14 +8393,12 @@ "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 + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "supports-color": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -8449,6 +8445,14 @@ "postcss": "^7.0.6" } }, + "postcss-scss": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz", + "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==", + "requires": { + "postcss": "^7.0.0" + } + }, "postcss-selector-parser": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", @@ -8468,6 +8472,18 @@ } } }, + "postcss-url": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-8.0.0.tgz", + "integrity": "sha512-E2cbOQ5aii2zNHh8F6fk1cxls7QVFZjLPSrqvmiza8OuXLzIpErij8BDS5Y3STPfJgpIMNCPEr8JlKQWEoozUw==", + "requires": { + "mime": "^2.3.1", + "minimatch": "^3.0.4", + "mkdirp": "^0.5.0", + "postcss": "^7.0.2", + "xxhashjs": "^0.2.1" + } + }, "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", @@ -11758,6 +11774,14 @@ "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" }, + "xxhashjs": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz", + "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==", + "requires": { + "cuint": "^0.2.2" + } + }, "y18n": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", diff --git a/package.json b/package.json index 6c3584c70..69efcc0f8 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,9 @@ "nedb": "^1.8.0", "node-sass": "^4.11.0", "original-fs": "^1.0.0", + "postcss": "^7.0.14", + "postcss-scss": "^2.0.0", + "postcss-url": "^8.0.0", "semver": "^5.6.0", "tar-fs": "^2.0.0" }, From 90035c066f1339c86b8b13099147e300aed4795d Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sun, 17 Mar 2019 08:12:32 +0000 Subject: [PATCH 2/5] Fix some SCSS variables not being set --- client/src/modules/thememanager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js index f97e4778e..d0838abaa 100644 --- a/client/src/modules/thememanager.js +++ b/client/src/modules/thememanager.js @@ -113,7 +113,7 @@ export default class ThemeManager extends ContentManager { const name = setting.id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-'); const scss = await setting.toSCSS(); - if (scss) return [name, scss]; + if (typeof scss !== 'undefined') return [name, scss]; } /** From 6a38e8ec471b0f36fd35720e27d8a9709a83801a Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sun, 17 Mar 2019 08:14:52 +0000 Subject: [PATCH 3/5] Fix path resolution --- core/src/main.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/core/src/main.js b/core/src/main.js index 2aa0a9c0c..46441e16b 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -88,18 +88,16 @@ class Comms { }); const sassImporter = async (context, url, prev) => { - const file = path.resolve(prev, url); + let file = path.resolve(path.dirname(prev), url); - console.log('Importing', file, url, prev, context); - - const scss = await FileUtils.readFile(file); + const scss = await FileUtils.readFile(file).catch(err => FileUtils.readFile(file += '.scss')); const result = await postcss([postcssUrl({url: 'inline', encodeType: 'base64', optimizeSvgEncode: true})]) .process(scss, {from: file, syntax: postcssScss}); console.log('Processed', file, result); - return {contents: result.css}; + return {file, contents: result.css}; }; BDIpc.on('bd-compileSass', (event, options) => { From d4ed8ad2407e5094e902b44dc309258a97499b34 Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sun, 17 Mar 2019 08:15:52 +0000 Subject: [PATCH 4/5] Watch inlined files --- core/src/main.js | 16 +++++++++++----- tests/ext/themes/Example/index.scss | 4 ++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/core/src/main.js b/core/src/main.js index 46441e16b..edb1e739d 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -87,7 +87,7 @@ class Comms { }); }); - const sassImporter = async (context, url, prev) => { + const sassImporter = async (context, url, prev, inlinedFiles) => { let file = path.resolve(path.dirname(prev), url); const scss = await FileUtils.readFile(file).catch(err => FileUtils.readFile(file += '.scss')); @@ -95,7 +95,10 @@ class Comms { const result = await postcss([postcssUrl({url: 'inline', encodeType: 'base64', optimizeSvgEncode: true})]) .process(scss, {from: file, syntax: postcssScss}); - console.log('Processed', file, result); + for (const message of result.messages) { + if (message.type !== 'dependency') continue; + inlinedFiles.push(message.file); + } return {file, contents: result.css}; }; @@ -106,13 +109,16 @@ class Comms { options.path = undefined; } + const inlinedFiles = []; + options.importer = function (url, prev, done) { - sassImporter(this, url, prev).then(done, done); + sassImporter(this, url, prev, inlinedFiles).then(done, done); }; sass.render(options, (err, result) => { - if (err) event.reject(err); - else event.reply(result); + if (err) return event.reject(err); + result.stats.includedFiles = result.stats.includedFiles.concat(inlinedFiles); + event.reply(result); }); }); diff --git a/tests/ext/themes/Example/index.scss b/tests/ext/themes/Example/index.scss index 225229aae..36c9942d2 100644 --- a/tests/ext/themes/Example/index.scss +++ b/tests/ext/themes/Example/index.scss @@ -35,3 +35,7 @@ $index: 0; $index: $index + 1; } + +.bd-scroller { + background-image: url('icon.svg'); +} From 9a7ec57c181cc43c0e182c00ae7f1a851e045083 Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sun, 17 Mar 2019 11:00:30 +0000 Subject: [PATCH 5/5] Resolve partials properly --- core/src/main.js | 5 ++++- tests/ext/themes/Example/{vars.scss => _vars.scss} | 0 2 files changed, 4 insertions(+), 1 deletion(-) rename tests/ext/themes/Example/{vars.scss => _vars.scss} (100%) diff --git a/core/src/main.js b/core/src/main.js index edb1e739d..fc8fd3601 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -90,7 +90,10 @@ class Comms { const sassImporter = async (context, url, prev, inlinedFiles) => { let file = path.resolve(path.dirname(prev), url); - const scss = await FileUtils.readFile(file).catch(err => FileUtils.readFile(file += '.scss')); + const scss = await FileUtils.readFile(file) + .catch(err => FileUtils.readFile(file += '.scss')) + .catch(err => FileUtils.readFile(file = path.join(path.dirname(file), '_' + path.basename(file).substr(0, path.basename(file).length - 5)))) + .catch(err => FileUtils.readFile(file += '.scss')); const result = await postcss([postcssUrl({url: 'inline', encodeType: 'base64', optimizeSvgEncode: true})]) .process(scss, {from: file, syntax: postcssScss}); diff --git a/tests/ext/themes/Example/vars.scss b/tests/ext/themes/Example/_vars.scss similarity index 100% rename from tests/ext/themes/Example/vars.scss rename to tests/ext/themes/Example/_vars.scss