diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 8e5db070..a343fe6b 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 87c8795c..c4576009 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)