Use more classes in module.css

Author: viktorrenkema

packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx

@@ -1,10 +1,9 @@
 import { DocumentTableViewGrid } from '@gitbook/api';
 import React from 'react';
 
-import { tcls } from '@/lib/tailwind';
-
 import { RecordColumnValue } from './RecordColumnValue';
 import { TableRecordKV, TableViewProps } from './Table';
+import styles from './table.module.css';
 import { getColumnWidth } from './ViewGrid';
 
 export function RecordRow(
@@ -17,10 +16,7 @@ export function RecordRow(
     const { view, autoSizedColumns, fixedColumns } = props;
 
     return (
-        <div
-            className={tcls('flex', 'border-dark/3', 'dark:border-light/2', '[&>*+*]:border-l')}
-            role="row"
-        >
+        <div className={styles.row} role="row">
             {view.columns.map((column) => {
                 const columnWidth = getColumnWidth({
                     column,
@@ -32,16 +28,7 @@ export function RecordRow(
                     <div
                         key={column}
                         role="cell"
-                        className={tcls(
-                            'flex-1',
-                            'align-middle',
-                            'border-dark/2',
-                            'py-2',
-                            'px-3',
-                            'text-sm',
-                            'lg:text-base',
-                            'dark:border-light/2',
-                        )}
+                        className={styles.cell}
                         style={{
                             width: columnWidth,
                             minWidth: columnWidth || '100px',

packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

@@ -29,19 +29,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
         view.columns.some((columnId) => block.data.definition[columnId].title.trim().length > 0);
 
     return (
-        <div
-            className={tcls(
-                style,
-                styles.progressContainer,
-                styles.tableWrapper,
-                'relative',
-                'grid',
-                'w-full',
-                'overflow-x-auto',
-                'overflow-y-hidden',
-                'mx-auto',
-            )}
-        >
+        <div className={tcls(style, styles.tableWrapper)}>
             {/* Table */}
             <div role="table" className={tcls('flex', 'flex-col')}>
                 {/* Header */}
@@ -55,15 +43,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                                         key={column}
                                         role="columnheader"
                                         className={tcls(
-                                            'align-middle',
-                                            'text-left',
-                                            'text-base',
-                                            'font-medium',
-                                            'border-b',
-                                            'dark:border-l-light/2',
-                                            'dark:border-b-light/4',
-                                            'py-2',
-                                            'px-3',
+                                            styles.columnHeader,
                                             alignment === 'right' ? 'text-right' : null,
                                             alignment === 'center' ? 'text-center' : null,
                                         )}

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -19,99 +19,25 @@
     --border-width-if-cant-scroll: 0;
     border-width: var(--border-width-if-can-scroll, var(--border-width-if-cant-scroll));
 
-    @apply border-dark/3;
+    @apply relative grid w-full overflow-x-auto overflow-y-hidden mx-auto border-dark/3;
 }
 
 :global(.dark) .tableWrapper {
     @apply border-light/2;
 }
 
-/* Styles for circular scroll progress animation on scrollable tables */
-
-/* Hide it on browsers (firefox / safari) that do not support it */
-.progressOpacitySharp {
-    display: none;
+.row {
+    @apply flex border-dark/3 dark:border-light/2;
 }
 
-@supports (animation-timeline: scroll()) {
-    .progressContainer {
-        scroll-timeline-name: --squareTimeline;
-        scroll-timeline-axis: x;
-    }
-
-    .progressOpacity {
-        animation-name: opacityProgress;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .progressOpacitySharp {
-        display: grid;
-        opacity: 0;
-        animation-name: opacityProgressSharp;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .strokeOpacityProgressInverted {
-        animation-name: strokeOpacityProgressInverted;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    .progressSvg {
-        animation-name: svgProgress;
-        animation-duration: 1ms;
-        animation-direction: alternate;
-        animation-timeline: --squareTimeline;
-        animation-timing-function: linear;
-    }
-
-    @keyframes opacityProgress {
-        0%,
-        50% {
-            opacity: 1;
-        }
-        100% {
-            opacity: 0;
-        }
-    }
-
-    @keyframes opacityProgressSharp {
-        0%,
-        98% {
-            opacity: 1;
-        }
-        100% {
-            opacity: 0;
-        }
-    }
+.row > * + * {
+    @apply border-l;
+}
 
-    @keyframes strokeOpacityProgressInverted {
-        0%,
-        10% {
-            stroke-opacity: 0;
-        }
-        30% {
-            stroke-opacity: 0.88;
-        }
-        100% {
-            stroke-opacity: 0.88;
-        }
-    }
+.cell {
+    @apply flex-1 align-middle border-dark/2 py-2 px-3 text-sm lg:text-base dark:border-light/2;
+}
 
-    @keyframes svgProgress {
-        from {
-            stroke-dasharray: 0 100;
-        }
-        to {
-            stroke-dasharray: 100 100;
-        }
-    }
+.columnHeader {
+    @apply align-middle text-left text-base font-medium border-b dark:border-l-light/2 dark:border-b-light/4 py-2 px-3;
 }