Files
payloadcms/packages/richtext-lexical/src/features/relationship/client/components/index.scss
Alessio Gravili 319d3355de feat: improve turbopack compatibility (#11376)
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
2025-06-02 22:01:07 +00:00

92 lines
1.7 KiB
SCSS

@import '~@payloadcms/ui/scss';
@layer payload-default {
.lexical-relationship {
@extend %body;
@include shadow-sm;
padding: calc(var(--base) * 0.75);
display: flex;
align-items: center;
background: var(--theme-input-bg);
border: 1px solid var(--theme-elevation-100);
border-radius: $style-radius-m;
max-width: calc(var(--base) * 15);
font-family: var(--font-body);
margin-block: base(0.5);
&:hover {
border: 1px solid var(--theme-elevation-150);
}
&__label {
margin-bottom: calc(var(--base) * 0.25);
}
&__title {
margin: 0;
}
&__label,
&__title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1 !important;
}
&__title {
font-weight: bold;
}
&__wrap {
flex-grow: 1;
overflow: hidden;
}
&__doc-drawer-toggler {
text-decoration: underline;
pointer-events: all;
line-height: inherit;
& > * {
margin: 0;
}
}
&__swapButton.btn {
margin: 0;
}
&__doc-drawer-toggler,
&__swapButton {
&:disabled {
color: var(--theme-elevation-300);
pointer-events: none;
}
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: calc(var(--base) * 0.5);
& > *:not(:last-child) {
margin-right: calc(var(--base) * 0.25);
}
}
&__removeButton.btn {
margin: 0;
line {
stroke-width: $style-stroke-width-m;
}
&:disabled {
color: var(--theme-elevation-300);
pointer-events: none;
}
}
}
}