Migrate to css-in-js with linaria (#2256)

* Set up linaria * Move `@linaria/core` to dev deps * rm stylesheet import from the readme * simplify `@supports` selector * migrate all core styles * migrate row styles * Fix rowClass tests * migrate cell styles * fix lighten() * migrate editor styles * migrate header styles * migrate remaining styles, cleanups * rm `--no-dll` flags * rm remaining references to `tools/` * can't use lighten/darken, so let's use hsl instead * Augment the generated class names * migrate remaining story styles, rm less * unnecessary clsx * Fix tests * Move some styles to their respective component modules Co-authored-by: Aman Mahajan <[email protected]>
adazzle · Jan 21, 2021 · 253c626 · 253c626
1 parent 2e45f1c
commit 253c626
Show file tree

Hide file tree

Showing 60 changed files with 837 additions and 762 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
+/.linaria-cache
 /coverage
-/dist
 /lib
 /node_modules
 /storybook-static

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,10 +1,58 @@
 import 'core-js/stable';
-import '../style/index.less';
-import '../stories/index.less';
 import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
+import { css } from '@linaria/core';
 
 // @ts-expect-error
 if (typeof ResizeObserver === 'undefined') {
   // @ts-expect-error
   window.ResizeObserver = Polyfill;
 }
+
+css`
+:global() {
+  body,
+  html {
+    padding: 0 !important;
+    margin: 0 !important;
+    font-family: sans-serif;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100vh;
+    padding: 8px;
+  }
+
+  .rdg.fill-grid {
+    height: 100%;
+  }
+
+  .rdg.small-grid {
+    height: 300px;
+  }
+
+  .rdg.big-grid {
+    height: 600px;
+  }
+
+  :root {
+    @media (prefers-color-scheme: light) {
+      background-color: #fff;
+      color: #111;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      background-color: #111;
+      color: #fff;
+    }
+  }
+
+  .rdg-cell .Select {
+    max-height: 30px;
+    font-size: 12px;
+    font-weight: normal;
+  }
+}
+`;
diff --git a/.storybook/webpack.config.cjs b/.storybook/webpack.config.cjs
@@ -11,10 +11,13 @@ module.exports = function({ config, mode }) {
     use: [{
       loader: 'babel-loader',
       options: { cacheDirectory: !isProd }
+    }, {
+      loader: '@linaria/webpack-loader',
+      options: { sourceMap: !isProd },
     }]
   }, {
-    test: /\.less$/,
-    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
+    test: /\.css$/,
+    use: [MiniCssExtractPlugin.loader, 'css-loader']
   }];
 
   config.plugins.push(new MiniCssExtractPlugin({

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -191,6 +191,7 @@
   - ⚠️ the `rowKeyGetter` prop is now required for row selection.
   - ⚠️ `column.cellClass` does not affect header cells anymore.
   - ⚠️ `onScroll` will directly pass the UIEvent rather than the scrollLeft and scrollRight only.
+  - ⚠️ The stylesheets are now automatically injected, there is no stylsheet to manually import anymore.
 
 ## `master` to `alpha`
 - **Added:**

diff --git a/README.md b/README.md
@@ -104,7 +104,6 @@ See [documentation](https://github.com/rollup/plugins/tree/master/packages/babel
 
 ```jsx
 import DataGrid from 'react-data-grid';
-import 'react-data-grid/dist/react-data-grid.css';
 
 const columns = [
   { key: 'id', name: 'ID' },

diff --git a/babel.config.json b/babel.config.json
@@ -12,10 +12,11 @@
       ]
     }],
     ["@babel/react", { "runtime": "automatic" }],
-    "@babel/typescript"
+    "@babel/typescript",
+    "@linaria"
   ],
   "plugins": [
     ["@babel/transform-runtime", { "useESModules": true }],
-    "babel-plugin-optimize-clsx"
+    "optimize-clsx"
   ]
 }
diff --git a/package.json b/package.json
@@ -18,31 +18,25 @@
       "module": "./lib/bundle.js",
       "require": "./lib/bundle.cjs",
       "default": "./lib/bundle.js"
-    },
-    "./dist/": "./dist/"
+    }
   },
   "browser": "./lib/bundle.js",
   "main": "./lib/bundle.cjs",
   "module": "./lib/bundle.js",
   "types": "./lib/index.d.ts",
   "files": [
-    "dist",
     "lib"
   ],
-  "sideEffects": [
-    "*.css",
-    "*.less"
-  ],
+  "sideEffects": false,
   "scripts": {
-    "start": "start-storybook --quiet --no-dll -p 6006",
+    "start": "start-storybook --quiet -p 6006",
     "build": "rollup --config --no-stdin",
-    "postbuild": "node tools/buildStylesheets.js",
     "test": "jest",
     "test:watch": "jest --watch",
-    "eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test tools",
+    "eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test",
     "eslint:fix": "npm run eslint -- --fix",
     "typecheck": "tsc -p tsconfig.all.json",
-    "build-storybook": "build-storybook --quiet --no-dll",
+    "build-storybook": "build-storybook --quiet",
     "prepublishOnly": "npm install && npm run build && tsc",
     "postpublish": "git push --follow-tags origin HEAD"
   },
@@ -57,6 +51,11 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
     "@juggle/resize-observer": "^3.2.0",
+    "@linaria/babel-preset": "^3.0.0-beta.1",
+    "@linaria/core": "^3.0.0-beta.1",
+    "@linaria/rollup": "^3.0.0-beta.1",
+    "@linaria/shaker": "^3.0.0-beta.1",
+    "@linaria/webpack-loader": "^3.0.0-beta.1",
     "@popperjs/core": "^2.6.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -73,7 +72,6 @@
     "@typescript-eslint/parser": "^4.10.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-optimize-clsx": "^2.6.1",
-    "clean-css": "^4.2.3",
     "core-js": "^3.8.1",
     "css-loader": "^5.0.1",
     "eslint": "^7.15.0",
@@ -85,10 +83,9 @@
     "eslint-plugin-sonarjs": "^0.5.0",
     "faker": "^5.1.0",
     "jest": "^26.6.3",
-    "less": "^3.13.0",
-    "less-loader": "^7.1.0",
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "^1.3.3",
+    "postcss": "^8.2.1",
     "react": "^17.0.1",
     "react-contextmenu": "^2.14.0",
     "react-dnd": "^11.1.3",
@@ -98,6 +95,7 @@
     "react-select": "^3.1.1",
     "react-sortable-hoc": "^1.11.0",
     "rollup": "^2.35.1",
+    "rollup-plugin-postcss": "^4.0.0",
     "typescript": "~4.1.3"
   },
   "peerDependencies": {

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,9 @@
 import { isAbsolute } from 'path';
+import linaria from '@linaria/rollup';
+import postcss from 'rollup-plugin-postcss';
 import { babel } from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
+import pkg from './package.json';
 
 const extensions = ['.ts', '.tsx'];
 
@@ -20,6 +23,14 @@ export default {
   }],
   external: id => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
+    linaria({
+      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('.', '')}`;
+      }
+    }),
+    postcss({ minimize: true }),
     babel({
       babelHelpers: 'runtime',
       extensions,

diff --git a/src/Cell.tsx b/src/Cell.tsx
@@ -1,8 +1,9 @@
 import { forwardRef, memo } from 'react';
 import clsx from 'clsx';
 
-import type { CellRendererProps } from './types';
+import { cellClassname, cellCopiedClassname, cellDraggedOverClassname, cellDragHandleClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
 import { getCellStyle, wrapEvent } from './utils';
+import type { CellRendererProps } from './types';
 
 function Cell<R, SR>({
   className,
@@ -25,13 +26,13 @@ function Cell<R, SR>({
 }: CellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
   const { cellClass } = column;
   className = clsx(
-    'rdg-cell',
+    cellClassname,
     {
-      'rdg-cell-frozen': column.frozen,
-      'rdg-cell-frozen-last': column.isLastFrozenColumn,
-      'rdg-cell-selected': isCellSelected,
-      'rdg-cell-copied': isCopied,
-      'rdg-cell-dragged-over': isDraggedOver
+      [cellFrozenClassname]: column.frozen,
+      [cellFrozenLastClassname]: column.isLastFrozenColumn,
+      [cellSelectedClassname]: isCellSelected,
+      [cellCopiedClassname]: isCopied,
+      [cellDraggedOverClassname]: isDraggedOver
     },
     typeof cellClass === 'function' ? cellClass(row) : cellClass,
     className
@@ -87,7 +88,7 @@ function Cell<R, SR>({
             onRowChange={handleRowChange}
           />
           {dragHandleProps && (
-            <div className="rdg-cell-drag-handle" {...dragHandleProps} />
+            <div className={cellDragHandleClassname} {...dragHandleProps} />
           )}
         </>
       )}

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react';
 import clsx from 'clsx';
 
+import { rootClassname, viewportDraggingClassname, focusSinkClassname } from './style';
 import { useGridDimensions, useViewportColumns, useViewportRows, useLatestFunc } from './hooks';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
@@ -892,7 +893,7 @@ function DataGrid<R, SR>({
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
       aria-rowcount={headerRowsCount + rowsCount + summaryRowsCount}
-      className={clsx('rdg', { 'rdg-viewport-dragging': isDragging }, className)}
+      className={clsx(rootClassname, { [viewportDraggingClassname]: isDragging }, className)}
       style={{
         ...style,
         '--header-row-height': `${headerRowHeight}px`,
@@ -927,7 +928,7 @@ function DataGrid<R, SR>({
           <div
             ref={focusSinkRef}
             tabIndex={0}
-            className="rdg-focus-sink"
+            className={focusSinkClassname}
             onKeyDown={handleKeyDown}
           />
           <div style={{ height: Math.max(rows.length * rowHeight, clientHeight) }} />

diff --git a/src/EditCell.tsx b/src/EditCell.tsx
@@ -1,10 +1,18 @@
 import { useState, useCallback } from 'react';
 import clsx from 'clsx';
+import { css } from '@linaria/core';
 
+import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
 import EditorContainer from './editors/EditorContainer';
 import { getCellStyle } from './utils';
 import type { CellRendererProps, SharedEditorProps, Omit } from './types';
 
+const cellEditing = css`
+  padding: 0;
+`;
+
+const cellEditingClassname = `rdg-cell-editing ${cellEditing}`;
+
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>,
   | 'rowIdx'
   | 'row'
@@ -34,13 +42,13 @@ export default function EditCell<R, SR>({
 
   const { cellClass } = column;
   className = clsx(
-    'rdg-cell',
+    cellClassname,
     {
-      'rdg-cell-frozen': column.frozen,
-      'rdg-cell-frozen-last': column.isLastFrozenColumn
+      [cellFrozenClassname]: column.frozen,
+      [cellFrozenLastClassname]: column.isLastFrozenColumn
     },
-    'rdg-cell-selected',
-    'rdg-cell-editing',
+    [cellSelectedClassname],
+    cellEditingClassname,
     typeof cellClass === 'function' ? cellClass(row) : cellClass,
     className
   );

diff --git a/src/FilterRow.tsx b/src/FilterRow.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { getCellStyle } from './utils';
 import type { CalculatedColumn, Filters } from './types';
 import type { DataGridProps } from './DataGrid';
+import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, filterRowClassname } from './style';
 
 type SharedDataGridProps<R, SR> = Pick<DataGridProps<R, SR>,
   | 'filters'
@@ -29,13 +30,13 @@ function FilterRow<R, SR>({
     <div
       role="row"
       aria-rowindex={2}
-      className="rdg-filter-row"
+      className={filterRowClassname}
     >
       {columns.map(column => {
         const { key } = column;
-        const className = clsx('rdg-cell', {
-          'rdg-cell-frozen': column.frozen,
-          'rdg-cell-frozen-last': column.isLastFrozenColumn
+        const className = clsx(cellClassname, {
+          [cellFrozenClassname]: column.frozen,
+          [cellFrozenLastClassname]: column.isLastFrozenColumn
         });
 
         return (

diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { getCellStyle } from './utils';
 import type { CalculatedColumn } from './types';
 import type { GroupRowRendererProps } from './GroupRow';
+import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
 
 type SharedGroupRowRendererProps<R, SR> = Pick<GroupRowRendererProps<R, SR>,
   | 'id'
@@ -51,10 +52,10 @@ function GroupCell<R, SR>({
       role="gridcell"
       aria-colindex={column.idx + 1}
       key={column.key}
-      className={clsx('rdg-cell', {
-        'rdg-cell-frozen': column.frozen,
-        'rdg-cell-frozen-last': column.isLastFrozenColumn,
-        'rdg-cell-selected': isCellSelected
+      className={clsx(cellClassname, {
+        [cellFrozenClassname]: column.frozen,
+        [cellFrozenLastClassname]: column.isLastFrozenColumn,
+        [cellSelectedClassname]: isCellSelected
       })}
       style={{
         ...getCellStyle(column),

diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
@@ -1,9 +1,10 @@
 import { memo } from 'react';
 import clsx from 'clsx';
 
-import type { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';
+import { groupRowClassname, groupRowSelectedClassname, rowClassname, rowSelectedClassname } from './style';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
+import type { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';
 
 export interface GroupRowRendererProps<R, SR = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   id: string;
@@ -50,12 +51,13 @@ function GroupedRow<R, SR>({
       aria-level={level}
       aria-expanded={isExpanded}
       className={clsx(
-        'rdg-row',
-        'rdg-group-row',
+        rowClassname,
+        groupRowClassname,
         `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, {
-          'rdg-row-selected': isRowSelected,
-          'rdg-group-row-selected': selectedCellIdx === -1 // Select row if there is no selected cell
-        })}
+          [rowSelectedClassname]: isRowSelected,
+          [groupRowSelectedClassname]: selectedCellIdx === -1 // Select row if there is no selected cell
+        }
+      )}
       onClick={selectGroup}
       style={{ top }}
       {...props}