feat(css-prefix): border-radius support
MODIFY
internal/compiler/transforms/compile/css-handler/prefix/index.ts
internal/compiler/transforms/compile/css-handler/prefix/index.ts
-/* GENERATED:START(hash:1aabffb97172175117d41244d986f4c798f73010,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
+/* GENERATED:START(hash:0055f8aa01426397ad32d8f585d38234119cfc98,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
+import borderRadius from "./prefixes/border-radius";
import boxShadow from "./prefixes/box-shadow";
import boxSizing from "./prefixes/box-sizing";
import display from "./prefixes/display";
@@ -8,6 +9,7 @@ import transform from "./prefixes/transform";
import transition from "./prefixes/transition";
export default [
+ ...borderRadius,
...boxShadow,
...boxSizing,
...display,

ADD
internal/compiler/transforms/compile/css-handler/prefix/prefixes/border-radius.ts
+import {
+ createPrefixVisitor,
+ prefixCSSProperty,
+} from "@internal/compiler/transforms/compile/css-handler/prefix/utils";
+
+function borderRadiusRenamer(value: string) {
+ if (value.startsWith("-moz-")) {
+ if (value.includes("top-left-radius")) {
+ return value.replace("top-left-radius", "radius-topleft");
+ }
+ if (value.includes("top-right-radius")) {
+ return value.replace("top-right-radius", "radius-topright");
+ }
+ if (value.includes("bottom-right-radius")) {
+ return value.replace("bottom-right-radius", "radius-bottomright");
+ }
+ if (value.includes("bottom-left-radius")) {
+ return value.replace("bottom-left-radius", "radius-bottomleft");
+ }
+ }
+ return value;
+}
+
+// https://github.com/Fyrd/caniuse/blob/main/features-json/border-radius.json
+// https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js#L59-L70
+export default [
+ "border-radius",
+ "border-top-left-radius",
+ "border-top-right-radius",
+ "border-bottom-right-radius",
+ "border-bottom-left-radius",
+].map((propertyName) =>
+ createPrefixVisitor({
+ name: propertyName,
+ enter(path) {
+ return prefixCSSProperty({
+ path,
+ propertyName,
+ browserFeaturesKey: "border-radius",
+ rename: borderRadiusRenamer,
+ });
+ },
+ })
+);

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/border-radius/input.css
+.style {
+ text-align: center;
+ border-radius: 10px;
+}
+
+.style {
+ border-radius: 10px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.style {
+ text-align: center;
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+}

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/border-radius/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 > border-radius`
+
+### `Diagnostics`
+
+```
+
+```
+
+### `Input`
+
+```css
+.style {
+ text-align: center;
+ border-radius: 10px;
+}
+
+.style {
+ border-radius: 10px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.style {
+ text-align: center;
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+}
+
+```
+
+### `Output`
+
+```css
+.style {
+ text-align: center;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+}
+
+.style {
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ -moz-border-radius-topleft: 10px;
+ -webkit-border-top-left-radius: 10px;
+ border-top-left-radius: 10px;
+ -moz-border-radius-topright: 10px;
+ -webkit-border-top-right-radius: 10px;
+ border-top-right-radius: 10px;
+ -moz-border-radius-bottomright: 10px;
+ -webkit-border-bottom-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ -moz-border-radius-bottomleft: 10px;
+ -webkit-border-bottom-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.style {
+ text-align: center;
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+}
+
+```

ADD
website/src/docs/css-handler/prefix/border-radius.md
+---
+title: Prefix border-radius
+layout: layouts/prefix.liquid
+showHero: false
+description: MISSING DOCUMENTATION
+eleventyNavigation:
+ key: css-handler/prefix/border-radius
+ parent: css-handler
+ title: border-radius
+---
+
+# border-radius
+
+MISSING DOCUMENTATION
\ No newline at end of file

feat(css-prefix): border-radius support (#1432)