https://github.com/andcool-systems/css-linter
Next.Js CSS Module Linter
https://github.com/andcool-systems/css-linter
css linter nextjs rust
Last synced: 2 months ago
JSON representation
Next.Js CSS Module Linter
- Host: GitHub
- URL: https://github.com/andcool-systems/css-linter
- Owner: Andcool-Systems
- Created: 2025-03-03T17:44:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-03T19:01:20.000Z (over 1 year ago)
- Last Synced: 2025-03-03T19:36:16.695Z (over 1 year ago)
- Topics: css, linter, nextjs, rust
- Language: Rust
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 🎨 Next.js CSS Linter
A tool for seamless work with CSS modules in Next.js and React.
## 🔹 Key Features
- Detects unused CSS classes
- Finds undefined classes in `.tsx` files
- Enables quick navigation to CSS class definitions
- Provides autocomplete suggestions for CSS classes
- Displays CSS class content on hover
- Automatically extracts inline styles into CSS modules
## 🔹 Usage
Linting runs **on file save**, and warnings are displayed in the editor.
### ✂️ Extracting Inline Styles
1. Select the `style={{}}` prop in a JSX/TSX file.
2. Open the context menu and choose **"Extract inline styles into CSS module"**.
3. Select the CSS module where the styles should be moved.
4. Enter a name for the new CSS class and press **Enter**.
5. The inline styles will be converted into a CSS class and added to the selected module.
## 🔹 Ignoring Warnings
If a class is used correctly but still marked as unused, add a comment **above its declaration**:
```css
/* css-lint-disable-rule unused-class */
```
Alternatively, use the **Quick Fix** feature available in the editor.
---
📌 **by AndcoolSystems, March 4, 2025**