From c3099fb0cf03927f879f911ab5f51d9edc20d871 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Fri, 19 May 2023 03:12:35 +0300 Subject: [PATCH] fix: bugs in css modules --- package-lock.json | 14 +- package.json | 2 +- .../__snapshots__/modules-option.test.js.snap | 222 +++++++++++++++++- .../keyframes-and-animation/source.css | 33 +++ 4 files changed, 254 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90e00f40..2465e230 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "icss-utils": "^5.1.0", "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.1", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", @@ -12940,9 +12940,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz", + "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==", "dependencies": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^6.0.2", @@ -25213,9 +25213,9 @@ "requires": {} }, "postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz", + "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==", "requires": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^6.0.2", diff --git a/package.json b/package.json index 7f212fdd..c5bbedcf 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "icss-utils": "^5.1.0", "postcss": "^8.4.21", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-local-by-default": "^4.0.1", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index bb74161c..9714fe5e 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -9873,7 +9873,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n.container {\\\\n -webkit-animation: \\\\\\\\@bounce 1s infinite;\\\\n animation: \\\\\\\\@bounce 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -9931,6 +9931,39 @@ Array [ .b { color: green; } + +@-webkit-keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.container { + -webkit-animation: \\\\@bounce 1s infinite; + animation: \\\\@bounce 1s infinite; +} ", "", ], @@ -9947,7 +9980,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n.container {\\\\n -webkit-animation: \\\\\\\\@bounce 1s infinite;\\\\n animation: \\\\\\\\@bounce 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports ___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; @@ -10006,6 +10039,39 @@ Array [ .b { color: green; } + +@-webkit-keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.container { + -webkit-animation: \\\\@bounce 1s infinite; + animation: \\\\@bounce 1s infinite; +} ", "", ], @@ -10022,7 +10088,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\".vbnAfVvDroZNdlAZSoos {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes laDyXrGTqpWgSjWpVfsq {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\tanimation-name: UoOoKaAgXjyeGpq6UeAE;\\\\n\\\\tanimation: laDyXrGTqpWgSjWpVfsq 1s ease;\\\\n}\\\\n\\\\n.laDyXrGTqpWgSjWpVfsq {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease;\\\\n\\\\tanimation-name: laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.TKT0JgE4RNGqNpibZQwi {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq\\\\n}\\\\n\\\\n.D79vyB123bYrLinvj46J {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.d9QlkrhUnCgqBozPqqcq {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\".vbnAfVvDroZNdlAZSoos {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes laDyXrGTqpWgSjWpVfsq {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\tanimation-name: UoOoKaAgXjyeGpq6UeAE;\\\\n\\\\tanimation: laDyXrGTqpWgSjWpVfsq 1s ease;\\\\n}\\\\n\\\\n.laDyXrGTqpWgSjWpVfsq {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease;\\\\n\\\\tanimation-name: laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.TKT0JgE4RNGqNpibZQwi {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq\\\\n}\\\\n\\\\n.D79vyB123bYrLinvj46J {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.d9QlkrhUnCgqBozPqqcq {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes y8xpMb2xhav4TZYNTfHq {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes y8xpMb2xhav4TZYNTfHq {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n.FEOgTA_LLfagujCY2tZA {\\\\n -webkit-animation: y8xpMb2xhav4TZYNTfHq 1s infinite;\\\\n animation: y8xpMb2xhav4TZYNTfHq 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports ___CSS_LOADER_EXPORT___.locals = { \\"a\\": \\"vbnAfVvDroZNdlAZSoos\\", @@ -10030,7 +10096,9 @@ ___CSS_LOADER_EXPORT___.locals = { \\"bounce2\\": \\"laDyXrGTqpWgSjWpVfsq\\", \\"bounce3\\": \\"TKT0JgE4RNGqNpibZQwi\\", \\"bounce4\\": \\"D79vyB123bYrLinvj46J\\", - \\"b\\": \\"d9QlkrhUnCgqBozPqqcq\\" + \\"b\\": \\"d9QlkrhUnCgqBozPqqcq\\", + \\"container\\": \\"FEOgTA_LLfagujCY2tZA\\", + \\"@bounce\\": \\"y8xpMb2xhav4TZYNTfHq\\" }; export default ___CSS_LOADER_EXPORT___; " @@ -10088,6 +10156,39 @@ Array [ .d9QlkrhUnCgqBozPqqcq { color: green; } + +@-webkit-keyframes y8xpMb2xhav4TZYNTfHq { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes y8xpMb2xhav4TZYNTfHq { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.FEOgTA_LLfagujCY2tZA { + -webkit-animation: y8xpMb2xhav4TZYNTfHq 1s infinite; + animation: y8xpMb2xhav4TZYNTfHq 1s infinite; +} ", "", ], @@ -10104,7 +10205,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes \\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n.container {\\\\n -webkit-animation: \\\\\\\\@bounce 1s infinite;\\\\n animation: \\\\\\\\@bounce 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports ___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; @@ -10163,6 +10264,39 @@ Array [ .b { color: green; } + +@-webkit-keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes \\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.container { + -webkit-animation: \\\\@bounce 1s infinite; + animation: \\\\@bounce 1s infinite; +} ", "", ], @@ -10179,7 +10313,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"._a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes _bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes _bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n._bounce {\\\\n\\\\tanimation-name: _bounce;\\\\n\\\\tanimation: _bounce2 1s ease;\\\\n}\\\\n\\\\n._bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: _bounce 1s ease;\\\\n\\\\tanimation-name: _bounce2;\\\\n}\\\\n\\\\n._bounce3 {\\\\n\\\\tanimation: _bounce 1s ease, _bounce2\\\\n}\\\\n\\\\n._bounce4 {\\\\n\\\\tanimation: _bounce 1s ease, _bounce2;\\\\n}\\\\n\\\\n._b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"._a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes _bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes _bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n._bounce {\\\\n\\\\tanimation-name: _bounce;\\\\n\\\\tanimation: _bounce2 1s ease;\\\\n}\\\\n\\\\n._bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: _bounce 1s ease;\\\\n\\\\tanimation-name: _bounce2;\\\\n}\\\\n\\\\n._bounce3 {\\\\n\\\\tanimation: _bounce 1s ease, _bounce2\\\\n}\\\\n\\\\n._bounce4 {\\\\n\\\\tanimation: _bounce 1s ease, _bounce2;\\\\n}\\\\n\\\\n._b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes _\\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes _\\\\\\\\@bounce {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n._container {\\\\n -webkit-animation: _\\\\\\\\@bounce 1s infinite;\\\\n animation: _\\\\\\\\@bounce 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports ___CSS_LOADER_EXPORT___.locals = { \\"a\\": \\"_a\\", @@ -10187,7 +10321,9 @@ ___CSS_LOADER_EXPORT___.locals = { \\"bounce2\\": \\"_bounce2\\", \\"bounce3\\": \\"_bounce3\\", \\"bounce4\\": \\"_bounce4\\", - \\"b\\": \\"_b\\" + \\"b\\": \\"_b\\", + \\"container\\": \\"_container\\", + \\"@bounce\\": \\"_@bounce\\" }; export default ___CSS_LOADER_EXPORT___; " @@ -10245,6 +10381,39 @@ Array [ ._b { color: green; } + +@-webkit-keyframes _\\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes _\\\\@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +._container { + -webkit-animation: _\\\\@bounce 1s infinite; + animation: _\\\\@bounce 1s infinite; +} ", "", ], @@ -10261,7 +10430,7 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../../src/runti import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\".vbnAfVvDroZNdlAZSoos {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes laDyXrGTqpWgSjWpVfsq {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\tanimation-name: UoOoKaAgXjyeGpq6UeAE;\\\\n\\\\tanimation: laDyXrGTqpWgSjWpVfsq 1s ease;\\\\n}\\\\n\\\\n.laDyXrGTqpWgSjWpVfsq {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease;\\\\n\\\\tanimation-name: laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.TKT0JgE4RNGqNpibZQwi {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq\\\\n}\\\\n\\\\n.D79vyB123bYrLinvj46J {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.d9QlkrhUnCgqBozPqqcq {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\".vbnAfVvDroZNdlAZSoos {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes laDyXrGTqpWgSjWpVfsq {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.UoOoKaAgXjyeGpq6UeAE {\\\\n\\\\tanimation-name: UoOoKaAgXjyeGpq6UeAE;\\\\n\\\\tanimation: laDyXrGTqpWgSjWpVfsq 1s ease;\\\\n}\\\\n\\\\n.laDyXrGTqpWgSjWpVfsq {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease;\\\\n\\\\tanimation-name: laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.TKT0JgE4RNGqNpibZQwi {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq\\\\n}\\\\n\\\\n.D79vyB123bYrLinvj46J {\\\\n\\\\tanimation: UoOoKaAgXjyeGpq6UeAE 1s ease, laDyXrGTqpWgSjWpVfsq;\\\\n}\\\\n\\\\n.d9QlkrhUnCgqBozPqqcq {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@-webkit-keyframes y8xpMb2xhav4TZYNTfHq {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n@keyframes y8xpMb2xhav4TZYNTfHq {\\\\n 0%, 100% {\\\\n transform: translateY(-25%);\\\\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n animation-timing-function: cubic-bezier(0.8,0,1,1);\\\\n }\\\\n\\\\n 50% {\\\\n transform: none;\\\\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n animation-timing-function: cubic-bezier(0,0,0.2,1);\\\\n }\\\\n}\\\\n\\\\n.FEOgTA_LLfagujCY2tZA {\\\\n -webkit-animation: y8xpMb2xhav4TZYNTfHq 1s infinite;\\\\n animation: y8xpMb2xhav4TZYNTfHq 1s infinite;\\\\n}\\\\n\\", \\"\\"]); // Exports ___CSS_LOADER_EXPORT___.locals = { \\"a\\": \\"vbnAfVvDroZNdlAZSoos\\", @@ -10269,7 +10438,9 @@ ___CSS_LOADER_EXPORT___.locals = { \\"bounce2\\": \\"laDyXrGTqpWgSjWpVfsq\\", \\"bounce3\\": \\"TKT0JgE4RNGqNpibZQwi\\", \\"bounce4\\": \\"D79vyB123bYrLinvj46J\\", - \\"b\\": \\"d9QlkrhUnCgqBozPqqcq\\" + \\"b\\": \\"d9QlkrhUnCgqBozPqqcq\\", + \\"container\\": \\"FEOgTA_LLfagujCY2tZA\\", + \\"@bounce\\": \\"y8xpMb2xhav4TZYNTfHq\\" }; export default ___CSS_LOADER_EXPORT___; " @@ -10327,6 +10498,39 @@ Array [ .d9QlkrhUnCgqBozPqqcq { color: green; } + +@-webkit-keyframes y8xpMb2xhav4TZYNTfHq { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes y8xpMb2xhav4TZYNTfHq { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.FEOgTA_LLfagujCY2tZA { + -webkit-animation: y8xpMb2xhav4TZYNTfHq 1s infinite; + animation: y8xpMb2xhav4TZYNTfHq 1s infinite; +} ", "", ], diff --git a/test/fixtures/modules/tests-cases/keyframes-and-animation/source.css b/test/fixtures/modules/tests-cases/keyframes-and-animation/source.css index 5aa7d337..fcb46004 100644 --- a/test/fixtures/modules/tests-cases/keyframes-and-animation/source.css +++ b/test/fixtures/modules/tests-cases/keyframes-and-animation/source.css @@ -46,3 +46,36 @@ .b { color: green; } + +@-webkit-keyframes \@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +@keyframes \@bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + +.container { + -webkit-animation: \@bounce 1s infinite; + animation: \@bounce 1s infinite; +}