feat(css-prefix): block support
MODIFY
internal/compiler/transforms/compile/css-handler/prefix/index.ts
internal/compiler/transforms/compile/css-handler/prefix/index.ts
-/* GENERATED:START(hash:a7ee50ac5e776a428e44569bc07d6fd0a0da973d,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
+/* GENERATED:START(hash:adfcbef3a29c1a9cc350885630054a0316509fe7,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";
+import block from "./prefixes/block";
import borderRadius from "./prefixes/border-radius";
import boxDecorationBreak from "./prefixes/box-decoration-break";
import boxShadow from "./prefixes/box-shadow";
@@ -28,6 +29,7 @@ export default [
...animation,
...appearance,
...backdropFilter,
+ ...block,
...borderRadius,
...boxDecorationBreak,
...boxShadow,

ADD
internal/compiler/transforms/compile/css-handler/prefix/prefixes/block.ts
+import {
+ createPrefixVisitor,
+ prefixCSSProperty,
+} from "@internal/compiler/transforms/compile/css-handler/prefix/utils";
+
+// https://github.com/Fyrd/caniuse/blob/main/features-json/css-logical-props.json
+export default [
+ "border-block-start",
+ "border-block-end",
+ "margin-block-start",
+ "margin-block-end",
+ "padding-block-start",
+ "padding-block-end",
+].map((propertyName) =>
+ createPrefixVisitor({
+ name: "block",
+ enter(path) {
+ return prefixCSSProperty({
+ path,
+ propertyName,
+ browserFeaturesKey: "css-logical-props",
+ });
+ },
+ })
+);

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/block/input.css
+.style {
+ block: none;
+}
+
+.style {
+ border-block-start: 1px;
+}
+
+.style {
+ border-block-start: 2px dotted;
+}
+
+.style {
+ border-block-start: medium dashed blue;
+}
+
+.style {
+ border-block-end: 1px;
+}
+
+.style {
+ border-block-end: 2px dotted;
+}
+
+.style {
+ border-block-end: medium dashed blue;
+}
+
+.style {
+ margin-block-start: 10px;
+}
+
+.style {
+ margin-block-start: 1em;
+}
+
+.style {
+ margin-block-start: 5%;
+}
+
+.style {
+ margin-block-start: auto;
+}
+
+.style {
+ margin-block-start: inherit;
+}
+
+.style {
+ margin-block-start: initial;
+}
+
+.style {
+ margin-block-start: unset;
+}
+
+.style {
+ margin-block-end: 10px;
+}
+
+.style {
+ margin-block-end: 1em;
+}
+
+.style {
+ margin-block-end: 5%;
+}
+
+.style {
+ margin-block-end: auto;
+}
+
+.style {
+ margin-block-end: inherit;
+}
+
+.style {
+ margin-block-end: initial;
+}
+
+.style {
+ margin-block-end: unset;
+}
+
+.style {
+ padding-block-start: 10px;
+}
+
+.style {
+ padding-block-start: 1em;
+}
+
+.style {
+ padding-block-start: 5%;
+}
+
+.style {
+ padding-block-start: inherit;
+}
+
+.style {
+ padding-block-start: initial;
+}
+
+.style {
+ padding-block-start: unset;
+}
+
+.style {
+ padding-block-end: 10px;
+}
+
+.style {
+ padding-block-end: 1em;
+}
+
+.style {
+ padding-block-end: 5%;
+}
+
+.style {
+ padding-block-end: inherit;
+}
+
+.style {
+ padding-block-end: initial;
+}
+
+.style {
+ padding-block-end: unset;
+}

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/block/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 > block`
+
+### `Diagnostics`
+
+```
+
+```
+
+### `Input`
+
+```css
+.style {
+ block: none;
+}
+
+.style {
+ border-block-start: 1px;
+}
+
+.style {
+ border-block-start: 2px dotted;
+}
+
+.style {
+ border-block-start: medium dashed blue;
+}
+
+.style {
+ border-block-end: 1px;
+}
+
+.style {
+ border-block-end: 2px dotted;
+}
+
+.style {
+ border-block-end: medium dashed blue;
+}
+
+.style {
+ margin-block-start: 10px;
+}
+
+.style {
+ margin-block-start: 1em;
+}
+
+.style {
+ margin-block-start: 5%;
+}
+
+.style {
+ margin-block-start: auto;
+}
+
+.style {
+ margin-block-start: inherit;
+}
+
+.style {
+ margin-block-start: initial;
+}
+
+.style {
+ margin-block-start: unset;
+}
+
+.style {
+ margin-block-end: 10px;
+}
+
+.style {
+ margin-block-end: 1em;
+}
+
+.style {
+ margin-block-end: 5%;
+}
+
+.style {
+ margin-block-end: auto;
+}
+
+.style {
+ margin-block-end: inherit;
+}
+
+.style {
+ margin-block-end: initial;
+}
+
+.style {
+ margin-block-end: unset;
+}
+
+.style {
+ padding-block-start: 10px;
+}
+
+.style {
+ padding-block-start: 1em;
+}
+
+.style {
+ padding-block-start: 5%;
+}
+
+.style {
+ padding-block-start: inherit;
+}
+
+.style {
+ padding-block-start: initial;
+}
+
+.style {
+ padding-block-start: unset;
+}
+
+.style {
+ padding-block-end: 10px;
+}
+
+.style {
+ padding-block-end: 1em;
+}
+
+.style {
+ padding-block-end: 5%;
+}
+
+.style {
+ padding-block-end: inherit;
+}
+
+.style {
+ padding-block-end: initial;
+}
+
+.style {
+ padding-block-end: unset;
+}
+
+```
+
+### `Output`
+
+```css
+.style {
+ block: none;
+}
+
+.style {
+ -moz-border-block-start: 1px;
+ -webkit-border-block-start: 1px;
+ border-block-start: 1px;
+}
+
+.style {
+ -moz-border-block-start: 2px dotted;
+ -webkit-border-block-start: 2px dotted;
+ border-block-start: 2px dotted;
+}
+
+.style {
+ -moz-border-block-start: medium dashed blue;
+ -webkit-border-block-start: medium dashed blue;
+ border-block-start: medium dashed blue;
+}
+
+.style {
+ -moz-border-block-end: 1px;
+ -webkit-border-block-end: 1px;
+ border-block-end: 1px;
+}
+
+.style {
+ -moz-border-block-end: 2px dotted;
+ -webkit-border-block-end: 2px dotted;
+ border-block-end: 2px dotted;
+}
+
+.style {
+ -moz-border-block-end: medium dashed blue;
+ -webkit-border-block-end: medium dashed blue;
+ border-block-end: medium dashed blue;
+}
+
+.style {
+ -moz-margin-block-start: 10px;
+ -webkit-margin-block-start: 10px;
+ margin-block-start: 10px;
+}
+
+.style {
+ -moz-margin-block-start: 1em;
+ -webkit-margin-block-start: 1em;
+ margin-block-start: 1em;
+}
+
+.style {
+ -moz-margin-block-start: 5%;
+ -webkit-margin-block-start: 5%;
+ margin-block-start: 5%;
+}
+
+.style {
+ -moz-margin-block-start: auto;
+ -webkit-margin-block-start: auto;
+ margin-block-start: auto;
+}
+
+.style {
+ -moz-margin-block-start: inherit;
+ -webkit-margin-block-start: inherit;
+ margin-block-start: inherit;
+}
+
+.style {
+ -moz-margin-block-start: initial;
+ -webkit-margin-block-start: initial;
+ margin-block-start: initial;
+}
+
+.style {
+ -moz-margin-block-start: unset;
+ -webkit-margin-block-start: unset;
+ margin-block-start: unset;
+}
+
+.style {
+ -moz-margin-block-end: 10px;
+ -webkit-margin-block-end: 10px;
+ margin-block-end: 10px;
+}
+
+.style {
+ -moz-margin-block-end: 1em;
+ -webkit-margin-block-end: 1em;
+ margin-block-end: 1em;
+}
+
+.style {
+ -moz-margin-block-end: 5%;
+ -webkit-margin-block-end: 5%;
+ margin-block-end: 5%;
+}
+
+.style {
+ -moz-margin-block-end: auto;
+ -webkit-margin-block-end: auto;
+ margin-block-end: auto;
+}
+
+.style {
+ -moz-margin-block-end: inherit;
+ -webkit-margin-block-end: inherit;
+ margin-block-end: inherit;
+}
+
+.style {
+ -moz-margin-block-end: initial;
+ -webkit-margin-block-end: initial;
+ margin-block-end: initial;
+}
+
+.style {
+ -moz-margin-block-end: unset;
+ -webkit-margin-block-end: unset;
+ margin-block-end: unset;
+}
+
+.style {
+ -moz-padding-block-start: 10px;
+ -webkit-padding-block-start: 10px;
+ padding-block-start: 10px;
+}
+
+.style {
+ -moz-padding-block-start: 1em;
+ -webkit-padding-block-start: 1em;
+ padding-block-start: 1em;
+}
+
+.style {
+ -moz-padding-block-start: 5%;
+ -webkit-padding-block-start: 5%;
+ padding-block-start: 5%;
+}
+
+.style {
+ -moz-padding-block-start: inherit;
+ -webkit-padding-block-start: inherit;
+ padding-block-start: inherit;
+}
+
+.style {
+ -moz-padding-block-start: initial;
+ -webkit-padding-block-start: initial;
+ padding-block-start: initial;
+}
+
+.style {
+ -moz-padding-block-start: unset;
+ -webkit-padding-block-start: unset;
+ padding-block-start: unset;
+}
+
+.style {
+ -moz-padding-block-end: 10px;
+ -webkit-padding-block-end: 10px;
+ padding-block-end: 10px;
+}
+
+.style {
+ -moz-padding-block-end: 1em;
+ -webkit-padding-block-end: 1em;
+ padding-block-end: 1em;
+}
+
+.style {
+ -moz-padding-block-end: 5%;
+ -webkit-padding-block-end: 5%;
+ padding-block-end: 5%;
+}
+
+.style {
+ -moz-padding-block-end: inherit;
+ -webkit-padding-block-end: inherit;
+ padding-block-end: inherit;
+}
+
+.style {
+ -moz-padding-block-end: initial;
+ -webkit-padding-block-end: initial;
+ padding-block-end: initial;
+}
+
+.style {
+ -moz-padding-block-end: unset;
+ -webkit-padding-block-end: unset;
+ padding-block-end: unset;
+}
+
+```

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

feat(css-prefix): block support (#1499)