update build size + css

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## 0.5.4
+
+_2024-06-13_
+
+### Features
+
+- **BREAKING:** decouples the CSS. Now, at the top of your file, add this:
+```jsx
+import "react-fluid-table/dist/index.css";
+```
+
 ## 0.5.3
 
 _2024-06-13_

README.md

@@ -19,6 +19,7 @@ npm i react-fluid-table
 ## Usage
 
 ```jsx
+import "react-fluid-table/dist/index.css"; // this only needs to be imported once
 import { Table } from "react-fluid-table";
 
 const data = _.range(100).map(i => ({

example/src/App.tsx

@@ -1,4 +1,5 @@
 import { RouterProvider, createHashRouter } from "react-router-dom";
+import "react-fluid-table/dist/index.css";
 import Page from "./Page";
 import Props from "./Props";
 import { Example1, Source as Example1Code } from "./examples/01-base";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "A React table inspired by react-window",
   "author": "Mckervin Ceme <[email protected]>",
   "license": "MIT",
@@ -17,7 +17,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "rm -rf dist ||: && rollup -c --environment BUILD:production",
+    "build": "rm -rf dist ||: && rollup -c --environment BUILD:production && rm -rf dist/*.es.css",
     "start": "rollup -c -w --environment BUILD:development",
     "site:build": "cd example && yarn install && yarn build"
   },

rollup.config.mjs

@@ -30,7 +30,10 @@ const config = {
   ],
   plugins: [
     postcss({
-      plugins: []
+      plugins: [],
+      minimize: true,
+      include: "**/main.css",
+      extract: resolve("dist/main.css")
     }),
     svgr(),
     external(),

src/main.css

@@ -1,12 +1,12 @@
-.rft .rft-cell,
-.rft .rft-header-cell {
+.rft-cell,
+.rft-header-cell {
   box-sizing: border-box;
   display: flex;
   padding: 8px;
 }
 
-.rft .rft-cell.frozen,
-.rft .rft-header-cell.frozen {
+.rft-cell.frozen,
+.rft-header-cell.frozen {
   position: sticky;
   z-index: 1;
 }