Lint: spaces around CSS comments, from/to keyframe selectors (#40608)

Josh-Cena · web-flow · commit 3d06d82cbddf · 2025-08-05T09:36:14.000-04:00
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
@@ -465,7 +465,7 @@ body {
     line-height: 1.31579;
   }
 }
-/*END RESETS*/
+/* END RESETS */
 
 /* GLOBAL STYLES */
 .form-group > input[type="text"] {
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
@@ -61,7 +61,7 @@ While this tutorial will not be using such tools, it's good to know that when in
 Add the following contents to the `reset.css` file:
 
 ```css
-/*reset.css*/
+/* reset.css */
 /* RESETS */
 *,
 *::before,
@@ -137,7 +137,7 @@ body {
     line-height: 1.31579;
   }
 }
-/*END RESETS*/
+/* END RESETS */
 ```
 
 Next, in your `src/main.js` file, import the `reset.css` file like so:
diff --git a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md
@@ -563,9 +563,9 @@ div p + p {
 "Commenting out" code is also useful for temporarily disabling sections of code for testing. In the example below, the rules for `.special` are disabled by "commenting out" the code.
 
 ```css
-/*.special {
+/* .special {
   color: red;
-}*/
+} */
 
 p {
   color: blue;
diff --git a/files/en-us/web/accessibility/guides/colors_and_luminance/index.md b/files/en-us/web/accessibility/guides/colors_and_luminance/index.md
@@ -82,7 +82,7 @@ color: hsl(300deg 100% 50% / 100%);
 color: hwb(300deg 0% 0%);
 color: hwb(300 0% 0% / 1);
 
-/* by LAB representation of the sRGB value*/
+/* by LAB representation of the sRGB value */
 color: lab(60 93.56 -60.5);
 color: lab(60 93.56 -60.5 / 1);
 
diff --git a/files/en-us/web/css/@keyframes/index.md b/files/en-us/web/css/@keyframes/index.md
@@ -113,13 +113,13 @@ Declarations in a keyframe qualified with `!important` are ignored.
 
 ```css
 @keyframes important1 {
-  from {
+  0% {
     margin-top: 50px;
   }
   50% {
     margin-top: 150px !important; /* ignored */
   }
-  to {
+  100% {
     margin-top: 100px;
   }
 }
diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md
@@ -11,7 +11,7 @@ The **`all`** [shorthand](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)
 {{InteractiveExample("CSS Demo: all")}}
 
 ```css interactive-example-choice
-/*no all property*/
+/* no all property */
 ```
 
 ```css interactive-example-choice
diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md
@@ -150,7 +150,7 @@ svg {
   height: 100%;
 }
 
-/* This path is displayed on hover*/
+/* This path is displayed on hover */
 #svg_css_ex1:hover path {
   d: path("M20,80 L50,20 L80,80");
 }
diff --git a/files/en-us/web/css/font-style/index.md b/files/en-us/web/css/font-style/index.md
@@ -110,7 +110,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
   font:
     2rem "AmstelvarAlpha",
     sans-serif;
-  /*font-variation-settings: "slnt" 12;*/
+  /* font-variation-settings: "slnt" 12; */
   font-style: oblique 23deg;
 }
 ```
diff --git a/files/en-us/web/css/transform-function/matrix3d/index.md b/files/en-us/web/css/transform-function/matrix3d/index.md
@@ -210,7 +210,7 @@ Another `transform3d()` example, which implements an animated combined translate
 
 #### CSS
 
-```css-nolint
+```css
 html {
   width: 100%;
 }
@@ -236,7 +236,7 @@ body {
 }
 
 @keyframes MotionScale {
-  from {
+  0% {
     /*
       Identity matrix is used as basis here.
       The matrix below describes the
@@ -246,6 +246,7 @@ body {
         Translates every Z point by 0
         Scales down by 10%
     */
+    /* prettier-ignore */
     transform: matrix3d(
       1, 0, 0, 0,
       0, 1, 0, 0,
@@ -254,15 +255,17 @@ body {
     );
   }
   50% {
+    /* prettier-ignore */
     transform: matrix3d(
       1, 0, 0, 0,
       0, 1, 0, 0,
       0, 0, 1, 0,
       0, 0, 0, 0.9
     );
   }
-  to {
-     transform: matrix3d(
+  100% {
+    /* prettier-ignore */
+    transform: matrix3d(
       1, 0, 0, 0,
       0, 1, 0, 0,
       0, 0, 1, 0,
diff --git a/files/en-us/web/html/reference/elements/input/index.md b/files/en-us/web/html/reference/elements/input/index.md
@@ -895,7 +895,7 @@ It is possible to target different types of form controls based on their [`type`
 input[type="password"] {
 }
 
-/* matches a form control whose valid values are limited to a range of values*/
+/* matches a form control whose valid values are limited to a range of values */
 input[min][max] {
 }
 
diff --git a/files/en-us/web/svg/reference/attribute/d/index.md b/files/en-us/web/svg/reference/attribute/d/index.md
@@ -78,7 +78,7 @@ svg {
   height: 100%;
 }
 
-/* This path is displayed on hover*/
+/* This path is displayed on hover */
 #svg_css_ex1:hover path {
   d: path(
     "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"

Original file line number	Diff line number	Diff line change
`@@ -465,7 +465,7 @@ body {`
`465`	`465`	`line-height: 1.31579;`
`466`	`466`	`}`
`467`	`467`	`}`
`468`		`-/END RESETS/`
	`468`	`+/* END RESETS */`
`469`	`469`
`470`	`470`	`/* GLOBAL STYLES */`
`471`	`471`	`.form-group > input[type="text"] {`
Original file line number	Diff line number	Diff line change
@@ -113,13 +113,13 @@ Declarations in a keyframe qualified with `!important` are ignored.
`113`	`113`
`114`	`114`	```css
`115`	`115`	`@keyframes important1 {`
`116`		`- from {`
	`116`	`+ 0% {`
`117`	`117`	`margin-top: 50px;`
`118`	`118`	`}`
`119`	`119`	`50% {`
`120`	`120`	`margin-top: 150px !important; /* ignored */`
`121`	`121`	`}`
`122`		`- to {`
	`122`	`+ 100% {`
`123`	`123`	`margin-top: 100px;`
`124`	`124`	`}`
`125`	`125`	`}`
Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,7 @@ svg {`
`150`	`150`	`height: 100%;`
`151`	`151`	`}`
`152`	`152`
`153`		`-/* This path is displayed on hover*/`
	`153`	`+/* This path is displayed on hover */`
`154`	`154`	`#svg_css_ex1:hover path {`
`155`	`155`	`d: path("M20,80 L50,20 L80,80");`
`156`	`156`	`}`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.`
`110`	`110`	`font:`
`111`	`111`	`2rem "AmstelvarAlpha",`
`112`	`112`	`sans-serif;`
`113`		`- /font-variation-settings: "slnt" 12;/`
	`113`	`+ /* font-variation-settings: "slnt" 12; */`
`114`	`114`	`font-style: oblique 23deg;`
`115`	`115`	`}`
`116`	`116`	```
Original file line number	Diff line number	Diff line change
@@ -895,7 +895,7 @@ It is possible to target different types of form controls based on their [`type`
`895`	`895`	`input[type="password"] {`
`896`	`896`	`}`
`897`	`897`
`898`		`-/* matches a form control whose valid values are limited to a range of values*/`
	`898`	`+/* matches a form control whose valid values are limited to a range of values */`
`899`	`899`	`input[min][max] {`
`900`	`900`	`}`
`901`	`901`