← Back to changelog

gp-grid v0.22.0

·GitHub release

This release moves the grid's CSS out of the JavaScript bundle. Until now the stylesheet lived inside @gp-grid/core as a template string — which a JS minifier cannot touch — and dist/styles.css was simply that string written to disk. The CSS is now authored as real .css files, bundled and minified with Lightning CSS, and no longer embedded in index.js. The sort Web Worker gets the same treatment: it is written in TypeScript and bundled + minified at build time instead of being maintained as a hand-written string.

Nothing changes for applications that import the stylesheet file, which has been the documented setup since v0.11.0.

What changed

  • @gp-grid/core index.js (minified) drops from 145 KB to 115 KB.
  • dist/styles.css is now minified: 25 KB → 17 KB. The wrappers still ship a copy at @gp-grid/react|vue|angular/dist/styles.css.
  • The inline sort worker script shrinks from 6.6 KB to 2.9 KB.
  • Fix: importing @gp-grid/core no longer assigns window.onmessage on the main thread (a leftover of the old worker bootstrap).

Breaking changes

The CSS is no longer exported as a JavaScript string:

  • gridStyles and the per-module strings variablesStyles, containerStyles, headerStyles, cellStyles, statesStyles, scrollbarStyles, filtersStyles and rowDragStyles are removed from @gp-grid/core.
  • gridStyles is removed from @gp-grid/vue.

Migration guide

If you injected the styles yourself, replace the string with the stylesheet import:

// Before
import { gridStyles } from "@gp-grid/core";

const style = document.createElement("style");
style.textContent = gridStyles;
document.head.appendChild(style);

// After — once, at the app entry point
import "@gp-grid/core/dist/styles.css";
// or the copy shipped by your wrapper:
// import "@gp-grid/react/dist/styles.css";
// import "@gp-grid/vue/dist/styles.css";
// import "@gp-grid/angular/dist/styles.css";

If you genuinely need the CSS as a string — for example to adopt it into a Shadow DOM with a constructable stylesheet — load the file as text with your bundler. With Vite:

import css from "@gp-grid/core/dist/styles.css?raw";

const sheet = new CSSStyleSheet();
sheet.replaceSync(css);
shadowRoot.adoptedStyleSheets = [sheet];

Everything else — class names, CSS variables and the :where()-based overridability described in the styling guides — is unchanged.