fix: Update allowed styles with Flow and ESLint

packages/eslint-plugin/__tests__/stylex-valid-styles-test.js

@@ -316,6 +316,53 @@ eslintTester.run('stylex-valid-styles', rule.default, {
          'width': '30vw',
        },
      })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'contain': '300px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicSize': '300px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicSize': 'auto 300px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicInlineSize': '300px',
+         'containIntrinsicBlockSize': '200px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicInlineSize': 'auto 300px',
+         'containIntrinsicBlockSize': 'auto 200px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicWidth': '300px',
+         'containIntrinsicHeight': '200px',
+       },
+     })`,
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'containIntrinsicWidth': 'auto 300px',
+         'containIntrinsicHeight': 'auto 200px',
+       },
+     })`,
+
     // test for absolute width
     `import stylex from "stylex";
      stylex.create({

packages/eslint-plugin/src/stylex-valid-styles.js

@@ -1793,6 +1793,11 @@ const CSSProperties = {
   columnWidth: columnWidth,
   columns: columns,
   contain: contain,
+  containIntrinsicSize: makeUnionRule(isNumber, isString),
+  containIntrinsicBlockSize: makeUnionRule(isNumber, isString),
+  containIntrinsicInlineSize: makeUnionRule(isNumber, isString),
+  containIntrinsicHeight: makeUnionRule(isNumber, isString),
+  containIntrinsicWidth: makeUnionRule(isNumber, isString),
   containerType: makeUnionRule('normal', 'size', 'inline-size'),
   containerName: isString,
   content: content,
@@ -2345,8 +2350,6 @@ const stylexValidStyles = {
 
     const legacyProps: PropLimits = {
       'grid*': { limit: null, reason: legacyReason },
-      rowGap: { limit: null, reason: legacyReason },
-      columnGap: { limit: null, reason: legacyReason },
       'mask+([a-zA-Z])': { limit: null, reason: legacyReason },
       blockOverflow: { limit: null, reason: legacyReason },
       inlineOverflow: { limit: null, reason: legacyReason },

packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js

@@ -42,6 +42,34 @@ describe('Flatten Style Object with legacy shorthand expansion', () => {
       ]);
     });
 
+    test('should expand simple gap values', () => {
+      expect(
+        flattenRawStyleObject(
+          {
+            gap: 10,
+          },
+          options,
+        ),
+      ).toEqual([
+        ['rowGap', new PreRule('rowGap', 10)],
+        ['columnGap', new PreRule('columnGap', 10)],
+      ]);
+    });
+
+    test('should expand simple containIntrinsicSize values', () => {
+      expect(
+        flattenRawStyleObject(
+          {
+            containIntrinsicSize: 10,
+          },
+          options,
+        ),
+      ).toEqual([
+        ['containIntrinsicWidth', new PreRule('containIntrinsicWidth', 10)],
+        ['containIntrinsicHeight', new PreRule('containIntrinsicHeight', 10)],
+      ]);
+    });
+
     test('should expand simple shorthands', () => {
       expect(flattenRawStyleObject({ margin: 10 }, options)).toEqual([
         ['marginTop', new PreRule('marginTop', 10)],
@@ -79,6 +107,69 @@ describe('Flatten Style Object with legacy shorthand expansion', () => {
       ]);
     });
 
+    test('should expand simple gap with space-separated values', () => {
+      expect(
+        flattenRawStyleObject(
+          {
+            gap: '10px 20px',
+          },
+          options,
+        ),
+      ).toEqual([
+        ['rowGap', new PreRule('rowGap', '10px')],
+        ['columnGap', new PreRule('columnGap', '20px')],
+      ]);
+    });
+
+    test('should expand simple containIntrinsicSize with space-separated values', () => {
+      const w = 'containIntrinsicWidth';
+      const h = 'containIntrinsicHeight';
+      expect(
+        flattenRawStyleObject(
+          {
+            containIntrinsicSize: '10px 20px',
+          },
+          options,
+        ),
+      ).toEqual([
+        [w, new PreRule(w, '10px')],
+        [h, new PreRule(h, '20px')],
+      ]);
+      expect(
+        flattenRawStyleObject(
+          {
+            containIntrinsicSize: 'auto 10px 20px',
+          },
+          options,
+        ),
+      ).toEqual([
+        [w, new PreRule(w, 'auto 10px')],
+        [h, new PreRule(h, '20px')],
+      ]);
+      expect(
+        flattenRawStyleObject(
+          {
+            containIntrinsicSize: '10px auto 20px',
+          },
+          options,
+        ),
+      ).toEqual([
+        [w, new PreRule(w, '10px')],
+        [h, new PreRule(h, 'auto 20px')],
+      ]);
+      expect(
+        flattenRawStyleObject(
+          {
+            containIntrinsicSize: 'auto 10px auto 20px',
+          },
+          options,
+        ),
+      ).toEqual([
+        [w, new PreRule(w, 'auto 10px')],
+        [h, new PreRule(h, 'auto 20px')],
+      ]);
+    });
+
     test('should expand shorthands with fallbacks', () => {
       expect(
         flattenRawStyleObject({ margin: ['10vh 20px', '10dvh 20px'] }, options),

packages/shared/src/preprocess-rules/legacy-expand-shorthands.js

@@ -172,6 +172,31 @@ const shorthands: $ReadOnly<{ [key: string]: (TStyleValue) => TReturn }> = {
     ];
   },
 
+  containIntrinsicSize: (rawValue: TStyleValue): TReturn => {
+    const parts = splitValue(rawValue);
+
+    // combine any part which is "auto" with the subsequent part
+    // ['auto', 'x', 'auto', 'y'] => ['auto x', 'auto y']
+    // ['auto', 'x', 'y'] => ['auto x', 'y']
+    // ['x', 'auto', 'y'] => ['x', 'auto y']
+    // ['x', 'y'] => ['x', 'y']
+    const [width, height = width] = parts.reduce(
+      (coll: Array<number | string | null>, part: number | string | null) => {
+        const lastElement = coll[coll.length - 1];
+        if (lastElement === 'auto' && part != null) {
+          return [...coll.slice(0, -1), `auto ${part}`];
+        }
+        return [...coll, part];
+      },
+      [],
+    );
+
+    return [
+      ['containIntrinsicWidth', width],
+      ['containIntrinsicHeight', height],
+    ];
+  },
+
   inset: (rawValue: TStyleValue): TReturn => [
     ['top', rawValue],
     ['end', rawValue],

packages/stylex/src/StyleXCSSTypes.js

@@ -583,7 +583,23 @@ type rubyMerge = 'separate' | 'collapse' | 'auto';
 type rubyPosition = 'over' | 'under' | 'inter-character';
 type scrollBehavior = 'auto' | 'smooth';
 type scrollSnapAlign = 'none' | 'start' | 'end' | 'center';
-type scrollSnapType = 'none' | 'x mandatory' | 'y mandatory';
+type scrollSnapType =
+  | 'none'
+  | 'block mandatory'
+  | 'block proximity'
+  | 'block'
+  | 'both mandatory'
+  | 'both proximity'
+  | 'both'
+  | 'inline mandatory'
+  | 'inline proximity'
+  | 'inline'
+  | 'x'
+  | 'x mandatory'
+  | 'x proximity'
+  | 'y'
+  | 'y mandatory'
+  | 'y proximity';
 type shapeImageThreshold = number | string;
 type shapeMargin = lengthPercentage;
 type shapeOutside = 'none' | shapeBox | string;
@@ -1119,8 +1135,8 @@ export type CSSProperties = $ReadOnly<{
   containIntrinsicSize?: all | number | string,
   containIntrinsicBlockSize?: all | number | string,
   containIntrinsicInlineSize?: all | number | string,
-  containIntrinsicHeightSize?: all | number | string,
-  containIntrinsicWidthSize?: all | number | string,
+  containIntrinsicHeight?: all | number | string,
+  containIntrinsicWidth?: all | number | string,
 
   container?: all | string,
   containerName?: all | string,