Skip to content

mashrulhaque/css-class-fold-plus-plugin

BranchesTags

Repository files navigation

CSS Class Fold Plus

Tame your Tailwind. Declutter your templates.

A JetBrains IDE plugin that intelligently folds CSS class attributes, transforming walls of utility classes into clean, readable code.

The Problem

Modern utility-first CSS frameworks like Tailwind are powerful, but they come with a cost:

<!-- Before: Visual noise everywhere -->
<div class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
  <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    Click me
  </button>
</div>

The Solution

<!-- After: Clean and focused -->
<div class="‥ c(15)">
  <button class="‥ c(12)">
    Click me
  </button>
</div>

One keystroke. Instant clarity.

Features

Core Folding

  • Smart Folding - Collapses class attributes showing a compact badge: "‥ c(12)" for 12 classes
  • Class Count Threshold - Only fold when class count exceeds a configurable minimum (default: 5)
  • Line Length Threshold - Only fold when class attribute length exceeds a maximum (default: 80 characters)
  • Partial Folding - Show first N classes with remaining count: "flex items-center ‥ c(10)"
  • Category Summary - Show Tailwind category breakdown: "‥ [layout: 3, spacing: 4, typography: 2]"

Code Quality Inspections

  • Duplicate Class Detection - Warns when the same class appears multiple times with quick-fix to remove duplicates
  • Conflicting Class Detection - Warns when conflicting Tailwind classes are used together (e.g., text-left and text-right) with quick-fix to resolve
  • Badge Indicators - Placeholder shows duplicate count d(2) and conflict count x(1) when issues exist

Hover Tooltips

  • Full Class Preview - See the complete class list by hovering over collapsed regions
  • Color Swatches - Visual color indicators for Tailwind color classes (bg-red-500, text-blue-300, etc.)
  • Conflict Highlighting - Conflicting classes are highlighted in red with descriptions
  • Category Grouping - Classes grouped by Tailwind category in tooltip when sorting by category

Class Sorting

  • Keep Original Order - Preserve the order as written in code
  • Sort Alphabetically - Sort classes A-Z
  • Sort by Tailwind Category - Group by category (Layout, Flexbox & Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Transitions, Transforms, Interactivity, Accessibility)

Workflow Features

  • One-Key Toggle - Expand/collapse all with a single shortcut
  • Auto-Collapse on File Open - Automatically collapse all class folds when opening files
  • Remember Fold State - Persist fold states across IDE sessions per file
  • Copy Classes to Clipboard - Right-click context menu to copy classes in various formats
  • File Type Control - Enable or disable folding per file type

Developer Experience

  • Multi-Framework Support - Works with HTML, React, Vue, and Angular
  • Always Available - Works even during IDE indexing (DumbAware)
  • Project-Level Settings - Override application settings per project

Supported Frameworks

Framework Attribute Patterns
HTML/CSS class
React className
Vue :class, v-bind:class
Angular [ngClass], [class], ng-class

Supported File Types

  • HTML
  • XHTML
  • XML
  • JSX (React)
  • TSX (TypeScript + React)
  • Vue Single File Components

Installation

From JetBrains Marketplace

  1. Open your JetBrains IDE (IntelliJ IDEA, WebStorm, PhpStorm, etc.)
  2. Go to Settings → Plugins → Marketplace
  3. Search for "CSS Class Fold Plus"
  4. Click Install and restart your IDE

Manual Installation

  1. Download the latest .zip from Releases
  2. Go to Settings → Plugins → ⚙️ → Install Plugin from Disk...
  3. Select the downloaded .zip file
  4. Restart your IDE

Usage

Keyboard Shortcut

Platform Shortcut
Windows / Linux Ctrl + Shift + C
macOS Cmd + Shift + C

Menu Access

Code → Toggle CSS Class Folding

Context Menu

Right-click on a collapsed class region → Copy CSS Classes to copy in various formats:

  • Space-separated
  • Newline-separated
  • Sorted (space-separated)
  • Sorted (newline-separated)
  • By Tailwind category (with comments)

Settings

  • Application Settings: Settings → Editor → CSS Class Fold Plus
  • Project Settings: Settings → Editor → CSS Class Fold Plus (Project)

How It Works

  1. Open any supported file with CSS class attributes
  2. Press the shortcut to collapse all class attributes
  3. Press again to expand all class attributes
  4. Individual folds can be toggled by clicking the fold gutter
  5. Hover over collapsed regions to preview the full class list

Configuration

Access settings via Settings → Editor → CSS Class Fold Plus

Smart Collapse Threshold

Only fold class attributes that exceed a minimum class count.

  • Enable threshold: Toggle threshold-based folding
  • Minimum classes to fold: Set the threshold (default: 5)

Line Length Threshold

Only fold class attributes that exceed a maximum character length.

  • Enable line length threshold: Toggle length-based folding
  • Maximum line length: Set the maximum (default: 80)

Partial Folding

Show the first N classes in the placeholder instead of hiding all classes.

  • Enable partial folding: Toggle partial folding mode
  • Number of visible classes: How many classes to show (default: 2)

Example: "flex items-center ‥ c(10)"

Category Summary

Show Tailwind category breakdown in the placeholder instead of just class count.

  • Enable category summary: Toggle category summary mode
  • Maximum categories to show: Limit displayed categories (default: 3)

Example: "‥ [layout: 3, spacing: 4, typography: 2]"

Class Sorting

Control how classes are ordered in the hover tooltip and partial folding preview.

  • Keep original order: Preserve the order as written in code
  • Sort alphabetically: Sort classes A-Z
  • Sort by Tailwind category: Group by category

Hover Preview

  • Show full class list in tooltip on hover: Enable/disable the hover tooltip feature
  • Show color swatches for Tailwind classes: Display visual color indicators for color utilities

Duplicate Detection

  • Enable duplicate class detection: Highlight duplicate classes as warnings
  • Show duplicate count in placeholder: Display d(N) badge when duplicates exist

Conflict Detection

  • Enable conflicting class detection: Highlight conflicting Tailwind classes as warnings
  • Show conflict count in placeholder: Display x(N) badge when conflicts exist

Detected conflict types include:

  • Display properties (block, flex, grid, hidden)
  • Position properties (static, absolute, relative, fixed, sticky)
  • Text alignment (text-left, text-center, text-right)
  • Flex direction (flex-row, flex-col)
  • Font weight (font-thin through font-black)
  • And 30+ other conflict groups

Auto-Collapse

  • Auto-collapse on file open: Automatically collapse all CSS class folds when opening files
  • Remember fold state: Persist which folds are collapsed/expanded across IDE sessions

Enabled File Types

Enable or disable folding for specific file types:

  • HTML
  • XHTML
  • XML
  • JSX
  • TSX
  • Vue

Project-Level Overrides

Each project can override application-level settings:

  1. Go to Settings → Editor → CSS Class Fold Plus (Project)
  2. Enable "Override application settings for this project"
  3. Configure project-specific settings

Placeholder Format

The plugin uses a compact badge format for collapsed classes:

Badge Meaning
c(N) Total class count
d(N) Duplicate count (classes appearing more than once)
x(N) Conflict count (mutually exclusive classes)

Examples

<!-- Standard folding -->
<div class="‥ c(12)">

<!-- With duplicates -->
<div class="‥ c(12) d(2)">

<!-- With conflicts -->
<div class="‥ c(12) x(1)">

<!-- With both -->
<div class="‥ c(12) d(2) x(1)">

<!-- Partial folding (showing first 2 classes) -->
<div class="flex items-center ‥ c(12)">

<!-- Category summary -->
<div class="‥ [layout: 3, spacing: 4, dup: 1]">

Examples

React / JSX

// Expanded
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Submit
</button>

// Collapsed (standard)
<button className="‥ c(6)">
  Submit
</button>

// Collapsed (partial folding with 2 visible)
<button className="px-4 py-2 ‥ c(6)">
  Submit
</button>

Vue

<!-- Expanded -->
<div :class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-md">
  Content
</div>

<!-- Collapsed -->
<div :class="‥ c(7)">
  Content
</div>

Angular

<!-- Expanded -->
<span [ngClass]="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  Active
</span>

<!-- Collapsed -->
<span [ngClass]="‥ c(9)">
  Active
</span>

Tailwind Category Classification

Classes are grouped into categories based on their purpose:

Category Examples
Layout container, block, inline, hidden, absolute, relative, sticky, z-index, overflow
Flexbox & Grid flex, grid, gap, justify, items, content, self, order
Spacing p-, px-, py-, m-, mx-, my-, space-
Sizing w-, h-, min-w-, max-w-, min-h-, max-h-, size-
Typography font-, text-, tracking-, leading-, list-, decoration-, truncate
Backgrounds bg-, from-, via-, to-, gradient-
Borders border, rounded, outline-, ring-, divide-
Effects shadow, opacity-, mix-blend-, bg-blend-
Filters blur, brightness-, contrast-, grayscale, invert, saturate-
Transitions transition, duration-, ease-, delay-, animate-
Transforms scale-, rotate-, translate-, skew-, origin-, transform
Interactivity cursor-, caret-, pointer-events-, resize, scroll-, select-
Accessibility sr-only, not-sr-only

State variants like hover:, focus:, sm:, md:, etc. are stripped before categorization.

Color Swatches

The plugin recognizes all standard Tailwind CSS v3.x colors and displays visual swatches in tooltips:

  • Color families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
  • Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  • Prefixes: bg-, text-, border-, ring-, divide-, outline-, shadow-, accent-, caret-, fill-, stroke-, from-, via-, to-, decoration-

Requirements

  • IDE Version: IntelliJ IDEA 2024.1+ (build 241+)
  • JVM: Java 17+
  • Compatible IDEs: IntelliJ IDEA, WebStorm, PhpStorm, PyCharm, Rider, GoLand, RubyMine, CLion

FAQ

Can I fold classes in specific files only?

Yes! Go to Settings → Editor → CSS Class Fold Plus and enable/disable folding for specific file types (HTML, JSX, TSX, Vue, XML, XHTML).

Does this affect my code?

No. Folding is purely visual - your code remains unchanged. It's the same as the built-in code folding for methods and classes.

Why aren't my classes folding?

Make sure:

  • The file type is supported and enabled in settings
  • The attribute name matches a supported pattern (class, className, :class, etc.)
  • The class attribute has at least one class
  • If threshold is enabled, the class count meets the minimum
  • If line length threshold is enabled, the attribute length meets the maximum

Can I customize the placeholder text?

Yes! You can:

  • Enable partial folding to show the first N classes in the placeholder
  • Enable category summary to show Tailwind category breakdown
  • Change the sorting mode to control the order of classes shown

What's the difference between application and project settings?

Application settings apply globally to all projects. Project settings can override application settings for a specific project - useful when different projects have different conventions.

How does conflict detection work?

The plugin detects Tailwind classes that affect the same CSS property and shouldn't be used together. For example:

  • text-left text-right - Both set text-align
  • flex block - Both set display
  • absolute relative - Both set position

Conflicts are shown as warnings with quick-fixes to remove the conflicting class.

Development

Build from Source

# Clone the repository
git clone https://github.com/easyappdev/css-class-collapse.git
cd css-class-collapse

# Build the plugin
./gradlew build

# Run in a sandboxed IDE
./gradlew runIde

# Create distribution ZIP
./gradlew buildPlugin

# Verify plugin structure
./gradlew verifyPlugin

Project Structure

src/main/kotlin/com/easyappdev/csscolapse/
├── CssClassFoldingBuilder.kt         # Core folding logic and fold descriptors
├── CssClassFoldingHoverProvider.kt   # Hover tooltip functionality
├── CssClassFoldStateManager.kt       # Fold state persistence across sessions
├── CssCollapseConfigurable.kt        # Application-level settings UI
├── CssCollapseProjectConfigurable.kt # Project-level settings UI
├── CssCollapseSettings.kt            # Application-level settings service
├── CssCollapseProjectSettings.kt     # Project-level settings service
├── ConflictingClassInspection.kt     # Conflicting class detection inspection
├── DuplicateClassInspection.kt       # Duplicate class detection inspection
├── TailwindClassifier.kt             # Tailwind category classification & conflict detection
├── TailwindColorExtractor.kt         # Color extraction for swatches
├── ToggleCssClassFoldingAction.kt    # Toggle action handler
└── CopyClassesToClipboardAction.kt   # Copy classes context menu action

src/main/resources/META-INF/
└── plugin.xml                        # Plugin configuration and registrations

Technical Details

  • IntelliJ Platform SDK: 2.1.0
  • Target Platform: IntelliJ IDEA Community 2024.1
  • Kotlin: 1.9.25
  • JVM Target: 17
  • Minimum IDE Build: 241

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT License - see LICENSE for details.

Credits

Built with care by EasyAppDev.com

Stop scrolling sideways. Start shipping faster.

About

No description or website provided.

Topics

css kotlin intellij-plugin developer-tools ide-plugin

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages