From f3081ed6b05090f661c5470f0a75b8dafa1f9148 Mon Sep 17 00:00:00 2001 From: HcySunYang Date: Thu, 25 Feb 2021 20:12:09 +0800 Subject: [PATCH] fix(compiler-sfc): scope Id should not be attached to the Rules in the keyframes --- packages/compiler-sfc/__tests__/compileStyle.spec.ts | 6 ++++-- packages/compiler-sfc/src/stylePluginScoped.ts | 9 +++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 8e5db0704cf..a343fe6b6fa 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/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 diff --git a/packages/compiler-sfc/src/stylePluginScoped.ts b/packages/compiler-sfc/src/stylePluginScoped.ts index 87c8795cd79..c4576009495 100644 --- a/packages/compiler-sfc/src/stylePluginScoped.ts +++ b/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 = (id = '') => { const processedRules = new WeakSet() 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)