Replace linaria with ecij (#3911)

nstepien · web-flow · commit 96fb00dccb6b · 2025-11-17T18:50:54.000Z
* Replace linaria with ecis

* ecis -&gt; ecij

* format
diff --git a/.github/dependabot.yml b/.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/*'
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1 @@
-package.json
 /website/routeTree.gen.ts
diff --git a/.prettierrc b/.prettierrc
@@ -9,7 +9,7 @@
     "^react-dom",
     "^react",
     "<THIRD_PARTY_MODULES>",
-    "^@linaria/core$",
+    "^ecij$",
     "^clsx$",
     "",
     "./src",
diff --git a/.vscode/settings.json b/.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": {
diff --git a/babel.config.json b/babel.config.json
diff --git a/package.json b/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"
   },
diff --git a/rolldown.config.ts b/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('.', '-')}`;
-      }
     })
   ]
 });
diff --git a/src/Cell.tsx b/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';
diff --git a/src/EditCell.tsx b/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 {
diff --git a/src/GroupRow.tsx b/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';
diff --git a/src/HeaderCell.tsx b/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 {
diff --git a/src/HeaderRow.tsx b/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';
diff --git a/src/SummaryCell.tsx b/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';
diff --git a/src/SummaryRow.tsx b/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';
diff --git a/src/cellRenderers/renderCheckbox.tsx b/src/cellRenderers/renderCheckbox.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderCheckboxProps } from '../types';
 
diff --git a/src/cellRenderers/renderToggleGroup.tsx b/src/cellRenderers/renderToggleGroup.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderGroupCellProps } from '../types';
 
diff --git a/src/editors/renderTextEditor.tsx b/src/editors/renderTextEditor.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderEditCellProps } from '../types';
 
diff --git a/src/renderHeaderCell.tsx b/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';
diff --git a/src/sortStatus.tsx b/src/sortStatus.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { RenderSortIconProps, RenderSortPriorityProps, RenderSortStatusProps } from './types';
 
diff --git a/src/style/cell.ts b/src/style/cell.ts
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 export const cell = css`
   @layer rdg.Cell {
diff --git a/src/style/core.ts b/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';
diff --git a/src/style/row.ts b/src/style/row.ts
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 export const row = css`
   @layer rdg.Row {
diff --git a/src/utils/renderMeasuringCells.tsx b/src/utils/renderMeasuringCells.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 import type { CalculatedColumn } from '../types';
 
diff --git a/test/browser/utils.tsx b/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';
diff --git a/vite.config.ts b/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: {
diff --git a/website/Nav.tsx b/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';
diff --git a/website/components/CellExpanderFormatter.tsx b/website/components/CellExpanderFormatter.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 const cellExpandClassname = css`
   block-size: 100%;
diff --git a/website/components/ChildRowDeleteButton.tsx b/website/components/ChildRowDeleteButton.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css } from 'ecij';
 
 const childRowActionCrossClassname = css`
   block-size: 100%;
diff --git a/website/components/DraggableCellRenderer.tsx b/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';
diff --git a/website/routes/AllFeatures.tsx b/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';
diff --git a/website/routes/Animation.tsx b/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';
diff --git a/website/routes/ColumnSpanning.tsx b/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';
diff --git a/website/routes/CommonFeatures.tsx b/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,
diff --git a/website/routes/ContextMenu.tsx b/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';
diff --git a/website/routes/CustomizableRenderers.tsx b/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 {
diff --git a/website/routes/HeaderFilters.tsx b/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';
diff --git a/website/routes/InfiniteScrolling.tsx b/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';
diff --git a/website/routes/MasterDetail.tsx b/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';
diff --git a/website/routes/NoRows.tsx b/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';
diff --git a/website/routes/RowGrouping.tsx b/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';
diff --git a/website/routes/ScrollToCell.tsx b/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';
diff --git a/website/routes/TreeView.tsx b/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';
diff --git a/website/routes/__root.tsx b/website/routes/__root.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-package.json`
`2`	`1`	`/website/routeTree.gen.ts`