Passing explicitly imported components to Route.page breaks css injection order

[biphobe]

Given this setup:

• NotFoundPage .js

import "./NotFoundPage.scss";
export default () => null;

• Routes.js

<Route notfound page={ NotFoundPage } />

• index.js:

import "./index.scss"
...
ReactDOM.render(... <Routes /> ...)

Then the css injection order in which css file contents are being put as <style> tags in the document header would be following:

1. index.js > index.scss
2. NotFoundPage.js > NotFoundPage.scss

If, however, we omit the Page autoimporting that happens behind the scenes and import the component which is being used as Route.page by adding an import explicitly to Routes.js:

import NotFoundPage from "./NotFoundPage";

Then css injection order changes into the following one:

1. NotFoundPage.js > NotFoundPage.scss
2. index.js > index.scss

... which can break page styles as it changes the specificity by changing the order in which rules are being applied onto the document.