Skip to content

fix: correctly handle CSS layers#123

Merged
danielroe merged 1 commit intodanielroe:mainfrom
alan-agius4:layers
Apr 7, 2025
Merged

fix: correctly handle CSS layers#123
danielroe merged 1 commit intodanielroe:mainfrom
alan-agius4:layers

Conversation

@alan-agius4
Copy link
Copy Markdown
Collaborator

@alan-agius4 alan-agius4 commented Apr 7, 2025

Prior to this commit layers where not being handled correctly

Description by Callstackai

This PR fixes the handling of CSS layers by updating the condition for font-face rules and adding tests for at-rules with layers.

Diagrams of code changes
sequenceDiagram
    participant Test
    participant Beasties
    participant CSSProcessor
    
    Test->>Beasties: process(HTML with stylesheet)
    Note over Beasties: Configure with reduceInlineStyles: false
    
    Beasties->>CSSProcessor: Process CSS rules
    
    alt @layer rule encountered
        CSSProcessor-->>CSSProcessor: Preserve @layer rules
        Note over CSSProcessor: Keep @layer declarations<br/>in first pass
    end
    
    CSSProcessor-->>Beasties: Return processed CSS
    Beasties-->>Test: Return HTML with<br/>preserved @layer rules
Loading
Files Changed
FileSummary
packages/beasties/src/index.tsUpdated the condition to handle CSS layers correctly in the Beasties class.
packages/beasties/test/__snapshots__/beasties.test.ts.snapAdded a snapshot for the new test case that checks handling of at-rules with layers.
packages/beasties/test/beasties.test.tsAdded a test case to verify the correct processing of at-rules with layers.

This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions .ts, .snap. See list of supported languages.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 7, 2025

Walkthrough

This pull request expands the CSS rule processing logic in the Beasties class by adjusting the condition within the processStyle method. The update now retains both @font-face and @layer rules for later handling. Additionally, a new test case has been introduced to validate that the inclusion of @layer rules works as intended, ensuring the correct output and that no warning logs are produced during processing.

Changes

File(s) Change Summary
packages/beasties/src/index.ts Updated the condition in the processStyle method to retain CSS at-rules where rule.name is either font-face or layer.
packages/beasties/test/beasties.test.ts Added a new test case to verify that CSS @layer at-rules are correctly processed, ensuring expected output and that no warnings occur.

Sequence Diagram(s)

sequenceDiagram
    participant Runner as Processing Engine
    participant Beasties
    Runner->>Beasties: Invoke processStyle(rule)
    alt rule.type is 'atrule'
        alt rule.name is 'font-face' or rule.name is 'layer'
            Beasties->>Runner: Retain rule for later processing
        else
            Beasties->>Runner: Skip rule for inline processing
        end
    else
        Beasties->>Runner: Process rule normally
    end
Loading

Assessment against linked issues

Objective Addressed Explanation
Retain CSS layer ordering in inline critical CSS (#30031)

Suggested reviewers

  • danielroe

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8b5664b and 20e1b07.

⛔ Files ignored due to path filters (1)
  • packages/beasties/test/__snapshots__/beasties.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • packages/beasties/src/index.ts (1 hunks)
  • packages/beasties/test/beasties.test.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/beasties/src/index.ts
🧰 Additional context used
🧬 Code Definitions (1)
packages/beasties/test/beasties.test.ts (2)
packages/beasties/src/index.d.ts (2)
  • Logger (66-72)
  • Beasties (17-43)
packages/beasties/src/index.ts (1)
  • Beasties (33-688)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: test (windows-latest)
  • GitHub Check: test (ubuntu-latest)
🔇 Additional comments (1)
packages/beasties/test/beasties.test.ts (1)

302-347: Well-structured test case for CSS @layer support.

This test case thoroughly validates the handling of CSS @layer rules. The test ensures that:

  1. Multiple layer types (layer order declaration and layer blocks) are properly handled
  2. Only CSS rules relevant to elements in the HTML are included in the output
  3. The layer structure is preserved in the generated output
  4. No warning logs are produced during processing

The implementation follows the same pattern as other tests in the suite and provides good coverage for this feature.

✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Apr 7, 2025

CodSpeed Performance Report

Merging #123 will not alter performance

Comparing alan-agius4:layers (20e1b07) with main (032f2ba)

Summary

✅ 9 untouched benchmarks

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 7, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.25%. Comparing base (032f2ba) to head (20e1b07).
⚠️ Report is 165 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #123      +/-   ##
==========================================
+ Coverage   85.01%   85.25%   +0.23%     
==========================================
  Files           8        8              
  Lines        1275     1275              
  Branches      301      302       +1     
==========================================
+ Hits         1084     1087       +3     
+ Misses        191      188       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@alan-agius4 alan-agius4 marked this pull request as ready for review April 7, 2025 07:37
@alan-agius4 alan-agius4 requested a review from danielroe April 7, 2025 07:37
Prior to this commit layers where not being handled correctly
@danielroe danielroe merged commit fbb8326 into danielroe:main Apr 7, 2025
9 checks passed
@alan-agius4 alan-agius4 deleted the layers branch April 7, 2025 12:27
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.

3 participants