forked from vercel/next.js
/
client.ts
49 lines (45 loc) · 1.54 KB
/
client.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import type { webpack } from 'next/dist/compiled/webpack/webpack'
export function getClientStyleLoader({
isAppDir,
isDevelopment,
assetPrefix,
}: {
isAppDir: boolean
isDevelopment: boolean
assetPrefix: string
}): webpack.RuleSetUseItem {
// Keep next-style-loader for development mode in `pages/`
if (isDevelopment && !isAppDir) {
return {
loader: 'next-style-loader',
options: {
insert: function (element: Node) {
// 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>.
// 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)
},
},
}
}
const MiniCssExtractPlugin =
require('../../../../plugins/mini-css-extract-plugin').default
return {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: `${assetPrefix}/_next/`,
esModule: false,
},
}
}