From 6b88c41ffc7d3794467481629f3025837e6d54a8 Mon Sep 17 00:00:00 2001
From: WangXinhai <18907191365@189.cn>
Date: Mon, 25 Feb 2019 17:29:58 +0800
Subject: [PATCH] perf[ThemePicker]: refine updateStyle function (#554)

* theme replacing should cut tons of irrelevant css
---
 src/components/ThemePicker/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 332b07e7..52419929 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -67,11 +67,18 @@ export default {
 
   methods: {
     updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
+      const colorOverrides = [] // only capture color overides
       oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+        const value = newCluster[index]
+        const color_plain = color.replace(/([()])/g, '\\$1')
+        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
+        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
+        let v
+        while ((v = repl.exec(style))) {
+          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
+        }
       })
-      return newStyle
+      return colorOverrides.join('')
     },
 
     getCSSString(url, callback, variable) {