319d3355de
This PR introduces a few changes to improve turbopack compatibility and ensure e2e tests pass with turbopack enabled ## Changes to improve turbopack compatibility - Use correct sideEffects configuration to fix scss issues - Import scss directly instead of duplicating our scss rules - Fix some scss rules that are not supported by turbopack - Bump Next.js and all other dependencies used to build payload ## Changes to get tests to pass For an unknown reason, flaky tests flake a lot more often in turbopack. This PR does the following to get them to pass: - add more `wait`s - fix actual flakes by ensuring previous operations are properly awaited ## Blocking turbopack bugs - [X] https://github.com/vercel/next.js/issues/76464 - Fix PR: https://github.com/vercel/next.js/pull/76545 - Once fixed: change `"sideEffectsDisabled":` back to `"sideEffects":` ## Non-blocking turbopack bugs - [ ] https://github.com/vercel/next.js/issues/76956 ## Related PRs https://github.com/payloadcms/payload/pull/12653 https://github.com/payloadcms/payload/pull/12652
86 lines
2.1 KiB
SCSS
86 lines
2.1 KiB
SCSS
@import '~@payloadcms/ui/scss';
|
|
|
|
$lexical-contenteditable-top-padding: 8px;
|
|
$lexical-contenteditable-bottom-padding: 8px;
|
|
|
|
@layer payload-default {
|
|
.ContentEditable__root {
|
|
border: 0;
|
|
display: block;
|
|
position: relative;
|
|
tab-size: 1;
|
|
outline: 0;
|
|
padding-top: $lexical-contenteditable-top-padding;
|
|
padding-bottom: $lexical-contenteditable-bottom-padding;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
&:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
& > * {
|
|
transition: transform 0.2s ease-in-out;
|
|
// will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
|
|
}
|
|
}
|
|
|
|
.rich-text-lexical--show-gutter
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor {
|
|
> .ContentEditable__root {
|
|
padding-left: 3rem;
|
|
}
|
|
> .ContentEditable__root::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: $lexical-contenteditable-top-padding;
|
|
left: 0;
|
|
height: calc(
|
|
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
|
|
);
|
|
border-left: 1px solid var(--theme-elevation-100);
|
|
}
|
|
}
|
|
|
|
html[data-theme='light'] {
|
|
.rich-text-lexical.rich-text-lexical--show-gutter {
|
|
&.error:not(:hover) {
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor
|
|
> .ContentEditable__root::before {
|
|
border-left: 2px solid var(--theme-error-400);
|
|
}
|
|
}
|
|
|
|
&.error:hover {
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor
|
|
> .ContentEditable__root::before {
|
|
border-left: 2px solid var(--theme-error-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
.rich-text-lexical.rich-text-lexical--show-gutter {
|
|
&.error {
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor
|
|
> .ContentEditable__root::before {
|
|
border-left: 2px solid var(--theme-error-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|