Summary

The module currently provides a plain textarea for editing Critical CSS.
To improve the editing experience and reduce user errors, the form should integrate a code editor
with syntax highlighting and basic linting.

Proposed Solution

  • Integrate CodeMirror (or a similar lightweight editor) into the Critical CSS form.
  • Enable CSS syntax highlighting to improve readability.
  • Provide basic CSS validation/linting to help prevent invalid rules.
  • Ensure all editor assets (JS/CSS) are loaded only on module-specific admin forms to avoid performance impact.

Technical Notes

  • Use a custom library declared in critical_css_ui.libraries.yml.
  • Attach the editor conditionally in the form alter/build method.
  • Consider using CodeMirror 6 (or similar) modules for minimal footprint.

Acceptance Criteria

  • Critical CSS fields display CodeMirror (or similar) with syntax highlighting.
  • Linting highlights errors without blocking form submission.
  • No editor assets load outside the module’s configuration pages.
  • The implementation follows Drupal coding standards and asset-loading best practices.

Issue fork critical_css_ui-3558239

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

diegodz created an issue. See original summary.

diegodz’s picture

diegodz commented

I was considering integrating a CSS validator, specifically using CodeMirror. However, I ran into several problems. Since critical CSS is often reduced to a single line, the validator doesn't parse it correctly. It also doesn't recognize some `--webkit` rules necessary for browser compatibility.

Therefore, the integration generates false positives and blocks valid CSS.

This task will only cover the syntax highlighting integration; we'll leave the validator for a future project and release a beta version with this feature.

sergeydruua made their first commit to this issue’s fork.

sergeydruua’s picture

sergeydruua commented
Status: Active » Needs review

Integrated CodeMirror for syntax highlighting. Implementation details: Added critical_css_ui.libraries.yml using CDN version of CodeMirror (to keep the module lightweight as requested). Added js/critical-css-editor.js to initialize the editor on specific textareas. Implemented hook_form_alter in .module file to attach the library and class to the Config form and Entity forms. No validation implemented in this step (syntax highlighting only). Tested manually: Textareas are correctly converted to CodeMirror instances with CSS mode enabled.

sergeydruua opened merge request !4