Code Quality enhancement part 2.4 #13

Closed
opened 2026-07-12 12:47:13 +00:00 by Pakobbix · 2 comments
Owner

I asked an LLM to look at the code quality. It gave me some pointers for enhancement. This is Part 2.4.

2.4 CSS Performance

Current state: 300KB single CSS file.

Optimization opportunities:

  • CSS minification: The CSS could be minified for production. SillyTavern loads extensions directly, but a minified version would reduce parse time.
  • CSS custom properties: Already using CSS variables (--rpg-bg, --rpg-accent, etc.) — good. Consider extending this pattern further to reduce theme-switching repaint costs.
I asked an LLM to look at the code quality. It gave me some pointers for enhancement. This is Part 2.4. ### 2.4 CSS Performance Current state: 300KB single CSS file. **Optimization opportunities:** - CSS minification: The CSS could be minified for production. SillyTavern loads extensions directly, but a minified version would reduce parse time. - CSS custom properties: Already using CSS variables (--rpg-bg, --rpg-accent, etc.) — good. Consider extending this pattern further to reduce theme-switching repaint costs.
ARIA self-assigned this 2026-07-12 12:47:28 +00:00
ARIA added the enhancement label 2026-07-12 12:47:28 +00:00
Collaborator

I'll work on this. Give me a moment to inspect the codebase and prepare the CSS optimizations.

I'll work on this. Give me a moment to inspect the codebase and prepare the CSS optimizations.
Collaborator

Done, Sir. PR opened: #14

What was implemented:

  1. CSS Minificationscripts/build-css.js now supports --minify flag. Pure JS minifier (no new deps) that strips comments, whitespace, and redundant characters. Reports reduction percentage. New npm script: npm run build:css:min

  2. Extended CSS Custom Properties — Refactored _08_themes.css:

    • Added theme-specific extended properties per theme (--rpg-content-bg, --rpg-header-text-shadow, --rpg-divider-bg, --rpg-thoughts-bg, etc.)
    • Replaced triple-theme selector duplication with single [data-theme] selectors — children inherit automatically
    • Reduced from 379 to ~220 lines

Results:

  • style.css: 305.4 KB → 293.9 KB (3.8% from refactoring alone)
  • Minified build: additional ~50%+ reduction
  • 9 new tests, all passing
Done, Sir. PR opened: https://gitea.zephyre.one/Pakobbix/rpg-companion-sillytavern/pulls/14 **What was implemented:** 1. **CSS Minification** — `scripts/build-css.js` now supports `--minify` flag. Pure JS minifier (no new deps) that strips comments, whitespace, and redundant characters. Reports reduction percentage. New npm script: `npm run build:css:min` 2. **Extended CSS Custom Properties** — Refactored `_08_themes.css`: - Added theme-specific extended properties per theme (`--rpg-content-bg`, `--rpg-header-text-shadow`, `--rpg-divider-bg`, `--rpg-thoughts-bg`, etc.) - Replaced triple-theme selector duplication with single `[data-theme]` selectors — children inherit automatically - Reduced from 379 to ~220 lines **Results:** - `style.css`: 305.4 KB → 293.9 KB (3.8% from refactoring alone) - Minified build: additional ~50%+ reduction - 9 new tests, all passing
Sign in to join this conversation.
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Pakobbix/rpg-companion-sillytavern#13