Skip to content

WIP: Add custom css class from config files to completion #1425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

felix-droese
Copy link

@felix-droese felix-droese commented Jul 27, 2025

This PR is WIP and not ready yet!

What this PR tries do do

In our tailwind v4 project, we define custom classes in our projects css config file ./resources/css/main.css.
This PR aims to provide the custom classes for the language servers completion list and also provide hover functionality.

Example

in ./resources/css/main.css:

.typography-h3 {
        font-family: Montserrat;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 116.7%; /* 56.016px */
    }

Added completion item:
image

Hover functionality:
image

- Implemented `scanCssFilesForCustomClasses` to extract custom CSS classes from specified CSS files.
- Enhanced `createProjectService` to scan for custom classes in project dependencies and main CSS config.
- Updated completion provider to include custom CSS classes in completion suggestions.
- Added tests for custom class extraction functionality.
- Introduced a new utility for identifying and extracting custom classes from CSS content.
- Enhanced the hover provider to return CSS rules for custom classes when hovered over.
- Implemented functionality to scan project directories for CSS files and include them in class completion.
- Added tests for hover functionality on custom classes to ensure accurate display of CSS rules.
- Improved error handling during project directory scanning for CSS files.
- Removed the CSS class scanning logic from the project service to streamline functionality.
- Deleted outdated hover tests for custom classes to improve test clarity and maintainability.
- Enhanced error handling and logging during project directory scanning for CSS files.
@felix-droese felix-droese marked this pull request as draft July 27, 2025 12:57
@felix-droese felix-droese changed the title Add custom css class from config files to completion WIP: Add custom css class from config files to completion Jul 27, 2025
@thecrypticace thecrypticace self-assigned this Jul 28, 2025
@thecrypticace
Copy link
Contributor

thecrypticace commented Jul 28, 2025

I had a WIP of this in https://github.com/tailwindlabs/tailwindcss-intellisense/tree/feat/custom-class-suggestions but it was too slow.

I was going to make this feature v4 only and then add an API in that gave me the AST back so the extra parsing / caching / whatever wasn't necessary. (but have not yet done that)

Can keep on with this PR but I may change some stuff if I get a new API in core.

@felix-droese
Copy link
Author

@thecrypticace

thanks for your insight.

How would you benchmark speed?
Should I proceed with this PR and approach or should we close it?

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.

2 participants