From a73776564e557b1a631a99a5fb9e75c92dade7e7 Mon Sep 17 00:00:00 2001
From: Lucas Weng <30640930+lucasweng@users.noreply.github.com>
Date: Thu, 10 Jun 2021 00:37:47 +0800
Subject: [PATCH] feat(css-prefix): image-rendering support (#1524)

---
 .../compile/css-handler/prefix/index.ts       |  4 ++-
 .../prefix/prefixes/image-rendering.ts        | 30 +++++++++++++++++
 .../prefix/image-rendering/input.css          |  3 ++
 .../prefix/image-rendering/input.test.md      | 32 +++++++++++++++++++
 .../css-handler/prefix/image-rendering.md     | 14 ++++++++
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 internal/compiler/transforms/compile/css-handler/prefix/prefixes/image-rendering.ts
 create mode 100644 internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css
 create mode 100644 internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.test.md
 create mode 100644 website/src/docs/css-handler/prefix/image-rendering.md

diff --git a/internal/compiler/transforms/compile/css-handler/prefix/index.ts b/internal/compiler/transforms/compile/css-handler/prefix/index.ts
index 493c2b92d11..708ab00b56c 100644
--- a/internal/compiler/transforms/compile/css-handler/prefix/index.ts
+++ b/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,
diff --git a/internal/compiler/transforms/compile/css-handler/prefix/prefixes/image-rendering.ts b/internal/compiler/transforms/compile/css-handler/prefix/prefixes/image-rendering.ts
new file mode 100644
index 00000000000..b8f5259649f
--- /dev/null
+++ b/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,
+			});
+		},
+	}),
+];
diff --git a/internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css b/internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css
new file mode 100644
index 00000000000..8c74321dfd1
--- /dev/null
+++ b/internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css
@@ -0,0 +1,3 @@
+.style {
+	image-rendering: pixelated;
+}
diff --git a/internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.test.md b/internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.test.md
new file mode 100644
index 00000000000..cbe900995cb
--- /dev/null
+++ b/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;
+}
+
+```
diff --git a/website/src/docs/css-handler/prefix/image-rendering.md b/website/src/docs/css-handler/prefix/image-rendering.md
new file mode 100644
index 00000000000..12323e6eb94
--- /dev/null
+++ b/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
\ No newline at end of file