test(v4): add @reference support verification

[colinaaa]

This PR adds test cases to verify that the @reference directive works correctly in both standalone CSS and CSS Modules, ensuring theme variables are available without duplicate CSS output.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the testing infrastructure by adding comprehensive verification for the @reference directive. The changes ensure that theme variables are correctly integrated and applied across different CSS contexts, including CSS Modules, preventing styling inconsistencies and redundant CSS output. The new tests validate that the plugin correctly processes these directives, leading to more robust and predictable styling behavior.

Highlights

• New Test Suite for @reference Directive: Introduced a dedicated test suite (test/at-reference) to thoroughly verify the functionality of the @reference directive within both standalone CSS and CSS Modules contexts. This ensures theme variables are correctly applied without generating duplicate CSS.
• CSS Modules Integration: Demonstrated and tested the use of @reference within CSS Modules (App.module.css and Button.module.css) to import theme variables, allowing them to be consumed via @apply for consistent styling.
• Theme Variable Verification: Added assertions in Playwright tests to confirm that custom theme variables defined in theme.css files are correctly resolved and applied to elements, specifically checking background colors.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• test/at-reference/index.test.ts
  • Added a new Playwright test file to verify the @reference directive's functionality within CSS modules, asserting correct application of theme variables.
• test/at-reference/src/App.module.css
  • Added a new CSS module that utilizes the @reference directive to import theme.css and applies a custom brand color using @apply.
• test/at-reference/src/index.js
  • Added a new JavaScript entry point to render a div element and apply the styles from App.module.css for testing purposes.
• test/at-reference/src/theme.css
  • Added a new theme CSS file defining a custom brand color variable (--color-custom-brand) to be referenced by other CSS files.
• test/css-modules/index.test.ts
  • Updated an existing Playwright test to include an additional assertion, verifying the background color applied via @apply in a CSS module.
• test/css-modules/src/components/Button.module.css
  • Modified an existing CSS module to include an @reference to theme.css and apply a background color using @apply.
• test/css-modules/src/theme.css
  • Added a new theme CSS file defining a button background color variable (--color-btn-bg) for use in CSS modules.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request adds test cases to verify the @reference directive in CSS and CSS Modules. The changes are well-structured and add valuable test coverage. I've suggested one improvement to make the new test more robust by ensuring the test server is always shut down, even if assertions fail.