fix(compiler-sfc): scope Id should not be attached to @Keyframe breakpoint rules (#3308)

fix #3304

Author: HcySunYang

packages/compiler-sfc/__tests__/compileStyle.spec.ts

@@ -215,8 +215,10 @@ describe('SFC scoped CSS', () => {
     expect(style).toContain(
       `.anim-multiple-2[data-v-test] {\n  animation-name: color-test,opacity-test;`
     )
-    expect(style).toContain(`@keyframes opacity-test {`)
-    expect(style).toContain(`@-webkit-keyframes opacity-test {`)
+    expect(style).toContain(`@keyframes opacity-test {\nfrom { opacity: 0;`)
+    expect(style).toContain(
+      `@-webkit-keyframes opacity-test {\nfrom { opacity: 0;`
+    )
   })
 
   // vue-loader/#1370

packages/compiler-sfc/src/stylePluginScoped.ts

@@ -1,4 +1,4 @@
-import { PluginCreator, Rule } from 'postcss'
+import { PluginCreator, Rule, AtRule } from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { warn } from './warn'
 
@@ -62,7 +62,12 @@ const scopedPlugin: PluginCreator<string> = (id = '') => {
 const processedRules = new WeakSet<Rule>()
 
 function processRule(id: string, rule: Rule) {
-  if (processedRules.has(rule)) {
+  if (
+    processedRules.has(rule) ||
+    (rule.parent &&
+      rule.parent.type === 'atrule' &&
+      /-?keyframes$/.test((rule.parent as AtRule).name))
+  ) {
     return
   }
   processedRules.add(rule)