Add ESLint rule for slow CSS properties that may impact GPU rendering

[Copilot]

This PR adds a new ESLint rule @remotion/slow-css-property that warns developers when they use CSS properties that may slow down rendering on machines without a GPU.

What it does

The rule detects usage of the following CSS properties in React style objects:

• boxShadow - Box shadow effects
• textShadow - Text shadow effects
• filter - CSS filter effects (blur, brightness, etc.)

When any of these properties are used, the rule displays a warning:

This GPU effect may slow down the render on machines which don't have a GPU.
See: https://remotion.dev/docs/gpu

Examples

❌ Invalid (triggers warning):

const style = {
  boxShadow: "0 0 5px red",
  textShadow: "1px 1px 1px black",
  filter: "blur(5px)"
};

✅ Valid (no warning):

const style = {
  color: "red",
  backgroundColor: "blue",
  margin: 10,
  // String keys don't trigger the rule
  "box-shadow": "0 0 5px red"
};

Implementation Details

• Added new rule file: src/rules/slow-css-property.ts
• Added comprehensive tests: src/tests/slow-css-property.test.ts
• Updated main index to export the rule and include it in recommended config as a "warn" level rule
• Follows existing code patterns and ESLint plugin conventions
• All existing tests continue to pass

The rule is automatically included when using @remotion/eslint-plugin with the recommended configuration.

Fixes #5424.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bugs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 19, 2025 6:12am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
remotion	⬜️ Skipped (Inspect)			Jun 19, 2025 6:12am

[JonnyBurger]

@copilot String keys like "box-shadow" should indeed also trigger the warning

[Copilot]

@copilot String keys like "box-shadow" should indeed also trigger the warning

Fixed! The rule now detects both camelCase properties (boxShadow) and string literal properties ("box-shadow"). Updated tests to verify both patterns trigger warnings. (e4b29bb)

[JonnyBurger]

@copilot Nice, please also detect these properties applied via Tailwind classes

[Copilot]

@copilot Nice, please also detect these properties applied via Tailwind classes

Added Tailwind CSS class detection! The rule now detects slow CSS properties in both React style objects and Tailwind classes including shadow-, blur-, brightness-, contrast-, drop-shadow-, grayscale, hue-rotate-, invert, saturate-*, and sepia classes. (c631da5)