fix(scopecss): Fixed bug of scopescss when @Keyframes name has specia…

…l characters
jd-opensource · Jul 15, 2022 · 83292ca · 83292ca
1 parent 892fac7
commit 83292ca
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/dev/children/react16/public/index.html b/dev/children/react16/public/index.html
@@ -28,8 +28,13 @@
       console.log(6666666, this)
     </script> -->
     <!-- <link rel="stylesheet" href="http://127.0.0.1:8080/facefont.css"> -->
-    <style>
-      @keyframes Ws6lWOlzL1N2S94UzmO5hg\=\={0%{transform:scaleY(1);transform-origin:0 0;opacity:1}to{transform:scaleY(.8);transform-origin:0 0;opacity:0}}
+    <style type="text/css">
+      /* @charset "UTF-8"; */
+      @keyframes Ws6lWOlzL1N2S94_Uz\+mO-5hg\=\=/*sdf*/ {0%{transform:scaleY(1);transform-origin:0 0;opacity:1}to{transform:scaleY(.8);transform-origin:0 0;opacity:0}}
+
+      .S94UzmO5hg\=\={
+        color:#fff;
+      }
     </style>
     <!-- <link rel="stylesheet" href="https://static.rokidcdn.com/test/ar-independent/0.0.2/static/css/2.846bef85.chunk.css"> -->
   </head>

diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md
@@ -23,6 +23,7 @@
   - 🐞 修复了`ant-design-vue`的弹窗类组件及其它特殊情况下，子应用元素逃逸到原生body上的问题。
   - 🐞 修复了在未设置`public_path`时，子应用的资源地址补全失败的问题。
   - 🐞 修复了子应用在调用fetch等API时，元素绑定没有解除的问题。
+  - 🐞 修复了在`@keyframes`名称带有特殊字符时样式隔离失败的问题。
 
 - **Update**
 

diff --git a/src/sandbox/scoped_css.ts b/src/sandbox/scoped_css.ts
@@ -89,7 +89,7 @@ class CSSParser {
   }
 
   private formatSelector (skip: boolean): false | string {
-    const m = this.commonMatch(/^([^{]+)/, skip)
+    const m = this.commonMatch(/^[^{]+/, skip)
     if (!m) return false
 
     return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
@@ -188,7 +188,7 @@ class CSSParser {
   private keyframesRule (): boolean | void {
     if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/)) return false
 
-    if (!this.commonMatch(/^([-\w]+)\s*/)) return parseError('@keyframes missing name', this.linkPath)
+    if (!this.commonMatch(/^[^{]+/)) return parseError('@keyframes missing name', this.linkPath)
 
     this.matchComments()