perf: remove duplicate custom props from theme CSS (#969)

bin/build-sass.js

@@ -2,6 +2,8 @@ import sass from 'node-sass'
 import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
+import cssDedoupe from 'css-dedoupe'
+import { TextDecoder } from 'text-encoding'
 
 const writeFile = promisify(fs.writeFile)
 const readdir = promisify(fs.readdir)
@@ -31,9 +33,10 @@ async function compileGlobalSass () {
 async function compileThemesSass () {
   let files = (await readdir(themesScssDir)).filter(file => !path.basename(file).startsWith('_'))
   await Promise.all(files.map(async file => {
-    let res = await render({ file: path.join(themesScssDir, file), outputStyle: 'compressed' })
+    let css = await renderCss(path.join(themesScssDir, file))
+    css = cssDedoupe(new TextDecoder('utf-8').decode(css)) // remove duplicate custom properties
     let outputFilename = 'theme-' + path.basename(file).replace(/\.scss$/, '.css')
-    await writeFile(path.join(assetsDir, outputFilename), res.css, 'utf8')
+    await writeFile(path.join(assetsDir, outputFilename), css, 'utf8')
   }))
 }
 

package.json

@@ -51,6 +51,7 @@
     "clean-css": "^4.2.1",
     "compression": "^1.7.3",
     "cross-env": "^5.2.0",
+    "css-dedoupe": "^0.1.1",
     "css-loader": "^2.1.0",
     "emoji-mart": "github:nolanlawson/emoji-mart#for-pinafore-1",
     "emoji-regex": "^7.0.3",
@@ -95,6 +96,7 @@
     "svelte-transitions": "^1.2.0",
     "svgo": "^1.1.1",
     "terser-webpack-plugin": "^1.2.1",
+    "text-encoding": "^0.7.0",
     "tiny-queue": "^0.2.1",
     "uuid": "^3.3.2",
     "web-animations-js": "^2.3.1",

yarn.lock

@@ -2087,6 +2087,14 @@ crypto-md5@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-md5/-/crypto-md5-1.0.0.tgz#ccc8da750c753c7edcbabc542967472a384e86bb"
   integrity sha1-zMjadQx1PH7curxUKWdHKjhOhrs=
 
+css-dedoupe@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/css-dedoupe/-/css-dedoupe-0.1.1.tgz#c76047fe0472c089a6ee4258a10f19e346073867"
+  integrity sha1-x2BH/gRywImm7kJYoQ8Z40YHOGc=
+  dependencies:
+    css "^2.2.1"
+    obj-to-css "^1.0.0"
+
 css-loader@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.0.tgz#42952ac22bca5d076978638e9813abce49b8f0cc"
@@ -2173,6 +2181,16 @@ css@2.2.3:
     source-map-resolve "^0.5.1"
     urix "^0.1.0"
 
+css@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -5218,6 +5236,11 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
+obj-to-css@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/obj-to-css/-/obj-to-css-1.0.1.tgz#5ca339d95fb6fb5d8b823aee55c313db5987fb67"
+  integrity sha1-XKM52V+2+12LgjruVcMT21mH+2c=
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -6636,7 +6659,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.1:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.1, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
@@ -7292,6 +7315,11 @@ testcafe@^1.0.0:
     typescript "^2.2.2"
     useragent "^2.1.7"
 
+text-encoding@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.7.0.tgz#f895e836e45990624086601798ea98e8f36ee643"
+  integrity sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"