rsnext/test/e2e/app-dir/app-css/app/ordering
Shu Ding 2a61253f72
Fix misordered CSS resources (#48244)
### What?

This PR fixes misordered CSS `<link>` tags. CSS imports in inner layers
(e.g. a page) should always take precedence over outer layers (e.g. root
layout), but currently it's reversed.

### Why?

In layouts we usually define more general styles like globals, resets,
and layout specific things. And in inner layers and pages, things need
to be more detailed and override upper layers if there're any conflicts.

Previously we defined the component segment as

```tsx
<>
  <Component {...props} />
  {assets}
</>
```

which is necessary because of `findDOMNode` - if we put `assets` before
the component, we can't find the correct scrolling DOM and position for
that layer.

However, with `assets` being the last Float will receive the reversed
order of resources.

### How?

I changed the `createComponentTree` function to return a `Component` and
`assets` pair, so in the Layout Router they're no longer passed to the
scroll wrapper altogether but separately.

Closes NEXT-983
Fixes #47585, fixes #46347.

fix NEXT-656

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-04-17 14:11:47 +02:00
..
index.css Fix misordered CSS resources (#48244) 2023-04-17 14:11:47 +02:00
input.css Fix misordered CSS resources (#48244) 2023-04-17 14:11:47 +02:00
input.js Fix misordered CSS resources (#48244) 2023-04-17 14:11:47 +02:00
layout.js Fix misordered CSS resources (#48244) 2023-04-17 14:11:47 +02:00
page.js Fix misordered CSS resources (#48244) 2023-04-17 14:11:47 +02:00