Disable linting for CSS mode in CodeMirror editor

[omarkasem]

• Implements Custom code editor shows false warnings for valid modern CSS #2411
• Disable linting for CSS mode in CodeMirror editor to support modern CSS syntax in WordPress. This change ensures compatibility with the WordPress CSS editor, which does not handle modern CSS features.

💾 Build file (4ffc051).

Summary by CodeRabbit

• Bug Fixes
  • Resolved false warnings in the admin CSS editor by disabling linting for CSS, allowing modern CSS syntax without erroneous errors.
  • Improves editing experience and compatibility with contemporary CSS features.
  • No changes to linting behavior for other languages or editors.

[coderabbitai]

Walkthrough

Adds a conditional in setupCodeMirror to disable CodeMirror linting when mode is set to 'css' after merging data-codemirror attributes, affecting only CSS mode initialization.

Changes

Cohort / File(s)	Summary
CodeMirror CSS lint toggle assets/js/admin-views.js	In setupCodeMirror, after applying data-codemirror attributes, if mode is 'css', set codemirrorConfig.codemirror.lint = false to avoid linting modern CSS syntax. No other logic changes or API surface changes.

Sequence Diagram(s)

sequenceDiagram
    participant AdminUI as Admin UI
    participant CMInit as setupCodeMirror()
    participant CM as CodeMirror

    AdminUI->>CMInit: Initialize editor with config
    CMInit->>CMInit: Merge data-codemirror attrs
    alt mode === 'css'
        Note over CMInit: Disable lint
        CMInit->>CMInit: codemirrorConfig.codemirror.lint = false
    else
        CMInit->>CMInit: Keep existing lint setting
    end
    CMInit->>CM: CodeMirror.fromTextArea(config)
    CM-->>AdminUI: Editor instance

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I twitch my whiskers, lint hops away,
In CSS fields, new rules hold sway.
No scolds today for modern flair—
The editor breathes the freshest air.
Thump-thump! I ship with gentle cheer,
Clean carrots, clean code, nothing to fear. 🥕✨

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch issue/2411-custom-code-editor-shows-false-warnings-for-valid-modern-css

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

assets/js/admin-views.js (1)

1345-1349: Broaden CSS-mode check and read the merged config, not just data-attribute.

Covers cases where mode is 'text/css' or an object ({name:'css'}) and when mode comes from defaults (no data-codemirror on the textarea). Optionally removes empty lint gutter.

-			   // Disable linting for CSS mode as WordPress CSS editor does not support modern CSS syntax.
-			   if ( attributeValue && 'css' === attributeValue.mode ) {
-				   codemirrorConfig.codemirror.lint = false;
-			   }
+			   // Disable linting for CSS mode as WordPress CSS editor does not support modern CSS syntax.
+			   const modeOpt  = codemirrorConfig?.codemirror?.mode;
+			   const modeName = typeof modeOpt === 'string' ? modeOpt : modeOpt?.name;
+			   if ( modeName === 'css' || modeName === 'text/css' ) {
+				   codemirrorConfig.codemirror.lint = false;
+				   // Optional: drop lint gutter to avoid an empty column.
+				   if ( Array.isArray( codemirrorConfig.codemirror.gutters ) ) {
+					   codemirrorConfig.codemirror.gutters =
+						   codemirrorConfig.codemirror.gutters.filter( g => g !== 'CodeMirror-lint-markers' );
+				   }
+			   }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70d9f3c and 4ffc051.

⛔ Files ignored due to path filters (1)

• assets/js/admin-views.min.js is excluded by !**/*.min.js

📒 Files selected for processing (1)

• assets/js/admin-views.js (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test_and_package