feat(css-prefix): image-rendering support
MODIFY
internal/compiler/transforms/compile/css-handler/prefix/index.ts
internal/compiler/transforms/compile/css-handler/prefix/index.ts
-/* 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,

ADD
internal/compiler/transforms/compile/css-handler/prefix/prefixes/image-rendering.ts
+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,
+ });
+ },
+ }),
+];

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.css
+.style {
+ image-rendering: pixelated;
+}

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/image-rendering/input.test.md
+# `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;
+}
+
+```

ADD
website/src/docs/css-handler/prefix/image-rendering.md
+---
+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

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