@remotion/eslint-plugin 4.0.440 → 4.0.442

package/dist/cjs/index.js

@@ -312,9 +312,96 @@ var no_from_0_default = createRule5({
   }
 });
 
-// src/rules/no-string-assets.ts
+// src/rules/no-object-fit-on-media-video.ts
 var import_utils6 = require("@typescript-eslint/utils");
 var createRule6 = import_utils6.ESLintUtils.RuleCreator(() => {
+  return "https://remotion.dev/docs/media/video#objectfit";
+});
+var NoObjectFitInStyle = [
+  "Passing `objectFit` via the `style` prop is not supported for `<Video>` from `@remotion/media`.",
+  "Use the `objectFit` prop directly instead.",
+  "See: https://remotion.dev/docs/media/video#objectfit"
+].join(`
+`);
+var NoObjectFitInClassName = [
+  "Passing an `object-fit` CSS class via `className` is not supported for `<Video>` from `@remotion/media`.",
+  "Use the `objectFit` prop directly instead.",
+  "See: https://remotion.dev/docs/media/video#objectfit"
+].join(`
+`);
+var objectFitClassPattern = /\bobject-(contain|cover|fill|none|scale-down)\b/;
+var no_object_fit_on_media_video_default = createRule6({
+  name: "no-object-fit-on-media-video",
+  meta: {
+    type: "problem",
+    docs: {
+      description: NoObjectFitInStyle,
+      recommended: "warn"
+    },
+    fixable: undefined,
+    schema: [],
+    messages: {
+      NoObjectFitInStyle,
+      NoObjectFitInClassName
+    }
+  },
+  defaultOptions: [],
+  create: (context) => {
+    return {
+      JSXOpeningElement: (node) => {
+        if (node.name.type !== "JSXIdentifier" || node.name.name !== "Video") {
+          return;
+        }
+        for (const attr of node.attributes) {
+          if (attr.type !== "JSXAttribute") {
+            continue;
+          }
+          if (attr.name.type === "JSXIdentifier" && attr.name.name === "style" && attr.value) {
+            if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "ObjectExpression") {
+              for (const prop of attr.value.expression.properties) {
+                if (prop.type !== "Property") {
+                  continue;
+                }
+                let propertyName;
+                if (prop.key.type === "Identifier") {
+                  propertyName = prop.key.name;
+                } else if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+                  propertyName = prop.key.value;
+                }
+                if (propertyName === "objectFit" || propertyName === "object-fit") {
+                  context.report({
+                    messageId: "NoObjectFitInStyle",
+                    node: prop
+                  });
+                }
+              }
+            }
+          }
+          if (attr.name.type === "JSXIdentifier" && attr.name.name === "className" && attr.value) {
+            let classString;
+            if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+              classString = attr.value.value;
+            } else if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "Literal" && typeof attr.value.expression.value === "string") {
+              classString = attr.value.expression.value;
+            } else if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "TemplateLiteral") {
+              classString = attr.value.expression.quasis.map((q) => q.value.cooked || q.value.raw).join(" ");
+            }
+            if (classString && objectFitClassPattern.test(classString)) {
+              context.report({
+                messageId: "NoObjectFitInClassName",
+                node: attr
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+
+// src/rules/no-string-assets.ts
+var import_utils7 = require("@typescript-eslint/utils");
+var createRule7 = import_utils7.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
 var NoStringAssets = [
@@ -322,7 +409,7 @@ var NoStringAssets = [
   "See: https://www.remotion.dev/docs/assets"
 ].join(`
 `);
-var no_string_assets_default = createRule6({
+var no_string_assets_default = createRule7({
   name: "no-string-assets",
   meta: {
     type: "problem",
@@ -387,8 +474,8 @@ var no_string_assets_default = createRule6({
 });
 
 // src/rules/non-pure-animation.ts
-var import_utils7 = require("@typescript-eslint/utils");
-var createRule7 = import_utils7.ESLintUtils.RuleCreator(() => {
+var import_utils8 = require("@typescript-eslint/utils");
+var createRule8 = import_utils8.ESLintUtils.RuleCreator(() => {
   return "https://www.remotion.dev/docs/flickering";
 });
 var NonPureAnimation = [
@@ -414,7 +501,7 @@ function findProblematicTailwindClass(classString) {
   }
   return null;
 }
-var non_pure_animation_default = createRule7({
+var non_pure_animation_default = createRule8({
   name: "non-pure-animation",
   meta: {
     type: "problem",
@@ -490,8 +577,8 @@ var non_pure_animation_default = createRule7({
 });
 
 // src/rules/slow-css-property.ts
-var import_utils8 = require("@typescript-eslint/utils");
-var createRule8 = import_utils8.ESLintUtils.RuleCreator(() => {
+var import_utils9 = require("@typescript-eslint/utils");
+var createRule9 = import_utils9.ESLintUtils.RuleCreator(() => {
   return "https://remotion.dev/docs/gpu";
 });
 var SlowCssProperty = [
@@ -518,7 +605,7 @@ var slowTailwindClasses = [
 function containsSlowTailwindClass(classString) {
   return slowTailwindClasses.some((pattern) => pattern.test(classString));
 }
-var slow_css_property_default = createRule8({
+var slow_css_property_default = createRule9({
   name: "slow-css-property",
   meta: {
     type: "problem",
@@ -577,8 +664,8 @@ var slow_css_property_default = createRule8({
 });
 
 // src/rules/staticfile-no-relative.ts
-var import_utils9 = require("@typescript-eslint/utils");
-var createRule9 = import_utils9.ESLintUtils.RuleCreator(() => {
+var import_utils10 = require("@typescript-eslint/utils");
+var createRule10 = import_utils10.ESLintUtils.RuleCreator(() => {
   return `https://remotion.dev/docs/staticfile-relative-paths`;
 });
 var RelativePathStaticFile = [
@@ -594,7 +681,7 @@ var PublicStaticFile = [
   "Do not prefix your assets with public/.",
   "See: https://remotion.dev/docs/staticfile-relative-paths"
 ].join("");
-var staticfile_no_relative_default = createRule9({
+var staticfile_no_relative_default = createRule10({
   name: "staticfile-no-relative",
   meta: {
     type: "problem",
@@ -661,8 +748,8 @@ var staticfile_no_relative_default = createRule9({
 });
 
 // src/rules/staticfile-no-remote.ts
-var import_utils10 = require("@typescript-eslint/utils");
-var createRule10 = import_utils10.ESLintUtils.RuleCreator(() => {
+var import_utils11 = require("@typescript-eslint/utils");
+var createRule11 = import_utils11.ESLintUtils.RuleCreator(() => {
   return `https://remotion.dev/docs/staticfile-remote-urls`;
 });
 var RelativePathStaticFile2 = [
@@ -670,7 +757,7 @@ var RelativePathStaticFile2 = [
   "See: https://remotion.dev/docs/staticfile-remote-urls"
 ].join(`
 `);
-var staticfile_no_remote_default = createRule10({
+var staticfile_no_remote_default = createRule11({
   name: "staticfile-no-remote",
   meta: {
     type: "problem",
@@ -723,8 +810,8 @@ var staticfile_no_remote_default = createRule10({
 });
 
 // src/rules/use-gif-component.ts
-var import_utils11 = require("@typescript-eslint/utils");
-var createRule11 = import_utils11.ESLintUtils.RuleCreator(() => {
+var import_utils12 = require("@typescript-eslint/utils");
+var createRule12 = import_utils12.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
 var UseGifComponent = [
@@ -733,7 +820,7 @@ var UseGifComponent = [
   "Ignore this message if this is a non-animated GIF."
 ].join(`
 `);
-var use_gif_component_default = createRule11({
+var use_gif_component_default = createRule12({
   name: "use-gif-component",
   meta: {
     type: "problem",
@@ -809,12 +896,12 @@ var use_gif_component_default = createRule11({
 });
 
 // src/rules/v4-import.ts
-var import_utils12 = require("@typescript-eslint/utils");
-var createRule12 = import_utils12.ESLintUtils.RuleCreator(() => {
+var import_utils13 = require("@typescript-eslint/utils");
+var createRule13 = import_utils13.ESLintUtils.RuleCreator(() => {
   return `https://www.remotion.dev/docs/4-0-migration`;
 });
 var ImportConfig = "Update the import to the new V4 location: import {Config} from '@remotion/cli/config'";
-var rule = createRule12({
+var rule = createRule13({
   name: "v4-config-import",
   meta: {
     type: "problem",
@@ -849,12 +936,12 @@ var rule = createRule12({
 var v4_import_default = rule;
 
 // src/rules/volume-callback.ts
-var import_utils13 = require("@typescript-eslint/utils");
-var createRule13 = import_utils13.ESLintUtils.RuleCreator(() => {
+var import_utils14 = require("@typescript-eslint/utils");
+var createRule14 = import_utils14.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
 var VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume";
-var volume_callback_default = createRule13({
+var volume_callback_default = createRule14({
   name: "volume-callback",
   meta: {
     type: "problem",
@@ -922,15 +1009,15 @@ var volume_callback_default = createRule13({
 });
 
 // src/rules/warn-native-media-tag.ts
-var import_utils14 = require("@typescript-eslint/utils");
-var createRule14 = import_utils14.ESLintUtils.RuleCreator(() => {
+var import_utils15 = require("@typescript-eslint/utils");
+var createRule15 = import_utils15.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
 var NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.";
 var NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.";
 var NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.";
 var NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.";
-var warn_native_media_tag_default = createRule14({
+var warn_native_media_tag_default = createRule15({
   name: "warn-native-media-tag",
   meta: {
     type: "problem",
@@ -1033,7 +1120,8 @@ var rules = {
   "no-background-image": no_background_image_default,
   "non-pure-animation": non_pure_animation_default,
   "slow-css-property": slow_css_property_default,
-  "v4-config-import": v4_import_default
+  "v4-config-import": v4_import_default,
+  "no-object-fit-on-media-video": no_object_fit_on_media_video_default
 };
 var recommendedRuleConfig = {
   "@remotion/warn-native-media-tag": "error",
@@ -1048,7 +1136,8 @@ var recommendedRuleConfig = {
   "@remotion/staticfile-no-remote": "error",
   "@remotion/no-background-image": "error",
   "@remotion/non-pure-animation": "warn",
-  "@remotion/v4-config-import": "error"
+  "@remotion/v4-config-import": "error",
+  "@remotion/no-object-fit-on-media-video": "warn"
 };
 var configs = {
   recommended: {

package/dist/esm/index.mjs

@@ -327,11 +327,101 @@ var init_no_from_0 = __esm(() => {
   });
 });
 
-// src/rules/no-string-assets.ts
+// src/rules/no-object-fit-on-media-video.ts
 import { ESLintUtils as ESLintUtils6 } from "@typescript-eslint/utils";
-var createRule6, NoStringAssets, no_string_assets_default;
-var init_no_string_assets = __esm(() => {
+var createRule6, NoObjectFitInStyle, NoObjectFitInClassName, objectFitClassPattern, no_object_fit_on_media_video_default;
+var init_no_object_fit_on_media_video = __esm(() => {
   createRule6 = ESLintUtils6.RuleCreator(() => {
+    return "https://remotion.dev/docs/media/video#objectfit";
+  });
+  NoObjectFitInStyle = [
+    "Passing `objectFit` via the `style` prop is not supported for `<Video>` from `@remotion/media`.",
+    "Use the `objectFit` prop directly instead.",
+    "See: https://remotion.dev/docs/media/video#objectfit"
+  ].join(`
+`);
+  NoObjectFitInClassName = [
+    "Passing an `object-fit` CSS class via `className` is not supported for `<Video>` from `@remotion/media`.",
+    "Use the `objectFit` prop directly instead.",
+    "See: https://remotion.dev/docs/media/video#objectfit"
+  ].join(`
+`);
+  objectFitClassPattern = /\bobject-(contain|cover|fill|none|scale-down)\b/;
+  no_object_fit_on_media_video_default = createRule6({
+    name: "no-object-fit-on-media-video",
+    meta: {
+      type: "problem",
+      docs: {
+        description: NoObjectFitInStyle,
+        recommended: "warn"
+      },
+      fixable: undefined,
+      schema: [],
+      messages: {
+        NoObjectFitInStyle,
+        NoObjectFitInClassName
+      }
+    },
+    defaultOptions: [],
+    create: (context) => {
+      return {
+        JSXOpeningElement: (node) => {
+          if (node.name.type !== "JSXIdentifier" || node.name.name !== "Video") {
+            return;
+          }
+          for (const attr of node.attributes) {
+            if (attr.type !== "JSXAttribute") {
+              continue;
+            }
+            if (attr.name.type === "JSXIdentifier" && attr.name.name === "style" && attr.value) {
+              if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "ObjectExpression") {
+                for (const prop of attr.value.expression.properties) {
+                  if (prop.type !== "Property") {
+                    continue;
+                  }
+                  let propertyName;
+                  if (prop.key.type === "Identifier") {
+                    propertyName = prop.key.name;
+                  } else if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+                    propertyName = prop.key.value;
+                  }
+                  if (propertyName === "objectFit" || propertyName === "object-fit") {
+                    context.report({
+                      messageId: "NoObjectFitInStyle",
+                      node: prop
+                    });
+                  }
+                }
+              }
+            }
+            if (attr.name.type === "JSXIdentifier" && attr.name.name === "className" && attr.value) {
+              let classString;
+              if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+                classString = attr.value.value;
+              } else if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "Literal" && typeof attr.value.expression.value === "string") {
+                classString = attr.value.expression.value;
+              } else if (attr.value.type === "JSXExpressionContainer" && attr.value.expression.type === "TemplateLiteral") {
+                classString = attr.value.expression.quasis.map((q) => q.value.cooked || q.value.raw).join(" ");
+              }
+              if (classString && objectFitClassPattern.test(classString)) {
+                context.report({
+                  messageId: "NoObjectFitInClassName",
+                  node: attr
+                });
+              }
+            }
+          }
+        }
+      };
+    }
+  });
+});
+
+// src/rules/no-string-assets.ts
+import { ESLintUtils as ESLintUtils7 } from "@typescript-eslint/utils";
+var createRule7, NoStringAssets, no_string_assets_default;
+var init_no_string_assets = __esm(() => {
+  createRule7 = ESLintUtils7.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
   NoStringAssets = [
@@ -339,7 +429,7 @@ var init_no_string_assets = __esm(() => {
     "See: https://www.remotion.dev/docs/assets"
   ].join(`
 `);
-  no_string_assets_default = createRule6({
+  no_string_assets_default = createRule7({
     name: "no-string-assets",
     meta: {
       type: "problem",
@@ -405,7 +495,7 @@ var init_no_string_assets = __esm(() => {
 });
 
 // src/rules/non-pure-animation.ts
-import { ESLintUtils as ESLintUtils7 } from "@typescript-eslint/utils";
+import { ESLintUtils as ESLintUtils8 } from "@typescript-eslint/utils";
 function findProblematicTailwindClass(classString) {
   for (const pattern of nonPureAnimationTailwindClasses) {
     const match = classString.match(pattern);
@@ -418,9 +508,9 @@ function findProblematicTailwindClass(classString) {
   }
   return null;
 }
-var createRule7, NonPureAnimation, nonPureAnimationProperties, nonPureAnimationPropertiesKebab, nonPureAnimationTailwindClasses, non_pure_animation_default;
+var createRule8, NonPureAnimation, nonPureAnimationProperties, nonPureAnimationPropertiesKebab, nonPureAnimationTailwindClasses, non_pure_animation_default;
 var init_non_pure_animation = __esm(() => {
-  createRule7 = ESLintUtils7.RuleCreator(() => {
+  createRule8 = ESLintUtils8.RuleCreator(() => {
     return "https://www.remotion.dev/docs/flickering";
   });
   NonPureAnimation = [
@@ -434,7 +524,7 @@ var init_non_pure_animation = __esm(() => {
     /\btransition-\w+\b/,
     /\btransition\b/
   ];
-  non_pure_animation_default = createRule7({
+  non_pure_animation_default = createRule8({
     name: "non-pure-animation",
     meta: {
       type: "problem",
@@ -511,13 +601,13 @@ var init_non_pure_animation = __esm(() => {
 });
 
 // src/rules/slow-css-property.ts
-import { ESLintUtils as ESLintUtils8 } from "@typescript-eslint/utils";
+import { ESLintUtils as ESLintUtils9 } from "@typescript-eslint/utils";
 function containsSlowTailwindClass(classString) {
   return slowTailwindClasses.some((pattern) => pattern.test(classString));
 }
-var createRule8, SlowCssProperty, slowCssProperties, slowCssPropertiesKebab, slowTailwindClasses, slow_css_property_default;
+var createRule9, SlowCssProperty, slowCssProperties, slowCssPropertiesKebab, slowTailwindClasses, slow_css_property_default;
 var init_slow_css_property = __esm(() => {
-  createRule8 = ESLintUtils8.RuleCreator(() => {
+  createRule9 = ESLintUtils9.RuleCreator(() => {
     return "https://remotion.dev/docs/gpu";
   });
   SlowCssProperty = [
@@ -541,7 +631,7 @@ var init_slow_css_property = __esm(() => {
     /\bsepia(?:-\d+)?\b/,
     /\btext-shadow-\w+\b/
   ];
-  slow_css_property_default = createRule8({
+  slow_css_property_default = createRule9({
     name: "slow-css-property",
     meta: {
       type: "problem",
@@ -601,10 +691,10 @@ var init_slow_css_property = __esm(() => {
 });
 
 // src/rules/staticfile-no-relative.ts
-import { ESLintUtils as ESLintUtils9 } from "@typescript-eslint/utils";
-var createRule9, RelativePathStaticFile, AbsoluteStaticFile, PublicStaticFile, staticfile_no_relative_default;
+import { ESLintUtils as ESLintUtils10 } from "@typescript-eslint/utils";
+var createRule10, RelativePathStaticFile, AbsoluteStaticFile, PublicStaticFile, staticfile_no_relative_default;
 var init_staticfile_no_relative = __esm(() => {
-  createRule9 = ESLintUtils9.RuleCreator(() => {
+  createRule10 = ESLintUtils10.RuleCreator(() => {
     return `https://remotion.dev/docs/staticfile-relative-paths`;
   });
   RelativePathStaticFile = [
@@ -620,7 +710,7 @@ var init_staticfile_no_relative = __esm(() => {
     "Do not prefix your assets with public/.",
     "See: https://remotion.dev/docs/staticfile-relative-paths"
   ].join("");
-  staticfile_no_relative_default = createRule9({
+  staticfile_no_relative_default = createRule10({
     name: "staticfile-no-relative",
     meta: {
       type: "problem",
@@ -688,10 +778,10 @@ var init_staticfile_no_relative = __esm(() => {
 });
 
 // src/rules/staticfile-no-remote.ts
-import { ESLintUtils as ESLintUtils10 } from "@typescript-eslint/utils";
-var createRule10, RelativePathStaticFile2, staticfile_no_remote_default;
+import { ESLintUtils as ESLintUtils11 } from "@typescript-eslint/utils";
+var createRule11, RelativePathStaticFile2, staticfile_no_remote_default;
 var init_staticfile_no_remote = __esm(() => {
-  createRule10 = ESLintUtils10.RuleCreator(() => {
+  createRule11 = ESLintUtils11.RuleCreator(() => {
     return `https://remotion.dev/docs/staticfile-remote-urls`;
   });
   RelativePathStaticFile2 = [
@@ -699,7 +789,7 @@ var init_staticfile_no_remote = __esm(() => {
     "See: https://remotion.dev/docs/staticfile-remote-urls"
   ].join(`
 `);
-  staticfile_no_remote_default = createRule10({
+  staticfile_no_remote_default = createRule11({
     name: "staticfile-no-remote",
     meta: {
       type: "problem",
@@ -753,10 +843,10 @@ var init_staticfile_no_remote = __esm(() => {
 });
 
 // src/rules/use-gif-component.ts
-import { ESLintUtils as ESLintUtils11 } from "@typescript-eslint/utils";
-var createRule11, UseGifComponent, use_gif_component_default;
+import { ESLintUtils as ESLintUtils12 } from "@typescript-eslint/utils";
+var createRule12, UseGifComponent, use_gif_component_default;
 var init_use_gif_component = __esm(() => {
-  createRule11 = ESLintUtils11.RuleCreator(() => {
+  createRule12 = ESLintUtils12.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
   UseGifComponent = [
@@ -765,7 +855,7 @@ var init_use_gif_component = __esm(() => {
     "Ignore this message if this is a non-animated GIF."
   ].join(`
 `);
-  use_gif_component_default = createRule11({
+  use_gif_component_default = createRule12({
     name: "use-gif-component",
     meta: {
       type: "problem",
@@ -842,13 +932,13 @@ var init_use_gif_component = __esm(() => {
 });
 
 // src/rules/v4-import.ts
-import { ESLintUtils as ESLintUtils12 } from "@typescript-eslint/utils";
-var createRule12, ImportConfig = "Update the import to the new V4 location: import {Config} from '@remotion/cli/config'", rule, v4_import_default;
+import { ESLintUtils as ESLintUtils13 } from "@typescript-eslint/utils";
+var createRule13, ImportConfig = "Update the import to the new V4 location: import {Config} from '@remotion/cli/config'", rule, v4_import_default;
 var init_v4_import = __esm(() => {
-  createRule12 = ESLintUtils12.RuleCreator(() => {
+  createRule13 = ESLintUtils13.RuleCreator(() => {
     return `https://www.remotion.dev/docs/4-0-migration`;
   });
-  rule = createRule12({
+  rule = createRule13({
     name: "v4-config-import",
     meta: {
       type: "problem",
@@ -884,13 +974,13 @@ var init_v4_import = __esm(() => {
 });
 
 // src/rules/volume-callback.ts
-import { ESLintUtils as ESLintUtils13 } from "@typescript-eslint/utils";
-var createRule13, VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume", volume_callback_default;
+import { ESLintUtils as ESLintUtils14 } from "@typescript-eslint/utils";
+var createRule14, VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume", volume_callback_default;
 var init_volume_callback = __esm(() => {
-  createRule13 = ESLintUtils13.RuleCreator(() => {
+  createRule14 = ESLintUtils14.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
-  volume_callback_default = createRule13({
+  volume_callback_default = createRule14({
     name: "volume-callback",
     meta: {
       type: "problem",
@@ -959,13 +1049,13 @@ var init_volume_callback = __esm(() => {
 });
 
 // src/rules/warn-native-media-tag.ts
-import { ESLintUtils as ESLintUtils14 } from "@typescript-eslint/utils";
-var createRule14, NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.", NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.", NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", warn_native_media_tag_default;
+import { ESLintUtils as ESLintUtils15 } from "@typescript-eslint/utils";
+var createRule15, NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.", NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.", NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", warn_native_media_tag_default;
 var init_warn_native_media_tag = __esm(() => {
-  createRule14 = ESLintUtils14.RuleCreator(() => {
+  createRule15 = ESLintUtils15.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
-  warn_native_media_tag_default = createRule14({
+  warn_native_media_tag_default = createRule15({
     name: "warn-native-media-tag",
     meta: {
       type: "problem",
@@ -1061,6 +1151,7 @@ var require_src = __commonJS((exports, module) => {
   init_no_background_image();
   init_no_duration_frames_infinity();
   init_no_from_0();
+  init_no_object_fit_on_media_video();
   init_no_string_assets();
   init_non_pure_animation();
   init_slow_css_property();
@@ -1084,7 +1175,8 @@ var require_src = __commonJS((exports, module) => {
     "no-background-image": no_background_image_default,
     "non-pure-animation": non_pure_animation_default,
     "slow-css-property": slow_css_property_default,
-    "v4-config-import": v4_import_default
+    "v4-config-import": v4_import_default,
+    "no-object-fit-on-media-video": no_object_fit_on_media_video_default
   };
   var recommendedRuleConfig = {
     "@remotion/warn-native-media-tag": "error",
@@ -1099,7 +1191,8 @@ var require_src = __commonJS((exports, module) => {
     "@remotion/staticfile-no-remote": "error",
     "@remotion/no-background-image": "error",
     "@remotion/non-pure-animation": "warn",
-    "@remotion/v4-config-import": "error"
+    "@remotion/v4-config-import": "error",
+    "@remotion/no-object-fit-on-media-video": "warn"
   };
   var configs = {
     recommended: {

package/dist/index.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
                 readonly '@remotion/no-background-image': "error";
                 readonly '@remotion/non-pure-animation': "warn";
                 readonly '@remotion/v4-config-import': "error";
+                readonly '@remotion/no-object-fit-on-media-video': "warn";
             };
             readonly plugins: readonly ["@remotion"];
         };
@@ -34,6 +35,7 @@ declare const _default: {
         'non-pure-animation': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NonPureAnimation", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
         'slow-css-property': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"SlowCssProperty", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
         'v4-config-import': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"ImportConfig", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+        'no-object-fit-on-media-video': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NoObjectFitInClassName" | "NoObjectFitInStyle", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     };
     flatPlugin: {
         rules: {
@@ -50,6 +52,7 @@ declare const _default: {
             readonly '@remotion/no-background-image': "error";
             readonly '@remotion/non-pure-animation': "warn";
             readonly '@remotion/v4-config-import': "error";
+            readonly '@remotion/no-object-fit-on-media-video': "warn";
         };
         plugins: {
             '@remotion': {
@@ -68,6 +71,7 @@ declare const _default: {
                     'non-pure-animation': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NonPureAnimation", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                     'slow-css-property': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"SlowCssProperty", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                     'v4-config-import': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"ImportConfig", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+                    'no-object-fit-on-media-video': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NoObjectFitInClassName" | "NoObjectFitInStyle", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                 };
             };
         };

package/dist/rules/no-object-fit-on-media-video.d.ts

@@ -0,0 +1,3 @@
+type MessageIds = 'NoObjectFitInStyle' | 'NoObjectFitInClassName';
+declare const _default: import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<MessageIds, [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+export default _default;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-plugin"
 	},
 	"name": "@remotion/eslint-plugin",
-	"version": "4.0.440",
+	"version": "4.0.442",
 	"description": "Rules for writing Remotion code",
 	"scripts": {
 		"test": "node src/tests/execute.mjs",