feat(css-prefix): image-rendering support (#1524)

internal/compiler/transforms/compile/css-handler/prefix/index.ts

@@ -1,4 +1,4 @@
-/* GENERATED:START(hash:1604f5526468be75cda1fa9d2610acc3f353bcf8,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
+/* GENERATED:START(hash:749967bea1e11ac9cccf738d5902a298663399eb,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
 import animation from "./prefixes/animation";
 import appearance from "./prefixes/appearance";
 import backdropFilter from "./prefixes/backdrop-filter";
@@ -12,6 +12,7 @@ import colorAdjust from "./prefixes/color-adjust";
 import cursor from "./prefixes/cursor";
 import display from "./prefixes/display";
 import hyphens from "./prefixes/hyphens";
+import imageRendering from "./prefixes/image-rendering";
 import imageSet from "./prefixes/image-set";
 import inline from "./prefixes/inline";
 import mask from "./prefixes/mask";
@@ -45,6 +46,7 @@ export default [
 	...cursor,
 	...display,
 	...hyphens,
+	...imageRendering,
 	...imageSet,
 	...inline,
 	...mask,

internal/compiler/transforms/compile/css-handler/prefix/prefixes/image-rendering.ts

@@ -0,0 +1,30 @@
+import {
+	createPrefixVisitor,
+	prefixCSSValue,
+} from "@internal/compiler/transforms/compile/css-handler/prefix/utils";
+
+function pixelatedRenamer(value: string) {
+	if (value.startsWith("-webkit-")) {
+		return value.replace("pixelated", "optimize-contrast");
+	}
+	if (value.startsWith("-moz-")) {
+		return value.replace("pixelated", "crisp-edges");
+	}
+	return value;
+}
+
+// https://github.com/Fyrd/caniuse/blob/main/features-json/css-crisp-edges.json
+export default [
+	createPrefixVisitor({
+		name: "image-rendering/pixelated",
+		enter(path) {
+			return prefixCSSValue({
+				path,
+				propertyName: "image-rendering",
+				value: "pixelated",
+				browserFeaturesKey: "css-crisp-edges",
+				rename: pixelatedRenamer,
+			});
+		},
+	}),
+];

internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css

@@ -0,0 +1,3 @@
+.style {
+	image-rendering: pixelated;
+}

internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.test.md

@@ -0,0 +1,32 @@
+# `index.test.ts`
+
+**DO NOT MODIFY**. This file has been autogenerated. Run `rome test internal/compiler/transforms/compile/index.test.ts --update-snapshots` to update.
+
+## `css-handler > prefix > image-rendering`
+
+### `Diagnostics`
+
+```
+
+```
+
+### `Input`
+
+```css
+.style {
+	image-rendering: pixelated;
+}
+
+```
+
+### `Output`
+
+```css
+.style {
+	image-rendering: -moz-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: -o-pixelated;
+	image-rendering: pixelated;
+}
+
+```

website/src/docs/css-handler/prefix/image-rendering.md

@@ -0,0 +1,14 @@
+---
+title: Prefix image-rendering
+layout: layouts/prefix.liquid
+showHero: false
+description: MISSING DOCUMENTATION
+eleventyNavigation:
+	key: css-handler/prefix/image-rendering
+	parent: css-handler
+	title: image-rendering
+---
+
+# image-rendering
+
+MISSING DOCUMENTATION