@remotion/eslint-plugin: Support string literal CSS properties in slow-css-property rule

Co-authored-by: JonnyBurger <[email protected]>

Author: Copilot

packages/eslint-plugin/src/rules/slow-css-property.ts

@@ -13,6 +13,7 @@ const SlowCssProperty = [
 ].join('\n');
 
 const slowCssProperties = new Set(['boxShadow', 'textShadow', 'filter']);
+const slowCssPropertiesKebab = new Set(['box-shadow', 'text-shadow', 'filter']);
 
 export default createRule<Options, MessageIds>({
 	name: 'slow-css-property',
@@ -32,11 +33,26 @@ export default createRule<Options, MessageIds>({
 	create: (context) => {
 		return {
 			Property: (node) => {
-				if (node.key.type !== 'Identifier') {
+				let propertyName: string | undefined;
+
+				if (node.key.type === 'Identifier') {
+					propertyName = node.key.name;
+				} else if (
+					node.key.type === 'Literal' &&
+					typeof node.key.value === 'string'
+				) {
+					propertyName = node.key.value;
+				}
+
+				if (!propertyName) {
 					return;
 				}
 
-				if (slowCssProperties.has(node.key.name)) {
+				const isSlowProperty =
+					slowCssProperties.has(propertyName) ||
+					slowCssPropertiesKebab.has(propertyName);
+
+				if (isSlowProperty) {
 					context.report({
 						messageId: 'SlowCssProperty',
 						node,

packages/eslint-plugin/src/tests/slow-css-property.test.ts

@@ -11,7 +11,6 @@ ruleTester.run('slow-css-property', rule, {
 		`const style = {backgroundColor: "blue"}`,
 		`const style = {margin: 10}`,
 		`const style = {border: "1px solid black"}`,
-		`const style = {"box-shadow": "0 0 5px red"}`, // string key should not trigger
 	],
 	invalid: [
 		{
@@ -53,5 +52,44 @@ ruleTester.run('slow-css-property', rule, {
 				},
 			],
 		},
+		{
+			code: `const style = {"box-shadow": "0 0 5px red"}`,
+			errors: [
+				{
+					messageId: 'SlowCssProperty',
+				},
+			],
+		},
+		{
+			code: `const style = {"text-shadow": "1px 1px 1px black"}`,
+			errors: [
+				{
+					messageId: 'SlowCssProperty',
+				},
+			],
+		},
+		{
+			code: `const style = {"filter": "blur(5px)"}`,
+			errors: [
+				{
+					messageId: 'SlowCssProperty',
+				},
+			],
+		},
+		{
+			code: `const style = {
+				color: "red",
+				"box-shadow": "0 0 5px red",
+				"text-shadow": "1px 1px 1px black"
+			}`,
+			errors: [
+				{
+					messageId: 'SlowCssProperty',
+				},
+				{
+					messageId: 'SlowCssProperty',
+				},
+			],
+		},
 	],
 });