diff --git a/changelog_unreleased/css/10773.md b/changelog_unreleased/css/10773.md new file mode 100644 index 000000000..f08ed1ed7 --- /dev/null +++ b/changelog_unreleased/css/10773.md @@ -0,0 +1,34 @@ +#### Exclude `@keyframes` params from being parsed as a Less variable (#10773 by @tmazeika) + + +```css +/* Input */ +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Prettier stable */ +@keyframes: global(spin){ + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +}; + +/* Prettier main */ +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` diff --git a/cspell.json b/cspell.json index 19e23479c..24f6c425a 100644 --- a/cspell.json +++ b/cspell.json @@ -198,6 +198,7 @@ "kddeisz", "kddnewton", "Kearney", + "keyframes", "keyof", "Khatri", "l’objectif", diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 5c7ea089e..79ce19830 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -477,7 +477,7 @@ function parseNestedCSS(node, options) { // `@color :blue;` if ( - !["page", "nest"].includes(node.name) && + !["page", "nest", "keyframes"].includes(node.name) && node.params && node.params[0] === ":" ) { diff --git a/tests/format/css/modules/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/modules/__snapshots__/jsfmt.spec.js.snap index a18f2d0b8..23e80f400 100644 --- a/tests/format/css/modules/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/modules/__snapshots__/jsfmt.spec.js.snap @@ -53,6 +53,15 @@ printWidth: 80 exportedKey: exportedValue; } +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + =====================================output===================================== @value colors: './colors.css'; @value first, second, third from colors; @@ -101,5 +110,14 @@ printWidth: 80 exportedKey: exportedValue; } +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + ================================================================================ `; diff --git a/tests/format/css/modules/modules.css b/tests/format/css/modules/modules.css index bd8574305..c721d6975 100644 --- a/tests/format/css/modules/modules.css +++ b/tests/format/css/modules/modules.css @@ -44,3 +44,12 @@ :export { exportedKey: exportedValue; } + +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +}