Replace ESLint config file overrides with inline eslint-disable comments

Move stylex/valid-styles suppression from a centralized file list in
eslint.config.js to inline comments in each affected test-case output
file. This keeps all other ESLint rules active for those files and makes
false-positive reasons self-documenting at the point of suppression.

Test normalizeCode() now strips eslint-disable/enable comments before
comparison so the inline annotations don't affect codemod output matching.

https://claude.ai/code/session_01XiDLahA95gukTrVrvaBU6e

Author: claude

eslint.config.js

@@ -43,38 +43,5 @@ export default [
       "stylex/valid-styles": "error",
     },
   },
-  {
-    // stylex/valid-styles false positives: @stylexjs/eslint-plugin limitations
-    // - Dynamic style fn params: rule can't validate runtime values
-    // - Multi-animation comma values: rule only validates single values
-    // - !important suffix: rule doesn't parse !important from value
-    // - Computed stylex.when.*() keys: rule reports "Keys must be strings"
-    // - outlineOffset/strokeDasharray numeric values: rule rejects valid numbers
-    files: [
-      "test-cases/conditional-nullishCoalescingWithUnit.output.tsx",
-      "test-cases/conditional-runtimeCallBranch.output.tsx",
-      "test-cases/conditional-runtimeCallLocal.output.tsx",
-      "test-cases/conditional-runtimeCallThemeBool.output.tsx",
-      "test-cases/css-important.output.tsx",
-      "test-cases/helper-callPropArg.output.tsx",
-      "test-cases/helper-memberCalleeMultiArg.output.tsx",
-      "test-cases/interpolation-destructuredDefaults.output.tsx",
-      "test-cases/interpolation-destructuredRename.output.tsx",
-      "test-cases/keyframes-inlineDefinition.output.tsx",
-      "test-cases/keyframes-multipleAnimations.output.tsx",
-      "test-cases/keyframes-unionComplexity.output.tsx",
-      "test-cases/mixin-dynamicArgDefault.output.tsx",
-      "test-cases/selector-descendantComponent.output.tsx",
-      "test-cases/selector-dynamicPseudoElement.output.tsx",
-      "test-cases/selector-pseudoChained.output.tsx",
-      "test-cases/selector-pseudoComma.output.tsx",
-      "test-cases/selector-siblingMedia.output.tsx",
-      "test-cases/theme-indexedLookupPropFallback.output.tsx",
-      "test-cases/transientProp-memberExpression.output.tsx",
-    ],
-    rules: {
-      "stylex/valid-styles": "off",
-    },
-  },
   ...storybook.configs["flat/recommended"],
 ];

src/__tests__/run.e2e.test.ts

@@ -16,7 +16,12 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const testCasesDir = join(__dirname, "..", "..", "test-cases");
 
 async function normalizeCode(code: string): Promise<string> {
-  const { code: formatted } = await format("test.tsx", code);
+  // Strip eslint-disable comments so .output.tsx files can annotate
+  // stylex plugin false positives without affecting codemod comparison
+  const stripped = code
+    .replace(/^\s*\/[/*] eslint-(?:disable|enable).*\n/gm, "")
+    .replace(/ \/\/ eslint-disable.*$/gm, "");
+  const { code: formatted } = await format("test.tsx", stripped);
   return formatted.replace(/\n{3,}/g, "\n\n").trim();
 }
 

src/__tests__/transform.test.ts

@@ -219,7 +219,13 @@ function runTransformWithDiagnostics(
  * Normalize code for comparison using oxfmt formatter
  */
 async function normalizeCode(code: string, filePath: string = "test.tsx"): Promise<string> {
-  const { code: formatted } = await format(filePath, code);
+  // Strip eslint-disable comments so .output.tsx files can annotate
+  // stylex plugin false positives without affecting codemod comparison
+  const stripped = code
+    .replace(/^\s*\/[/*] eslint-(?:disable|enable).*\n/gm, "")
+    .replace(/ \/\/ eslint-disable.*$/gm, "")
+    .replace(/\n{3,}/g, "\n\n");
+  const { code: formatted } = await format(filePath, stripped);
   return formatted;
 }
 

test-cases/conditional-nullishCoalescingWithUnit.output.tsx

@@ -32,6 +32,7 @@ const styles = stylex.create({
     transitionProperty: "opacity",
     transitionDuration: "200ms",
     transitionTimingFunction: "ease-out",
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     transitionDelay: props.transitionDelay,
   }),
 });

test-cases/conditional-runtimeCallBranch.output.tsx

@@ -36,6 +36,7 @@ const styles = stylex.create({
   cardContainer: (props: { backgroundColor: string }) => ({
     paddingBlock: 8,
     paddingInline: 12,
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     backgroundColor: props.backgroundColor,
   }),
 });

test-cases/conditional-runtimeCallLocal.output.tsx

@@ -37,6 +37,7 @@ const styles = stylex.create({
   row: (props: { backgroundColor: string }) => ({
     paddingBlock: 8,
     paddingInline: 16,
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     backgroundColor: props.backgroundColor,
   }),
 });

test-cases/conditional-runtimeCallThemeBool.output.tsx

@@ -34,6 +34,7 @@ const styles = stylex.create({
   row: (props: { backgroundColor: string }) => ({
     paddingBlock: 8,
     paddingInline: 16,
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     backgroundColor: props.backgroundColor,
   }),
 });

test-cases/css-important.output.tsx

@@ -24,6 +24,7 @@ const styles = stylex.create({
     backgroundColor: "#bf4f74 !important",
     color: "white !important",
     borderWidth: "0 !important",
+    // eslint-disable-next-line stylex/valid-styles -- !important suffix not parsed by rule
     borderStyle: "none !important",
     borderColor: "initial !important",
     paddingBlock: 8,

test-cases/helper-callPropArg.output.tsx

@@ -30,6 +30,7 @@ const styles = stylex.create({
     width: 50,
   },
   boxBoxShadow: (boxShadow: string) => ({
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     boxShadow: shadow(boxShadow),
   }),
 });

test-cases/helper-memberCalleeMultiArg.output.tsx

@@ -49,6 +49,7 @@ const styles = stylex.create({
   toggle: (props: { backgroundColor: string }) => ({
     paddingBlock: 8,
     paddingInline: 16,
+    // eslint-disable-next-line stylex/valid-styles -- dynamic style fn param
     backgroundColor: props.backgroundColor,
   }),
   boxBackgroundColor: (backgroundColor: string) => ({