67ff62507d
We previously used to remove our FOUC helper inside of the style injection to ensure content was shown as fast as possible. This behavior, however, was problematic for a few reasons: 1. Large JavaScript chunks would take longer than an animation frame to parse, causing FOUC 1. Rendering would sometimes complete before an animation frame, causing improper effects To fix the latter, we started removing the no FOUC helper **before** rendering, however, we never fixed the former by removing the dead code. There's not a great way to test this because the FOUC is so fast and flaky, however, this code really shouldn't exist and isn't likely to be re-added (regress). Also, we already have FOUC tests that occasionally flake, probably due to this. Fixes #12448 Fixes #13058 Fixes #11195 Fixes #10404
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import webpack from 'webpack'
|
|
import MiniCssExtractPlugin from '../../../../plugins/mini-css-extract-plugin'
|
|
|
|
export function getClientStyleLoader({
|
|
isDevelopment,
|
|
assetPrefix,
|
|
}: {
|
|
isDevelopment: boolean
|
|
assetPrefix: string
|
|
}): webpack.RuleSetUseItem {
|
|
return isDevelopment
|
|
? {
|
|
loader: require.resolve('style-loader'),
|
|
options: {
|
|
// By default, style-loader injects CSS into the bottom
|
|
// of <head>. This causes ordering problems between dev
|
|
// and prod. To fix this, we render a <noscript> tag as
|
|
// an anchor for the styles to be placed before. These
|
|
// styles will be applied _before_ <style jsx global>.
|
|
insert: function (element: Node) {
|
|
// These elements should always exist. If they do not,
|
|
// this code should fail.
|
|
var anchorElement = document.querySelector(
|
|
'#__next_css__DO_NOT_USE__'
|
|
)!
|
|
var parentNode = anchorElement.parentNode! // Normally <head>
|
|
|
|
// Each style tag should be placed right before our
|
|
// anchor. By inserting before and not after, we do not
|
|
// need to track the last inserted element.
|
|
parentNode.insertBefore(element, anchorElement)
|
|
},
|
|
},
|
|
}
|
|
: {
|
|
loader: MiniCssExtractPlugin.loader,
|
|
options: { publicPath: `${assetPrefix}/_next/` },
|
|
}
|
|
}
|