feat(styles)!: move optional package styles into their own packages

[ghiscoding]

Summary

Composite Editor, Custom Tooltip and Row Detail now ship their own SASS and CSS files. Their feature rules are no longer included in every @slickgrid-universal/common theme.

BREAKING CHANGE: if you use any of these packages, you must import their styles after your theme:

• @slickgrid-universal/composite-editor-component
• @slickgrid-universal/custom-tooltip-plugin
• @slickgrid-universal/row-detail-plugin

For SASS, load the theme and package styles in the same SCSS entry file, importing only the packages you use:

@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with ($slick-primary-color: green);
@use '@slickgrid-universal/composite-editor-component/dist/styles/sass/slick-composite-editor.scss';
@use '@slickgrid-universal/custom-tooltip-plugin/dist/styles/sass/slick-custom-tooltip.scss';
@use '@slickgrid-universal/row-detail-plugin/dist/styles/sass/slick-row-detail.scss';

CSS users can import the precompiled files matching their theme. For applications supporting CSS imports from JS/TS:

import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
import '@slickgrid-universal/composite-editor-component/dist/styles/css/slick-composite-editor-bootstrap.css';
import '@slickgrid-universal/custom-tooltip-plugin/dist/styles/css/slick-custom-tooltip-bootstrap.css';
import '@slickgrid-universal/row-detail-plugin/dist/styles/css/slick-row-detail-bootstrap.css';

Angular users can add these CSS files to the angular.json styles array or import them through their global stylesheet.

The Angular, Aurelia, React and Vue Row Detail plugins share the base Row Detail stylesheet. Add @slickgrid-universal/row-detail-plugin as a direct dependency when importing its styles.

Why

Common themes included styles for optional packages that users might not have installed. This extraction makes each common theme approximately 22KB smaller uncompressed when those packages are unused, while preserving SASS overrides, CSS variables and Dark Mode.

This also establishes a styling pattern for the upcoming Excel Formula and Column Formula features: users import styling for the optional features they use.

Applications using every optional package retain approximately the same uncompressed styling. Compressed sizes can increase or decrease depending on CSS ordering and duplication across application stylesheets.

Changes

• Common themes
  • Variable modules no longer emit CSS. Vendor and shared Dark Mode CSS are loaded through _theme-base*.scss.
  • Composite Editor, Custom Tooltip and Row Detail feature rules and applicable Dark Mode tokens moved into their packages.
  • SASS variable declarations remain in common so theme with (...) configuration continues to work.
  • SVG mixins were separated from the emitted animation CSS, allowing Row Detail to reuse them without duplicating global rules. Existing SVG utility exports remain available.
  • Shared modal/LongText helper styling and the Salesforce modified-cell token remain in common.
• Optional packages
  • Each package publishes SASS under dist/styles/sass and precompiled CSS for the default, Bootstrap, Fluent, Material and Salesforce themes under dist/styles/css.
  • Each package exports its styles and uses the shared build-package-styles.mjs script.
  • Full and lite themes use the same matching package stylesheet.
• Build
  • Root sass:bundle builds common first, followed by optional package styles.
  • Optional styles use the same browserslist, cssnano and autoprefixer configuration as common.
• Salesforce ZIP
  • Matching Composite Editor and Custom Tooltip CSS is inserted into every archived theme stylesheet.
  • Row Detail styling is excluded because the force bundle does not contain that plugin.
  • The insertion point remains li.hidden{ to preserve compression locality. If the marker is missing, styles are appended and a warning identifies the affected file.
  • Theme filenames remain unchanged.
• Demos and documentation
  • All six demos import the three optional stylesheets after their theme.
  • Added the Angular demo’s direct Row Detail dependency.
  • Updated shared and framework styling guides, Row Detail guides and the package README.
• Regression checks
  • Added 33 checks covering CSS isolation, theme configuration, Dark Mode, SVG utilities, package outputs, import order and Salesforce ZIP contents.

Validation

• All 33 styling regression checks passed across nine theme variants.
• Variable and SVG mixin modules emit no CSS.
• Package CSS contains no unrelated optional-package rules, vendor styles or global animations.
• Theme SASS overrides reach package styles, and configuring the theme after loading a package produces the documented Sass error.
• Salesforce values and Fluent Row Detail icons are preserved.
• The ZIP integration check confirms that every archived theme includes Composite Editor and Custom Tooltip styles while excluding Row Detail.
• The ZIP merge helper has 100% statement, branch, function and line coverage.
• TypeScript diagnostics, oxlint, targeted Prettier checks and circular dependency checks passed.

Production demo comparisons used identical JavaScript sources and build tools, with all optional styles included. Changes below are summed across generated CSS files, including lazy example chunks, compared with the pre-extraction commit:

Demo	Uncompressed CSS change	Gzip change	Brotli change
Vanilla	+34 B	+140 B	+65 B
Angular	+34 B	+635 B	+76 B
React	−68,381 B	−7,084 B	−6,638 B
Vue	−74,378 B	−7,580 B	−6,762 B
Aurelia	−3,650 B	+1,644 B	+166 B
React Fluent	−9 B	+523 B	−54 B

Raw JavaScript totals were unchanged. Framework comparisons loaded wrapper sources because compiled wrapper outputs were unavailable.

A controlled Salesforce ZIP comparison using the same JavaScript bundle and rebuilt styling assets measured 4,383 bytes smaller than the pre-extraction baseline (because Row Detail is not included in the Salesforce ZIP file).

Earlier branch validation passed pnpm build:universal, pnpm build, pnpm bundle:zip, the Angular demo build, the original plugin unit suites and Angular Cypress. The full build and Angular E2E suite have not been rerun after the Row Detail extraction.

Comments

• Separate SASS compilations cannot share theme overrides; theme and optional SASS imports must be in the same entry file.
• Compressed application size is not guaranteed to decrease when every optional feature is used. The demo measurements above show both increases and decreases.
• In watch mode, changing common SASS does not rebuild optional packages’ precompiled CSS. Demos compile from SASS and are unaffected.
• The Salesforce ZIP includes the bundled packages’ compiled CSS, but not their SASS sources.
• Losing the ZIP insertion marker preserves the styles through the append fallback, but can increase compressed size.

AI / LLM assistance

• AI / LLM assistance used:
  • No
  • Yes
• If Yes:
  • which tool/model: GitHub Copilot (Claude Opus 5.5) and OpenAI ChatGPT Astra
  • how was it used: design discussion, implementation, audit review, regression checks, build/ZIP size analysis and documentation

Checklist

• The changes are limited to only one scope.
• Tests were added or updated where appropriate.
• Documentation was updated where appropriate.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (c57b269) to head (b84f519).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2817   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         202      202           
  Lines       27472    27472           
  Branches     9588     9588           
=======================================
  Hits        27472    27472           

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	100.0% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/angular-slickgrid@2817

aurelia-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/aurelia-slickgrid@2817

slickgrid-react

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-react@2817

slickgrid-vue

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-vue@2817

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/angular-row-detail-plugin@2817

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/aurelia-row-detail-plugin@2817

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/react-row-detail-plugin@2817

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vue-row-detail-plugin@2817

@slickgrid-universal/binding

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/binding@2817

@slickgrid-universal/common

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/common@2817

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/composite-editor-component@2817

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-footer-component@2817

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-tooltip-plugin@2817

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/empty-warning-component@2817

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/event-pub-sub@2817

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/excel-export@2817

@slickgrid-universal/graphql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/graphql@2817

@slickgrid-universal/odata

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/odata@2817

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pagination-component@2817

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pdf-export@2817

@slickgrid-universal/row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/row-detail-plugin@2817

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/rxjs-observable@2817

@slickgrid-universal/sql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/sql@2817

@slickgrid-universal/text-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/text-export@2817

@slickgrid-universal/utils

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/utils@2817

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-bundle@2817

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-force-bundle@2817

@slickgrid-universal/web-mcp

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/web-mcp@2817

commit: b84f519