fix(processor): don't scope @Keyframes contents (#781)

tivac · Sep 2, 2020 · dd41bf1 · dd41bf1
1 parent a822b7a
commit dd41bf1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 43 deletions.
diff --git a/packages/processor/plugins/scoping.js b/packages/processor/plugins/scoping.js
@@ -95,10 +95,15 @@ module.exports = (css, { opts, messages }) => {
 
  // Walk all rules and save off rewritten selectors
  css.walkRules((rule) => {
+ // Don't process the children of @keyframes, they don't need scoping
+ if(rule.parent.type === "atrule" && rule.parent.name === "keyframes") {
+ return;
+ }
+
  // Save closure ref to this rule
  current = rule;
  lookup = classes;
- 
+
  rule.selector = parser.processSync(rule);
  });
 

diff --git a/packages/processor/test/__snapshots__/keyframes.test.js.snap b/packages/processor/test/__snapshots__/keyframes.test.js.snap
@@ -1,31 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`/processor.js scoping should leave unknown animation names alone 1`] = `
+exports[`/processor.js @keyframes scoping should leave unknown animation names alone 1`] = `
 "/* unknown-name.css */
 .a { animation: a; }
 .b { animation-name: b; }"
 `;
 
-exports[`/processor.js scoping should update multiple animations properly 1`] = `
+exports[`/processor.js @keyframes scoping should not scope rules within @keyframes 1`] = `
+"/* unknown-name.css */
+.a { animation: a; }
+
+@keyframes a {
+ from { color: white; }
+ 50.25% { color: red; }
+ to { color: black; }
+}"
+`;
+
+exports[`/processor.js @keyframes scoping should update multiple animations properly 1`] = `
 "/* multiple-animations.css */
 @keyframes a {}
 @keyframes b {}
 .c { animation: a 10s linear, b 0.2s infinite; }"
 `;
 
-exports[`/processor.js scoping should update scoped animations from the scoping plugin's message 1`] = `
+exports[`/processor.js @keyframes scoping should update scoped animations from the scoping plugin's message 1`] = `
 "/* animation.css */
 @keyframes a {}
 .b { animation: a; }"
 `;
 
-exports[`/processor.js scoping should update scoped prefixed animations from the scoping plugin's message 1`] = `
+exports[`/processor.js @keyframes scoping should update scoped prefixed animations from the scoping plugin's message 1`] = `
 "/* prefixed-animations.css */
 @-webkit-keyframes a {}
 .b { animation: a; }"
 `;
 
-exports[`/processor.js scoping should update the animation-name property 1`] = `
+exports[`/processor.js @keyframes scoping should update the animation-name property 1`] = `
 "/* animation-name.css */
 @keyframes a {}
 .b { animation-name: a; }"

diff --git a/packages/processor/test/keyframes.test.js b/packages/processor/test/keyframes.test.js
@@ -5,7 +5,7 @@ const namer = require("@modular-css/test-utils/namer.js");
 const Processor = require("../processor.js");
 
 describe("/processor.js", () => {
- describe("scoping", () => {
+ describe("@keyframes scoping", () => {
  let processor;
 
  beforeEach(() => {
@@ -15,41 +15,48 @@ describe("/processor.js", () => {
  });
 
  it("should leave unknown animation names alone", async () => {
- await processor.string(
- "./unknown-name.css",
- dedent(`
- .a { animation: a; }
- .b { animation-name: b; }
- `)
- );
+ await processor.string("./unknown-name.css", dedent(`
+ .a { animation: a; }
+ .b { animation-name: b; }
+ `));
+
+ const { css } = await processor.output();
+
+ expect(css).toMatchSnapshot();
+ });
+
+ it("should not scope rules within @keyframes", async () => {
+ await processor.string("./unknown-name.css", dedent(`
+ .a { animation: a; }
+
+ @keyframes a {
+ from { color: white; }
+ 50.25% { color: red; }
+ to { color: black; }
+ }
+ `));
 
  const { css } = await processor.output();
 
  expect(css).toMatchSnapshot();
  });
 
  it("should update scoped animations from the scoping plugin's message", async () => {
- await processor.string(
- "./animation.css",
- dedent(`
- @keyframes a {}
- .b { animation: a; }
- `)
- );
+ await processor.string("./animation.css", dedent(`
+ @keyframes a {}
+ .b { animation: a; }
+ `));
 
  const { css } = await processor.output();
 
  expect(css).toMatchSnapshot();
  });
 
  it("should update the animation-name property", async () => {
- await processor.string(
- "./animation-name.css",
- dedent(`
- @keyframes a {}
- .b { animation-name: a; }
- `)
- );
+ await processor.string("./animation-name.css", dedent(`
+ @keyframes a {}
+ .b { animation-name: a; }
+ `));
 
  const { css } = await processor.output();
 
@@ -58,28 +65,22 @@ describe("/processor.js", () => {
 
  // Issue 208
  it("should update multiple animations properly", async () => {
- await processor.string(
- "./multiple-animations.css",
- dedent(`
- @keyframes a {}
- @keyframes b {}
- .c { animation: a 10s linear, b 0.2s infinite; }
- `)
- );
+ await processor.string("./multiple-animations.css", dedent(`
+ @keyframes a {}
+ @keyframes b {}
+ .c { animation: a 10s linear, b 0.2s infinite; }
+ `));
 
  const { css } = await processor.output();
 
  expect(css).toMatchSnapshot();
  });
 
  it("should update scoped prefixed animations from the scoping plugin's message", async () => {
- await processor.string(
- "./prefixed-animations.css",
- dedent(`
- @-webkit-keyframes a {}
- .b { animation: a; }
- `)
- );
+ await processor.string("./prefixed-animations.css", dedent(`
+ @-webkit-keyframes a {}
+ .b { animation: a; }
+ `));
 
  const { css } = await processor.output();