Skip to content

Conversation

@arif891
Copy link

@arif891 arif891 commented Dec 27, 2025

Enhance CSS Parsing with Modern Features and Improved Regex Patterns

Overview

This pull request significantly upgrades the CSS language parsing logic to support a wide range of modern CSS features and syntax. The improvements include more robust and accurate regular expressions, expanded keyword and value recognition, and better handling of advanced CSS constructs. The changes are demonstrated and validated with an updated and comprehensive test.css example file.


Key Changes

1. Expanded CSS Test Coverage

  • The examples/languages/test.css file now includes:
    • Modern at-rules: @layer, @property, @counter-style, @namespace, @font-face, @supports, @container, @custom-media, @view-transition, etc.
    • Advanced selectors: :is(), :where(), :has(), :not(), :focus-visible, etc.
    • Cascade layers, container queries, and feature queries.
    • Logical properties, math and color functions, relative colors, and trigonometric functions.
    • Scroll-driven animations, subgrid, advanced grid, scroll snap, and more.
    • Complex backgrounds, masks, blend modes, and text styling.
    • Demonstrates real-world, modern CSS usage for thorough parser validation.

2. Improved Regex Patterns in CSS Parser

  • Comment Matching: Now supports both block (/* ... */) and single-line (// ...) comments.
  • String and URL Handling: Enhanced url() parsing to handle quoted and unquoted URLs robustly.
  • At-rule and Keyword Detection: Improved detection of at-rules (@...) and important keywords (!important).
  • Variable and Function Recognition:
    • CSS custom properties (--var) and property names before colons.
    • Function names and color functions are more accurately matched.
  • Number and Unit Parsing:
    • Supports all modern CSS units (e.g., cqw, cqmin, dvw, svh, etc.).
    • Handles negative numbers and decimals.
  • Boolean and Value Keywords:
    • Recognizes a comprehensive set of CSS keywords (e.g., auto, inherit, block, flex, grid, etc.).
  • Selector and Type Matching:
    • Improved matching for classes, IDs, pseudo-classes/elements, and tag names.
    • Handles advanced selector syntax and nesting.

3. Parser Structure Enhancements

  • Modularized and clarified the parser rules for easier maintenance and extension.
  • Added comments and improved sub-tokenization for complex constructs.

Benefits

  • Modern CSS Support: Enables parsing and highlighting of the latest CSS features, ensuring future-proof syntax support.
  • Accuracy: Reduces false positives/negatives in syntax highlighting and parsing.
  • Maintainability: Cleaner, more modular regex rules make future updates easier.
  • Comprehensive Testing: The new test.css file serves as a robust testbed for parser validation.

Testing

  • All changes are covered by the updated test.css file, which exercises the full range of supported CSS features.
  • Manual inspection confirms correct parsing and highlighting for all modern CSS constructs.

Backward Compatibility

  • The parser remains compatible with legacy CSS syntax.
  • No breaking changes for existing CSS files or features.

Related Issues

  • Addresses requests for modern CSS support and improved syntax highlighting.
  • Lays groundwork for future enhancements (e.g., CSS nesting, custom properties, advanced selectors).

Please review the changes and provide feedback or suggestions for further improvements.

@arif891
Copy link
Author

arif891 commented Jan 15, 2026

@matubu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant