From 2b5fee1d441cdcfeccb6aee67ea1297898c0a187 Mon Sep 17 00:00:00 2001
From: kofzx <kofzx123@gmail.com>
Date: Tue, 29 Jun 2021 16:12:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(runtime):=20=E5=B1=9E=E6=80=A7=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E9=87=8C=E5=8F=AF=E4=BB=A5=E5=B8=A6=E7=A9=BA?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../taro-runtime/src/__tests__/html.spec.js   | 22 +++++++++++++++++++
 packages/taro-runtime/src/dom/html/style.ts   |  8 +++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/taro-runtime/src/__tests__/html.spec.js b/packages/taro-runtime/src/__tests__/html.spec.js
index 06610d237231..009e033aecf3 100644
--- a/packages/taro-runtime/src/__tests__/html.spec.js
+++ b/packages/taro-runtime/src/__tests__/html.spec.js
@@ -108,6 +108,28 @@ describe('html with <style>', () => {
     expect(el1.style.cssText).toBe('font-size: 10;')
   })
 
+  it('attributes selector with space', () => {
+    const html = `
+      <style>
+        [name = "title"]   {
+          color: red;
+        }
+        [name = "body"][content = 'hello-world'] {
+          font-size: 10;
+        }
+      </style>
+      <div>
+        <div name="title"></div>
+        <div name="body" content="hello-world"></div>
+      </div>
+    `
+    const res = parser(html)
+    const el0 = res[0].children[0]
+    const el1 = res[0].children[1]
+    expect(el0.style.cssText).toBe('color: red;')
+    expect(el1.style.cssText).toBe('font-size: 10;')
+  })
+
   it('combination', () => {
     const html = `
       <style>
diff --git a/packages/taro-runtime/src/dom/html/style.ts b/packages/taro-runtime/src/dom/html/style.ts
index 7bf258a74f3d..8286c550391c 100644
--- a/packages/taro-runtime/src/dom/html/style.ts
+++ b/packages/taro-runtime/src/dom/html/style.ts
@@ -70,8 +70,12 @@ export default class StyleTagParser {
   }
 
   parseSelector (src: string) {
-    // todo: 属性选择器里可以带空格：[a = "b"]，这里的 split(' ') 需要作兼容
-    const list = src.trim().replace(/ *([>~+]) */g, ' $1').replace(/ +/g, ' ').split(' ')
+    const list = src
+      .trim()
+      .replace(/ *([>~+]) */g, ' $1')
+      .replace(/ +/g, ' ')
+      .replace(/\[([^\[\]=\s]+)\s*=\s*([^\[\]=\s]+)\]/g, '[$1=$2]')
+      .split(' ')
     const selectors = list.map(item => {
       const firstChar = item.charAt(0)
       const selector: ISelector = {