Merge pull request #387 from datalayer/feat/lexical/tailwind

(feat) Introduce Tailwind in the Lexical package

Author: goanpeca

packages/lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-lexical",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Jupyter UI for Lexical",
   "license": "MIT",
   "main": "lib/index.js",
@@ -11,8 +11,6 @@
   ],
   "keywords": [
     "jupyter",
-    "jupyterlab",
-    "jupyterlab-extension",
     "react",
     "lexical"
   ],
@@ -42,6 +40,7 @@
     "clean:labextension": "rimraf datalayer/labextension",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+    "dev": "run-p -c 'start:*'",
     "eslint": "jlpm eslint:check --fix",
     "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "install:extension": "jlpm build",
@@ -78,9 +77,11 @@
     "@lexical/table": "^0.33.1",
     "@lexical/utils": "^0.33.1",
     "@lexical/yjs": "^0.33.1",
+    "autoprefixer": "^10.4.21",
     "katex": "^0.16.21",
     "lexical": "^0.33.1",
     "lodash-es": "^4.17.21",
+    "postcss": "^8.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-json-tree": "^0.19.0",
@@ -93,7 +94,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@jupyterlab/builder": "^4.0.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/codemirror": "^5.60.4",
     "@types/katex": "^0.14.0",
     "@types/lodash-es": "^4.17.6",
@@ -137,6 +138,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
+    "tailwindcss": "^4.1.11",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "url-loader": "^3.0.0",

packages/lexical/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

packages/lexical/src/components/Button.tsx

@@ -7,8 +7,6 @@
 import {ReactNode} from 'react';
 import joinClasses from '../utils/join';
 
-import './../../style/lexical/Button.css';
-
 export const Button = ({
   'data-test-id': dataTestId,
   children,
@@ -31,8 +29,8 @@ export const Button = ({
       disabled={disabled}
       className={joinClasses(
         'Button__root',
-        disabled && 'Button__disabled',
         small && 'Button__small',
+        disabled && 'Button__disabled',
         className,
       )}
       onClick={onClick}

packages/lexical/src/components/ContentEditable.tsx

@@ -6,8 +6,6 @@
 
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 
-import './../../style/lexical/ContentEditable.css';
-
 export const LexicalContentEditable = ({
   className,
 }: {

packages/lexical/src/components/Dialog.tsx

@@ -4,8 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/Dialog.css';
-
 import {ReactNode} from 'react';
 
 type Props = Readonly<{

packages/lexical/src/components/EquationEditor.tsx

@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/EquationEditor.css';
 
 import {ChangeEvent, RefObject} from 'react';
 

packages/lexical/src/components/FileInput.tsx

@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/Input.css';
 
 type Props = Readonly<{
   'data-test-id'?: string;

packages/lexical/src/components/KatexEquationAlterer.tsx

@@ -8,7 +8,6 @@ import {useCallback, useState} from 'react';
 import Button from '../components/Button';
 import KatexRenderer from './KatexRenderer';
 
-import './../../style/lexical/KatexEquationAlterer.css';
 
 type Props = {
   initialEquation?: string;

packages/lexical/src/components/Modal.tsx

@@ -7,8 +7,6 @@
 import {ReactNode, useEffect, useRef} from 'react';
 import {createPortal} from 'react-dom';
 
-import './../../style/lexical/Modal.css';
-
 function PortalImpl({
   onClose,
   children,

packages/lexical/src/components/Placeholder.tsx

@@ -6,7 +6,6 @@
 
 import {ReactNode} from 'react';
 
-import './../../style/lexical/Placeholder.css';
 
 export const Placeholder = ({
   children,