feat(css-prefix): intrinsic-width (except grid-*)
MODIFY
internal/compiler/transforms/compile/css-handler/prefix/index.ts
internal/compiler/transforms/compile/css-handler/prefix/index.ts
-/* GENERATED:START(hash:bdf330cfb34726189e3d4695393bb9a804ea1f48,id:main) Everything below is automatically generated. DO NOT MODIFY. Run `./rome run scripts/generated-files/css-prefix` to update. */
+/* GENERATED:START(hash:b8833fc6b3f947f4780cb2718ae3937211e5025d,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";
@@ -25,6 +25,7 @@ import textOverflow from "./prefixes/text-overflow";
import transform from "./prefixes/transform";
import transition from "./prefixes/transition";
import userSelect from "./prefixes/user-select";
+import width from "./prefixes/width";
import writingMode from "./prefixes/writing-mode";
export default [
@@ -54,6 +55,7 @@ export default [
...transform,
...transition,
...userSelect,
+ ...width,
...writingMode,
];
/* GENERATED:END(id:main) */

ADD
internal/compiler/transforms/compile/css-handler/prefix/prefixes/width.ts
+import {
+ createPrefixVisitor,
+ prefixCSSValue,
+} from "@internal/compiler/transforms/compile/css-handler/prefix/utils";
+
+// https://github.com/Fyrd/caniuse/blob/main/features-json/intrinsic-width.json
+// https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js#L535
+
+const properties = [
+ "width",
+ "min-width",
+ "max-width",
+ "height",
+ "min-height",
+ "max-height",
+ "inline-size",
+ "min-inline-size",
+ "max-inline-size",
+ "block-size",
+ "min-block-size",
+ "max-block-size",
+ // TODO: implement prefixes for grid related props too
+ //"grid",
+ //"grid-template",
+ //"grid-template-rows",
+ //"grid-template-columns",
+ //"grid-auto-columns",
+ //"grid-auto-rows",
+];
+
+const values = [
+ "min-content",
+ "max-content",
+ "fill",
+ //"fill-available",
+ //"stretch",
+ "fit-content",
+];
+
+function fillRenamer(value: string) {
+ switch (value) {
+ case "-moz-fill":
+ return "-moz-available";
+ case "-webkit-fill":
+ return "-webkit-fill-available";
+ }
+
+ return value;
+}
+
+export default properties.flatMap((propertyName) =>
+ values.map((value) =>
+ createPrefixVisitor({
+ name: `${propertyName}/${value}`,
+ enter(path) {
+ return prefixCSSValue({
+ path,
+ propertyName,
+ value,
+ browserFeaturesKey: "intrinsic-width",
+ rename: fillRenamer,
+ });
+ },
+ })
+ )
+);

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/width/input.css
+.style {
+ width: min-content;
+ width: max-content;
+ width: fill;
+ width: fill-available;
+ width: stretch;
+ width: fit-content;
+ min-width: min-content;
+ min-width: max-content;
+ min-width: fill;
+ min-width: fill-available;
+ min-width: stretch;
+ min-width: fit-content;
+ max-width: min-content;
+ max-width: max-content;
+ max-width: fill;
+ max-width: fill-available;
+ max-width: stretch;
+ max-width: fit-content;
+ height: min-content;
+ height: max-content;
+ height: fill;
+ height: fill-available;
+ height: stretch;
+ height: fit-content;
+ min-height: min-content;
+ min-height: max-content;
+ min-height: fill;
+ min-height: fill-available;
+ min-height: stretch;
+ min-height: fit-content;
+ max-height: min-content;
+ max-height: max-content;
+ max-height: fill;
+ max-height: fill-available;
+ max-height: stretch;
+ max-height: fit-content;
+ inline-size: min-content;
+ inline-size: max-content;
+ inline-size: fill;
+ inline-size: fill-available;
+ inline-size: stretch;
+ inline-size: fit-content;
+ min-inline-size: min-content;
+ min-inline-size: max-content;
+ min-inline-size: fill;
+ min-inline-size: fill-available;
+ min-inline-size: stretch;
+ min-inline-size: fit-content;
+ max-inline-size: min-content;
+ max-inline-size: max-content;
+ max-inline-size: fill;
+ max-inline-size: fill-available;
+ max-inline-size: stretch;
+ max-inline-size: fit-content;
+ block-size: min-content;
+ block-size: max-content;
+ block-size: fill;
+ block-size: fill-available;
+ block-size: stretch;
+ block-size: fit-content;
+ min-block-size: min-content;
+ min-block-size: max-content;
+ min-block-size: fill;
+ min-block-size: fill-available;
+ min-block-size: stretch;
+ min-block-size: fit-content;
+ max-block-size: min-content;
+ max-block-size: max-content;
+ max-block-size: fill;
+ max-block-size: fill-available;
+ max-block-size: stretch;
+ max-block-size: fit-content;
+}

ADD
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/width/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 > width`
+
+### `Diagnostics`
+
+```
+
+```
+
+### `Input`
+
+```css
+.style {
+ width: min-content;
+ width: max-content;
+ width: fill;
+ width: fill-available;
+ width: stretch;
+ width: fit-content;
+ min-width: min-content;
+ min-width: max-content;
+ min-width: fill;
+ min-width: fill-available;
+ min-width: stretch;
+ min-width: fit-content;
+ max-width: min-content;
+ max-width: max-content;
+ max-width: fill;
+ max-width: fill-available;
+ max-width: stretch;
+ max-width: fit-content;
+ height: min-content;
+ height: max-content;
+ height: fill;
+ height: fill-available;
+ height: stretch;
+ height: fit-content;
+ min-height: min-content;
+ min-height: max-content;
+ min-height: fill;
+ min-height: fill-available;
+ min-height: stretch;
+ min-height: fit-content;
+ max-height: min-content;
+ max-height: max-content;
+ max-height: fill;
+ max-height: fill-available;
+ max-height: stretch;
+ max-height: fit-content;
+ inline-size: min-content;
+ inline-size: max-content;
+ inline-size: fill;
+ inline-size: fill-available;
+ inline-size: stretch;
+ inline-size: fit-content;
+ min-inline-size: min-content;
+ min-inline-size: max-content;
+ min-inline-size: fill;
+ min-inline-size: fill-available;
+ min-inline-size: stretch;
+ min-inline-size: fit-content;
+ max-inline-size: min-content;
+ max-inline-size: max-content;
+ max-inline-size: fill;
+ max-inline-size: fill-available;
+ max-inline-size: stretch;
+ max-inline-size: fit-content;
+ block-size: min-content;
+ block-size: max-content;
+ block-size: fill;
+ block-size: fill-available;
+ block-size: stretch;
+ block-size: fit-content;
+ min-block-size: min-content;
+ min-block-size: max-content;
+ min-block-size: fill;
+ min-block-size: fill-available;
+ min-block-size: stretch;
+ min-block-size: fit-content;
+ max-block-size: min-content;
+ max-block-size: max-content;
+ max-block-size: fill;
+ max-block-size: fill-available;
+ max-block-size: stretch;
+ max-block-size: fit-content;
+}
+
+```
+
+### `Output`
+
+```css
+.style {
+ width: -moz-min-content;
+ width: -webkit-min-content;
+ width: min-content;
+ width: -moz-max-content;
+ width: -webkit-max-content;
+ width: max-content;
+ width: -moz-available;
+ width: -webkit-fill-available;
+ width: fill;
+ width: fill-available;
+ width: stretch;
+ width: -moz-fit-content;
+ width: -webkit-fit-content;
+ width: fit-content;
+ min-width: -moz-min-content;
+ min-width: -webkit-min-content;
+ min-width: min-content;
+ min-width: -moz-max-content;
+ min-width: -webkit-max-content;
+ min-width: max-content;
+ min-width: -moz-available;
+ min-width: -webkit-fill-available;
+ min-width: fill;
+ min-width: fill-available;
+ min-width: stretch;
+ min-width: -moz-fit-content;
+ min-width: -webkit-fit-content;
+ min-width: fit-content;
+ max-width: -moz-min-content;
+ max-width: -webkit-min-content;
+ max-width: min-content;
+ max-width: -moz-max-content;
+ max-width: -webkit-max-content;
+ max-width: max-content;
+ max-width: -moz-available;
+ max-width: -webkit-fill-available;
+ max-width: fill;
+ max-width: fill-available;
+ max-width: stretch;
+ max-width: -moz-fit-content;
+ max-width: -webkit-fit-content;
+ max-width: fit-content;
+ height: -moz-min-content;
+ height: -webkit-min-content;
+ height: min-content;
+ height: -moz-max-content;
+ height: -webkit-max-content;
+ height: max-content;
+ height: -moz-available;
+ height: -webkit-fill-available;
+ height: fill;
+ height: fill-available;
+ height: stretch;
+ height: -moz-fit-content;
+ height: -webkit-fit-content;
+ height: fit-content;
+ min-height: -moz-min-content;
+ min-height: -webkit-min-content;
+ min-height: min-content;
+ min-height: -moz-max-content;
+ min-height: -webkit-max-content;
+ min-height: max-content;
+ min-height: -moz-available;
+ min-height: -webkit-fill-available;
+ min-height: fill;
+ min-height: fill-available;
+ min-height: stretch;
+ min-height: -moz-fit-content;
+ min-height: -webkit-fit-content;
+ min-height: fit-content;
+ max-height: -moz-min-content;
+ max-height: -webkit-min-content;
+ max-height: min-content;
+ max-height: -moz-max-content;
+ max-height: -webkit-max-content;
+ max-height: max-content;
+ max-height: -moz-available;
+ max-height: -webkit-fill-available;
+ max-height: fill;
+ max-height: fill-available;
+ max-height: stretch;
+ max-height: -moz-fit-content;
+ max-height: -webkit-fit-content;
+ max-height: fit-content;
+ inline-size: -moz-min-content;
+ inline-size: -webkit-min-content;
+ inline-size: min-content;
+ inline-size: -moz-max-content;
+ inline-size: -webkit-max-content;
+ inline-size: max-content;
+ inline-size: -moz-available;
+ inline-size: -webkit-fill-available;
+ inline-size: fill;
+ inline-size: fill-available;
+ inline-size: stretch;
+ inline-size: -moz-fit-content;
+ inline-size: -webkit-fit-content;
+ inline-size: fit-content;
+ min-inline-size: -moz-min-content;
+ min-inline-size: -webkit-min-content;
+ min-inline-size: min-content;
+ min-inline-size: -moz-max-content;
+ min-inline-size: -webkit-max-content;
+ min-inline-size: max-content;
+ min-inline-size: -moz-available;
+ min-inline-size: -webkit-fill-available;
+ min-inline-size: fill;
+ min-inline-size: fill-available;
+ min-inline-size: stretch;
+ min-inline-size: -moz-fit-content;
+ min-inline-size: -webkit-fit-content;
+ min-inline-size: fit-content;
+ max-inline-size: -moz-min-content;
+ max-inline-size: -webkit-min-content;
+ max-inline-size: min-content;
+ max-inline-size: -moz-max-content;
+ max-inline-size: -webkit-max-content;
+ max-inline-size: max-content;
+ max-inline-size: -moz-available;
+ max-inline-size: -webkit-fill-available;
+ max-inline-size: fill;
+ max-inline-size: fill-available;
+ max-inline-size: stretch;
+ max-inline-size: -moz-fit-content;
+ max-inline-size: -webkit-fit-content;
+ max-inline-size: fit-content;
+ block-size: -moz-min-content;
+ block-size: -webkit-min-content;
+ block-size: min-content;
+ block-size: -moz-max-content;
+ block-size: -webkit-max-content;
+ block-size: max-content;
+ block-size: -moz-available;
+ block-size: -webkit-fill-available;
+ block-size: fill;
+ block-size: fill-available;
+ block-size: stretch;
+ block-size: -moz-fit-content;
+ block-size: -webkit-fit-content;
+ block-size: fit-content;
+ min-block-size: -moz-min-content;
+ min-block-size: -webkit-min-content;
+ min-block-size: min-content;
+ min-block-size: -moz-max-content;
+ min-block-size: -webkit-max-content;
+ min-block-size: max-content;
+ min-block-size: -moz-available;
+ min-block-size: -webkit-fill-available;
+ min-block-size: fill;
+ min-block-size: fill-available;
+ min-block-size: stretch;
+ min-block-size: -moz-fit-content;
+ min-block-size: -webkit-fit-content;
+ min-block-size: fit-content;
+ max-block-size: -moz-min-content;
+ max-block-size: -webkit-min-content;
+ max-block-size: min-content;
+ max-block-size: -moz-max-content;
+ max-block-size: -webkit-max-content;
+ max-block-size: max-content;
+ max-block-size: -moz-available;
+ max-block-size: -webkit-fill-available;
+ max-block-size: fill;
+ max-block-size: fill-available;
+ max-block-size: stretch;
+ max-block-size: -moz-fit-content;
+ max-block-size: -webkit-fit-content;
+ max-block-size: fit-content;
+}
+
+```

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

feat(css-prefix): intrinsic-width (except grid-*) (#1497)