Lexical plugin imports CSS

[cbratschi]

Link to reproduction

private repo

Describe the Bug

We are using the following code to convert rich text data from Slate to Lexical. This allows us to prepare the SSR React serializer before we fully migrate to Lexical. However, the Lexical plugin imports CSS code from Payload admin UI.

import { type SlateNode, convertSlateToLexical, defaultSlateConverters } from '@payloadcms/richtext-lexical';

/**
 * Convert Slate rich text data to Lexical.
 *
 * @param data
 * @returns
 */
export default function convertSlateToLexicalFormat(data: SlateNode[]) {
    if (data && Array.isArray(data) && !('root' in data)) {
        return convertSlateToLexical({
            converters: defaultSlateConverters,
            slateData: data
        });
    }

    return data;
}

We are seeing this CSS code which collides with our Bootstrap code:

a.btn {
  display: inline-block;
}

.btn {
  background: transparent;
  line-height: 1.9230769231rem;
  border-radius: 4px;
  font-size: 1rem;
  margin-top: 1.9230769231rem;
  margin-bottom: 1.9230769231rem;
  border: 0;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  color: inherit;
}

We just want to use the data model conversion without any other side effects.

Could you please export the lexical module from the Payload Lexical plugin and all needed types? Otherwise we have to install an NPM package and will end in versioning conflicts with different Lexical versions.

To Reproduce

Use the provided code in Next.js server component and check bundled CSS.

Payload Version

2.1.0

Adapters and Plugins

db-mongodb, bundler-webpack, live-preview

[cbratschi]

Still an issue with Payload 2.3.0 and the 0.3.0 Lexical plugin. Hope the pull request gets through soon. Thanks.

[AlessioGr]

Hopefully 0.4.0. Was a pretty big issue and required breaking changes, so it'll probably be released together with other breaking changes rather than trickling them in release after release

[cbratschi]

Tried Payload 2.4.0 and still getting the Payload CSS in my Next.js frontend. Importing the Slate to Lexical converted still imports some CSS.

[AlessioGr]

Can you share the error? And if you have any custom features, can you try it after disabling them?

[cbratschi]

@AlessioGr there is no error: I am just using the code listed above and CSS from the plugin gets imported to Next.js and breaks the layout of the frontend. The .btn CSS classes changes the CSS used by our button controls.

Probably not that issue to solve. You could move some helper functions to a Lexical helper package. In Next.js I just need a way to convert from Slate to Lexical on-the-fly.

[AlessioGr]

@cbratschi scss should actually not be imported anymore. Since 0.4.0, every single scss / react / client-side import is now imported asynchronously and on-demand.

You are on richtext-lexical 0.4.0 or 0.4.1 - not 0.3.0 - right?

[AlessioGr]

Nvm, I've found the issue - it happens on 0.4.1 as well.

No files with scss are imported anymore - it's all just dynamic imports now. But webpack does their static analysis and still includes those in the bundle. Tricky, will see what I can do about that.

I can't just export the server-only stuff separately as, similarly to the payload config, each lexical Feature is used both on the server and on the client. And the full Features are needed for stuff like Slate => lexical converters to work, as of now

[cbratschi]

Will this be fixed in Payload 3.x which is Next.js based?