configure rollup postcss

apps/mantine-react-table-docs/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@docsearch/js": "3.5.2",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -25,29 +25,29 @@
     "@mantine/modals": "^7.0.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.19",
+    "@next/mdx": "^13.5.2",
     "@tabler/icons-react": "2.34.0",
     "@tanstack/react-query": "^4.35.3",
     "@types/mdx": "^2.0.7",
     "clsx": "^2.0.0",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "export-to-csv": "^1.0.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.6.0",
     "mantine-react-table": "workspace:*",
-    "next": "13.4.19",
+    "next": "13.5.2",
     "next-sitemap": "^4.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.6.3",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "eslint": "8.49.0",
-    "eslint-config-next": "13.4.19",
+    "eslint-config-next": "13.5.2",
     "next-plausible": "^3.11.1",
     "postcss": "^8.4.30",
     "postcss-preset-mantine": "^1.7.0",

packages/mantine-react-table/package.json

@@ -62,32 +62,35 @@
   "devDependencies": {
     "@babel/core": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.1.0",
     "@mantine/core": "^7.0.0",
     "@mantine/dates": "^7.0.0",
     "@mantine/hooks": "^7.0.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.2",
-    "@storybook/addon-essentials": "^7.4.2",
-    "@storybook/addon-interactions": "^7.4.2",
-    "@storybook/addon-links": "^7.4.2",
-    "@storybook/addon-storysource": "^7.4.2",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/react": "^7.4.2",
-    "@storybook/react-vite": "^7.4.2",
+    "@storybook/addon-a11y": "^7.4.3",
+    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-interactions": "^7.4.3",
+    "@storybook/addon-links": "^7.4.3",
+    "@storybook/addon-storysource": "^7.4.3",
+    "@storybook/blocks": "^7.4.3",
+    "@storybook/react": "^7.4.3",
+    "@storybook/react-vite": "^7.4.3",
     "@storybook/testing-library": "^0.2.1",
     "@tabler/icons-react": "2.34.0",
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.6.3",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-react": "^4.0.4",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "eslint": "^8.49.0",
+    "postcss": "^8.4.30",
+    "postcss-preset-mantine": "^1.7.0",
+    "postcss-simple-vars": "^7.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -96,16 +99,17 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.2",
+    "storybook": "^7.4.3",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.9"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.0",
+    "@tanstack/react-table": "8.10.1",
     "@tanstack/react-virtual": "3.0.0-beta.60"
   },
   "peerDependencies": {

packages/mantine-react-table/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

packages/mantine-react-table/rollup.config.mjs

@@ -2,6 +2,8 @@ import dts from 'rollup-plugin-dts';
 import external from 'rollup-plugin-peer-deps-external';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
 import { babel } from '@rollup/plugin-babel';
 
 export default [
@@ -40,6 +42,7 @@ export default [
       typescript({
         rootDir: './src',
       }),
+      postcss({ extract: 'mrt.css' }),
     ],
   },
   {

packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.module.css

@@ -0,0 +1,5 @@
+.container {
+  min-width: 70px;
+  align-content: center;
+  justify-content: center;
+}

packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,5 +1,6 @@
 import { ActionIcon, Flex, Tooltip } from '@mantine/core';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
+import classes from './MRT_ColumnPinningButtons.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   column: MRT_Column<TData>;
@@ -24,13 +25,7 @@ export const MRT_ColumnPinningButtons = <
   };
 
   return (
-    <Flex
-      style={{
-        minWidth: '70px',
-        alignContent: 'center',
-        justifyContent: 'center',
-      }}
-    >
+    <Flex className={classes.container}>
       {column.getIsPinned() ? (
         <Tooltip withinPortal label={localization.unpin}>
           <ActionIcon onClick={() => handlePinColumn(false)} size="md">