Replace linaria with ecij

.github/dependabot.yml

@@ -11,13 +11,6 @@ updates:
         patterns:
           - 'react'
           - 'react-dom'
-      babel:
-        patterns:
-          - '@babel/*'
-      linaria:
-        patterns:
-          - '@linaria/*'
-          - '@wyw-in-js/*'
       typescript-eslint:
         patterns:
           - '@typescript-eslint/*'

.prettierignore

@@ -1,2 +1 @@
-package.json
 /website/routeTree.gen.ts

.prettierrc.json → .prettierrc

@@ -9,7 +9,7 @@
     "^react-dom",
     "^react",
     "<THIRD_PARTY_MODULES>",
-    "^@linaria/core$",
+    "^ecij$",
     "^clsx$",
     "",
     "./src",

.vscode/settings.json

@@ -4,9 +4,6 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "[javascript][json][jsonc][css]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.readonlyInclude": {

package.json

@@ -51,27 +51,24 @@
     "postpublish": "git push --follow-tags origin HEAD"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.5",
     "@eslint-react/eslint-plugin": "^2.0.2",
     "@eslint/markdown": "^7.3.0",
     "@faker-js/faker": "^10.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.6.2",
-    "@linaria/core": "^6.3.0",
     "@tanstack/react-router": "^1.132.31",
     "@tanstack/router-plugin": "^1.132.31",
     "@types/node": "^24.8.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
-    "@vitejs/plugin-react": "5.0.2",
+    "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.1",
     "@vitest/coverage-istanbul": "^4.0.1",
     "@vitest/eslint-plugin": "^1.3.4",
-    "@wyw-in-js/rollup": "^0.8.0",
-    "@wyw-in-js/vite": "^0.8.0",
     "clsx": "^2.1.1",
+    "ecij": "^0.1.1",
     "eslint": "^9.36.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
@@ -85,10 +82,10 @@
     "prettier": "3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "rolldown": "^1.0.0-beta.33",
-    "rolldown-plugin-dts": "^0.17.1",
+    "rolldown": "^1.0.0-beta.50",
+    "rolldown-plugin-dts": "^0.17.7",
     "typescript": "~5.9.2",
-    "vite": "npm:rolldown-vite@^7.1.3",
+    "vite": "npm:rolldown-vite@^7.2.5",
     "vitest": "^4.0.1",
     "vitest-browser-react": "^2.0.2"
   },

rolldown.config.ts

@@ -1,5 +1,5 @@
 import { isAbsolute } from 'node:path';
-import wyw from '@wyw-in-js/rollup';
+import { ecij } from 'ecij/plugin';
 import { defineConfig } from 'rolldown';
 import { dts } from 'rolldown-plugin-dts';
 
@@ -10,22 +10,19 @@ export default defineConfig({
   output: {
     dir: 'lib',
     cssEntryFileNames: 'styles.css',
-    sourcemap: true
+    sourcemap: true,
+    cleanDir: true
   },
   platform: 'browser',
   external: (id) => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
+    ecij({
+      // We add the package version as prefix to avoid style conflicts
+      // between multiple versions of RDG on the same page
+      classPrefix: `rdg-${pkg.version.replaceAll('.', '-')}-`
+    }),
     dts({
       tsconfig: './tsconfig.lib.json'
-    }),
-    wyw({
-      exclude: ['**/*.d.ts'],
-      preprocessor: 'none',
-      classNameSlug(hash) {
-        // We add the package version as suffix to avoid style conflicts
-        // between multiple versions of RDG on the same page.
-        return `${hash}${pkg.version.replaceAll('.', '-')}`;
-      }
     })
   ]
 });

src/Cell.tsx

@@ -1,5 +1,5 @@
 import { memo, type MouseEvent } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { useRovingTabIndex } from './hooks';
 import { createCellEvent, getCellClassname, getCellStyle, isCellEditableUtil } from './utils';

src/EditCell.tsx

@@ -1,5 +1,5 @@
 import { useEffectEvent, useLayoutEffect, useRef } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { createCellEvent, getCellClassname, getCellStyle, onEditorNavigation } from './utils';
 import type {

src/GroupRow.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { RowSelectionContext, type RowSelectionContextValue } from './hooks';
 import { classnames, getRowStyle } from './utils';

src/HeaderCell.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { useRovingTabIndex } from './hooks';
 import {

src/HeaderRow.tsx

@@ -1,5 +1,5 @@
 import { memo, useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { classnames, getColSpan } from './utils';
 import type { CalculatedColumn, Direction, Maybe, Position, ResizedWidth } from './types';

src/SummaryCell.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { useRovingTabIndex } from './hooks';
 import { getCellClassname, getCellStyle } from './utils';

src/SummaryRow.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { classnames, getColSpan, getRowStyle } from './utils';
 import type { RenderRowProps } from './types';

src/cellRenderers/renderCheckbox.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderCheckboxProps } from '../types';
 

src/cellRenderers/renderToggleGroup.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderGroupCellProps } from '../types';
 

src/editors/renderTextEditor.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderEditCellProps } from '../types';
 

src/renderHeaderCell.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderHeaderCellProps } from './types';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';

src/sortStatus.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderSortIconProps, RenderSortPriorityProps, RenderSortStatusProps } from './types';
 

src/style/cell.ts

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 export const cell = css`
   @layer rdg.Cell {

src/style/core.ts

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { cell } from './cell';
 import { bottomSummaryRowClassname, row, topSummaryRowClassname } from './row';

src/style/row.ts

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 export const row = css`
   @layer rdg.Row {

src/utils/renderMeasuringCells.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { CalculatedColumn } from '../types';
 

test/browser/utils.tsx

@@ -1,5 +1,5 @@
 import { page, userEvent, type Locator } from 'vitest/browser';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid } from '../../src';
 import type { DataGridProps } from '../../src';

vite.config.ts

@@ -1,7 +1,7 @@
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
 import { playwright } from '@vitest/browser-playwright';
-import wyw from '@wyw-in-js/vite';
+import { ecij } from 'ecij/plugin';
 import { defineConfig, type ViteUserConfig } from 'vitest/config';
 import type { BrowserCommand } from 'vitest/node';
 
@@ -64,7 +64,7 @@ const scrollGrid: BrowserCommand<[{ scrollLeft?: number; scrollTop?: number }]>
 const viewport = { width: 1920, height: 1080 } as const;
 
 export default defineConfig(
-  ({ command, isPreview }): ViteUserConfig => ({
+  ({ isPreview }): ViteUserConfig => ({
     base: '/react-data-grid/',
     cacheDir: '.cache/vite',
     clearScreen: false,
@@ -76,6 +76,7 @@ export default defineConfig(
       cssMinify: 'esbuild'
     },
     plugins: [
+      ecij(),
       (!isTest || isPreview) &&
         tanstackRouter({
           target: 'react',
@@ -85,12 +86,7 @@ export default defineConfig(
           verboseFileRoutes: false
         }),
       react({
-        exclude: ['./.cache/**/*']
-      }),
-      wyw({
-        exclude: ['./.cache/**/*', '**/*.d.ts', '**/*.gen.ts'],
-        preprocessor: 'none',
-        displayName: command === 'serve'
+        exclude: ['./.cache/**/*', './node_modules/**/*', './website/routeTree.gen.ts']
       })
     ],
     server: {

website/Nav.tsx

@@ -1,6 +1,6 @@
 import { useId, useState } from 'react';
 import { Link } from '@tanstack/react-router';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { Direction } from '../src/types';
 import { startViewTransition } from './utils';

website/components/CellExpanderFormatter.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 const cellExpandClassname = css`
   block-size: 100%;

website/components/ChildRowDeleteButton.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 const childRowActionCrossClassname = css`
   block-size: 100%;

website/components/DraggableCellRenderer.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 import clsx from 'clsx';
 
 import { Cell, type CellRendererProps } from '../../src';

website/routes/AllFeatures.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 import clsx from 'clsx';
 
 import { DataGrid, renderTextEditor, SelectColumn } from '../../src';

website/routes/Animation.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';

website/routes/ColumnSpanning.tsx

@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { renderCoordinates } from '../renderers';

website/routes/CommonFeatures.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useRef, useState } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import {
   DataGrid,

website/routes/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';

website/routes/CustomizableRenderers.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { Row as BaseRow, Cell, DataGrid, renderTextEditor, SelectColumn } from '../../src';
 import type {

website/routes/HeaderFilters.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column, type RenderHeaderCellProps } from '../../src';
 import type { Omit } from '../../src/types';

website/routes/InfiniteScrolling.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';

website/routes/MasterDetail.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column, type Direction, type RowsChangeData } from '../../src';
 import { CellExpanderFormatter } from '../components';

website/routes/NoRows.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, SelectColumn, type Column } from '../../src';
 import { useDirection } from '../directionContext';

website/routes/RowGrouping.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { SelectColumn, TreeDataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';

website/routes/ScrollToCell.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 import clsx from 'clsx';
 
 import { DataGrid, type Column, type DataGridHandle } from '../../src';

website/routes/TreeView.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useReducer, useState } from 'react';
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { CellExpanderFormatter, ChildRowDeleteButton } from '../components';