@vanilla-extract/next-plugin 2.3.0 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
|
|
2
|
-
import { NextConfig } from 'next/
|
|
1
|
+
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';
|
|
2
|
+
import { NextConfig } from 'next/dist/server/config-shared';
|
|
3
3
|
|
|
4
4
|
type PluginOptions = ConstructorParameters<typeof VanillaExtractPlugin>[0];
|
|
5
5
|
declare const createVanillaExtractPlugin: (pluginOptions?: PluginOptions) => (nextConfig?: NextConfig) => NextConfig;
|
|
@@ -2,36 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
5
|
+
var browserslist = require('next/dist/compiled/browserslist');
|
|
6
|
+
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
7
|
+
var next = require('@vanilla-extract/webpack-plugin/next');
|
|
8
8
|
var findPagesDir = require('next/dist/lib/find-pages-dir');
|
|
9
|
+
var css = require('next/dist/build/webpack/config/blocks/css');
|
|
9
10
|
var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
|
|
10
|
-
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
13
13
|
|
|
14
14
|
var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
|
|
15
15
|
var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
|
|
16
16
|
|
|
17
|
+
// @ts-expect-error
|
|
17
18
|
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
|
|
19
|
+
|
|
20
|
+
// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
|
|
18
21
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
19
|
-
let browsers;
|
|
20
22
|
try {
|
|
21
|
-
|
|
23
|
+
return browserslist__default["default"].loadConfig({
|
|
22
24
|
path: dir,
|
|
23
25
|
env: isDevelopment ? 'development' : 'production'
|
|
24
26
|
});
|
|
25
|
-
} catch {
|
|
26
|
-
|
|
27
|
+
} catch (_) {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
|
-
|
|
31
|
+
|
|
32
|
+
// Adopt from Next.js' getGlobalCssLoader
|
|
33
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
29
34
|
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
30
35
|
const loaders = [];
|
|
31
36
|
|
|
32
|
-
//
|
|
37
|
+
// Adopt from Next.js' getClientStyleLoader
|
|
38
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
|
|
33
39
|
if (!options.isServer) {
|
|
34
|
-
// https://github.com/vercel/next.js/blob/
|
|
40
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
35
41
|
// next-style-loader will mess up css order in development mode.
|
|
36
42
|
// Next.js appDir doesn't use next-style-loader either.
|
|
37
43
|
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
@@ -45,7 +51,7 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
45
51
|
}
|
|
46
52
|
const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
47
53
|
|
|
48
|
-
// https://github.com/vercel/next.js/blob/
|
|
54
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
49
55
|
loaders.push({
|
|
50
56
|
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
51
57
|
options: {
|
|
@@ -63,85 +69,97 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
63
69
|
}
|
|
64
70
|
});
|
|
65
71
|
|
|
66
|
-
// https://github.com/vercel/next.js/blob/
|
|
72
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
|
|
67
73
|
loaders.push({
|
|
68
74
|
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
69
75
|
options: {
|
|
70
76
|
postcss
|
|
71
77
|
}
|
|
72
78
|
});
|
|
79
|
+
|
|
80
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
|
|
81
|
+
loaders.push({
|
|
82
|
+
loader: next.VanillaExtractPlugin.loader
|
|
83
|
+
});
|
|
73
84
|
return loaders;
|
|
74
85
|
};
|
|
75
|
-
const createVanillaExtractPlugin = (pluginOptions = {}) =>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
});
|
|
86
|
+
const createVanillaExtractPlugin = (pluginOptions = {}) => {
|
|
87
|
+
return (nextConfig = {}) => ({
|
|
88
|
+
...nextConfig,
|
|
89
|
+
webpack(config, options) {
|
|
90
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
91
|
+
const {
|
|
92
|
+
dir,
|
|
93
|
+
dev,
|
|
94
|
+
isServer,
|
|
95
|
+
config: resolvedNextConfig
|
|
96
|
+
} = options;
|
|
97
|
+
|
|
98
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
99
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
100
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
101
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
102
|
+
const findPagesDirResult = findPagesDir.findPagesDir(dir, (_resolvedNextConfig$e = (_resolvedNextConfig$e2 = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e2 === void 0 ? void 0 : _resolvedNextConfig$e2.appDir) !== null && _resolvedNextConfig$e !== void 0 ? _resolvedNextConfig$e : false);
|
|
103
|
+
// Skip nextConfig check since appDir is stable feature after Next.js 13.4
|
|
104
|
+
const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
105
|
+
const outputCss = hasAppDir ?
|
|
106
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
107
|
+
true :
|
|
108
|
+
// There is no appDir, do not output css on server build
|
|
109
|
+
!isServer;
|
|
110
|
+
|
|
111
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
|
|
112
|
+
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
113
|
+
test
|
|
114
|
+
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
105
115
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
//
|
|
117
|
-
// the
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
//
|
|
124
|
-
//
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
116
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
|
|
117
|
+
cssRules.unshift({
|
|
118
|
+
test: /vanilla\.virtual\.css/i,
|
|
119
|
+
sideEffects: true,
|
|
120
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
124
|
+
// development and production.
|
|
125
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
126
|
+
//
|
|
127
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
128
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
129
|
+
// Next.js hasn't added it yet).
|
|
130
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
131
|
+
// RealContentHashPlugin to panic)
|
|
132
|
+
if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
|
|
133
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
134
|
+
// the new file name, which means it can't contain a hash.
|
|
135
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
136
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
137
|
+
filename,
|
|
138
|
+
chunkFilename: filename,
|
|
139
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
140
|
+
// restrictions:
|
|
141
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
142
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
143
|
+
// include Global CSS (:global() selector).
|
|
144
|
+
//
|
|
145
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
146
|
+
// selector), this assumption is required to code-split CSS.
|
|
147
|
+
//
|
|
148
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
149
|
+
// but likely not valid -- so just disable it.
|
|
150
|
+
ignoreOrder: true
|
|
151
|
+
}));
|
|
152
|
+
}
|
|
153
|
+
config.plugins.push(new next.VanillaExtractPlugin({
|
|
154
|
+
outputCss,
|
|
155
|
+
...pluginOptions
|
|
134
156
|
}));
|
|
157
|
+
if (typeof nextConfig.webpack === 'function') {
|
|
158
|
+
return nextConfig.webpack(config, options);
|
|
159
|
+
}
|
|
160
|
+
return config;
|
|
135
161
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
...pluginOptions
|
|
139
|
-
}));
|
|
140
|
-
if (typeof nextConfig.webpack === 'function') {
|
|
141
|
-
return nextConfig.webpack(config, options);
|
|
142
|
-
}
|
|
143
|
-
return config;
|
|
144
|
-
}
|
|
145
|
-
});
|
|
162
|
+
});
|
|
163
|
+
};
|
|
146
164
|
|
|
147
165
|
exports.createVanillaExtractPlugin = createVanillaExtractPlugin;
|
|
@@ -2,36 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
5
|
+
var browserslist = require('next/dist/compiled/browserslist');
|
|
6
|
+
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
7
|
+
var next = require('@vanilla-extract/webpack-plugin/next');
|
|
8
8
|
var findPagesDir = require('next/dist/lib/find-pages-dir');
|
|
9
|
+
var css = require('next/dist/build/webpack/config/blocks/css');
|
|
9
10
|
var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
|
|
10
|
-
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
13
13
|
|
|
14
14
|
var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
|
|
15
15
|
var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
|
|
16
16
|
|
|
17
|
+
// @ts-expect-error
|
|
17
18
|
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
|
|
19
|
+
|
|
20
|
+
// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
|
|
18
21
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
19
|
-
let browsers;
|
|
20
22
|
try {
|
|
21
|
-
|
|
23
|
+
return browserslist__default["default"].loadConfig({
|
|
22
24
|
path: dir,
|
|
23
25
|
env: isDevelopment ? 'development' : 'production'
|
|
24
26
|
});
|
|
25
|
-
} catch {
|
|
26
|
-
|
|
27
|
+
} catch (_) {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
|
-
|
|
31
|
+
|
|
32
|
+
// Adopt from Next.js' getGlobalCssLoader
|
|
33
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
29
34
|
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
30
35
|
const loaders = [];
|
|
31
36
|
|
|
32
|
-
//
|
|
37
|
+
// Adopt from Next.js' getClientStyleLoader
|
|
38
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
|
|
33
39
|
if (!options.isServer) {
|
|
34
|
-
// https://github.com/vercel/next.js/blob/
|
|
40
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
35
41
|
// next-style-loader will mess up css order in development mode.
|
|
36
42
|
// Next.js appDir doesn't use next-style-loader either.
|
|
37
43
|
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
@@ -45,7 +51,7 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
45
51
|
}
|
|
46
52
|
const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
47
53
|
|
|
48
|
-
// https://github.com/vercel/next.js/blob/
|
|
54
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
49
55
|
loaders.push({
|
|
50
56
|
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
51
57
|
options: {
|
|
@@ -63,85 +69,97 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
63
69
|
}
|
|
64
70
|
});
|
|
65
71
|
|
|
66
|
-
// https://github.com/vercel/next.js/blob/
|
|
72
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
|
|
67
73
|
loaders.push({
|
|
68
74
|
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
69
75
|
options: {
|
|
70
76
|
postcss
|
|
71
77
|
}
|
|
72
78
|
});
|
|
79
|
+
|
|
80
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
|
|
81
|
+
loaders.push({
|
|
82
|
+
loader: next.VanillaExtractPlugin.loader
|
|
83
|
+
});
|
|
73
84
|
return loaders;
|
|
74
85
|
};
|
|
75
|
-
const createVanillaExtractPlugin = (pluginOptions = {}) =>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
});
|
|
86
|
+
const createVanillaExtractPlugin = (pluginOptions = {}) => {
|
|
87
|
+
return (nextConfig = {}) => ({
|
|
88
|
+
...nextConfig,
|
|
89
|
+
webpack(config, options) {
|
|
90
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
91
|
+
const {
|
|
92
|
+
dir,
|
|
93
|
+
dev,
|
|
94
|
+
isServer,
|
|
95
|
+
config: resolvedNextConfig
|
|
96
|
+
} = options;
|
|
97
|
+
|
|
98
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
99
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
100
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
101
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
102
|
+
const findPagesDirResult = findPagesDir.findPagesDir(dir, (_resolvedNextConfig$e = (_resolvedNextConfig$e2 = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e2 === void 0 ? void 0 : _resolvedNextConfig$e2.appDir) !== null && _resolvedNextConfig$e !== void 0 ? _resolvedNextConfig$e : false);
|
|
103
|
+
// Skip nextConfig check since appDir is stable feature after Next.js 13.4
|
|
104
|
+
const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
105
|
+
const outputCss = hasAppDir ?
|
|
106
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
107
|
+
true :
|
|
108
|
+
// There is no appDir, do not output css on server build
|
|
109
|
+
!isServer;
|
|
110
|
+
|
|
111
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
|
|
112
|
+
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
113
|
+
test
|
|
114
|
+
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
105
115
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
//
|
|
117
|
-
// the
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
//
|
|
124
|
-
//
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
116
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
|
|
117
|
+
cssRules.unshift({
|
|
118
|
+
test: /vanilla\.virtual\.css/i,
|
|
119
|
+
sideEffects: true,
|
|
120
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
124
|
+
// development and production.
|
|
125
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
126
|
+
//
|
|
127
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
128
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
129
|
+
// Next.js hasn't added it yet).
|
|
130
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
131
|
+
// RealContentHashPlugin to panic)
|
|
132
|
+
if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
|
|
133
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
134
|
+
// the new file name, which means it can't contain a hash.
|
|
135
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
136
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
137
|
+
filename,
|
|
138
|
+
chunkFilename: filename,
|
|
139
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
140
|
+
// restrictions:
|
|
141
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
142
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
143
|
+
// include Global CSS (:global() selector).
|
|
144
|
+
//
|
|
145
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
146
|
+
// selector), this assumption is required to code-split CSS.
|
|
147
|
+
//
|
|
148
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
149
|
+
// but likely not valid -- so just disable it.
|
|
150
|
+
ignoreOrder: true
|
|
151
|
+
}));
|
|
152
|
+
}
|
|
153
|
+
config.plugins.push(new next.VanillaExtractPlugin({
|
|
154
|
+
outputCss,
|
|
155
|
+
...pluginOptions
|
|
134
156
|
}));
|
|
157
|
+
if (typeof nextConfig.webpack === 'function') {
|
|
158
|
+
return nextConfig.webpack(config, options);
|
|
159
|
+
}
|
|
160
|
+
return config;
|
|
135
161
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
...pluginOptions
|
|
139
|
-
}));
|
|
140
|
-
if (typeof nextConfig.webpack === 'function') {
|
|
141
|
-
return nextConfig.webpack(config, options);
|
|
142
|
-
}
|
|
143
|
-
return config;
|
|
144
|
-
}
|
|
145
|
-
});
|
|
162
|
+
});
|
|
163
|
+
};
|
|
146
164
|
|
|
147
165
|
exports.createVanillaExtractPlugin = createVanillaExtractPlugin;
|
|
@@ -1,28 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
1
|
+
import browserslist from 'next/dist/compiled/browserslist';
|
|
2
|
+
import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
|
|
3
|
+
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';
|
|
4
4
|
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
|
|
5
|
+
import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
|
|
5
6
|
import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve';
|
|
6
|
-
import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
|
|
7
7
|
|
|
8
|
+
// @ts-expect-error
|
|
8
9
|
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault;
|
|
10
|
+
|
|
11
|
+
// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
|
|
9
12
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
10
|
-
let browsers;
|
|
11
13
|
try {
|
|
12
|
-
|
|
14
|
+
return browserslist.loadConfig({
|
|
13
15
|
path: dir,
|
|
14
16
|
env: isDevelopment ? 'development' : 'production'
|
|
15
17
|
});
|
|
16
|
-
} catch {
|
|
17
|
-
|
|
18
|
+
} catch (_) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
18
21
|
}
|
|
19
|
-
|
|
22
|
+
|
|
23
|
+
// Adopt from Next.js' getGlobalCssLoader
|
|
24
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
20
25
|
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
21
26
|
const loaders = [];
|
|
22
27
|
|
|
23
|
-
//
|
|
28
|
+
// Adopt from Next.js' getClientStyleLoader
|
|
29
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
|
|
24
30
|
if (!options.isServer) {
|
|
25
|
-
// https://github.com/vercel/next.js/blob/
|
|
31
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
26
32
|
// next-style-loader will mess up css order in development mode.
|
|
27
33
|
// Next.js appDir doesn't use next-style-loader either.
|
|
28
34
|
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
@@ -36,7 +42,7 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
36
42
|
}
|
|
37
43
|
const postcss = () => lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
38
44
|
|
|
39
|
-
// https://github.com/vercel/next.js/blob/
|
|
45
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
40
46
|
loaders.push({
|
|
41
47
|
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
42
48
|
options: {
|
|
@@ -54,85 +60,97 @@ const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
|
54
60
|
}
|
|
55
61
|
});
|
|
56
62
|
|
|
57
|
-
// https://github.com/vercel/next.js/blob/
|
|
63
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
|
|
58
64
|
loaders.push({
|
|
59
65
|
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
60
66
|
options: {
|
|
61
67
|
postcss
|
|
62
68
|
}
|
|
63
69
|
});
|
|
70
|
+
|
|
71
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
|
|
72
|
+
loaders.push({
|
|
73
|
+
loader: VanillaExtractPlugin.loader
|
|
74
|
+
});
|
|
64
75
|
return loaders;
|
|
65
76
|
};
|
|
66
|
-
const createVanillaExtractPlugin = (pluginOptions = {}) =>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
const createVanillaExtractPlugin = (pluginOptions = {}) => {
|
|
78
|
+
return (nextConfig = {}) => ({
|
|
79
|
+
...nextConfig,
|
|
80
|
+
webpack(config, options) {
|
|
81
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
82
|
+
const {
|
|
83
|
+
dir,
|
|
84
|
+
dev,
|
|
85
|
+
isServer,
|
|
86
|
+
config: resolvedNextConfig
|
|
87
|
+
} = options;
|
|
76
88
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
89
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
90
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
91
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
92
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
93
|
+
const findPagesDirResult = findPagesDir(dir, (_resolvedNextConfig$e = (_resolvedNextConfig$e2 = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e2 === void 0 ? void 0 : _resolvedNextConfig$e2.appDir) !== null && _resolvedNextConfig$e !== void 0 ? _resolvedNextConfig$e : false);
|
|
94
|
+
// Skip nextConfig check since appDir is stable feature after Next.js 13.4
|
|
95
|
+
const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
96
|
+
const outputCss = hasAppDir ?
|
|
97
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
98
|
+
true :
|
|
99
|
+
// There is no appDir, do not output css on server build
|
|
100
|
+
!isServer;
|
|
101
|
+
|
|
102
|
+
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
|
|
103
|
+
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
104
|
+
test
|
|
105
|
+
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
106
|
+
|
|
107
|
+
// https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
|
|
108
|
+
cssRules.unshift({
|
|
109
|
+
test: /vanilla\.virtual\.css/i,
|
|
110
|
+
sideEffects: true,
|
|
111
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
112
|
+
});
|
|
96
113
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
114
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
115
|
+
// development and production.
|
|
116
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
117
|
+
//
|
|
118
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
119
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
120
|
+
// Next.js hasn't added it yet).
|
|
121
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
122
|
+
// RealContentHashPlugin to panic)
|
|
123
|
+
if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
|
|
124
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
125
|
+
// the new file name, which means it can't contain a hash.
|
|
126
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
127
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
128
|
+
filename,
|
|
129
|
+
chunkFilename: filename,
|
|
130
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
131
|
+
// restrictions:
|
|
132
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
133
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
134
|
+
// include Global CSS (:global() selector).
|
|
135
|
+
//
|
|
136
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
137
|
+
// selector), this assumption is required to code-split CSS.
|
|
138
|
+
//
|
|
139
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
140
|
+
// but likely not valid -- so just disable it.
|
|
141
|
+
ignoreOrder: true
|
|
142
|
+
}));
|
|
143
|
+
}
|
|
144
|
+
config.plugins.push(new VanillaExtractPlugin({
|
|
145
|
+
outputCss,
|
|
146
|
+
...pluginOptions
|
|
125
147
|
}));
|
|
148
|
+
if (typeof nextConfig.webpack === 'function') {
|
|
149
|
+
return nextConfig.webpack(config, options);
|
|
150
|
+
}
|
|
151
|
+
return config;
|
|
126
152
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
...pluginOptions
|
|
130
|
-
}));
|
|
131
|
-
if (typeof nextConfig.webpack === 'function') {
|
|
132
|
-
return nextConfig.webpack(config, options);
|
|
133
|
-
}
|
|
134
|
-
return config;
|
|
135
|
-
}
|
|
136
|
-
});
|
|
153
|
+
});
|
|
154
|
+
};
|
|
137
155
|
|
|
138
156
|
export { createVanillaExtractPlugin };
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vanilla-extract/next-plugin",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.2",
|
|
4
4
|
"description": "Zero-runtime Stylesheets-in-TypeScript",
|
|
5
5
|
"main": "dist/vanilla-extract-next-plugin.cjs.js",
|
|
6
6
|
"module": "dist/vanilla-extract-next-plugin.esm.js",
|
|
7
|
+
"preconstruct": {
|
|
8
|
+
"entrypoints": [
|
|
9
|
+
"index.ts"
|
|
10
|
+
]
|
|
11
|
+
},
|
|
7
12
|
"files": [
|
|
8
13
|
"/dist"
|
|
9
14
|
],
|
|
@@ -15,8 +20,7 @@
|
|
|
15
20
|
"author": "SEEK",
|
|
16
21
|
"license": "MIT",
|
|
17
22
|
"dependencies": {
|
|
18
|
-
"@vanilla-extract/webpack-plugin": "^2.3.
|
|
19
|
-
"browserslist": "^4.19.1"
|
|
23
|
+
"@vanilla-extract/webpack-plugin": "^2.3.1"
|
|
20
24
|
},
|
|
21
25
|
"peerDependencies": {
|
|
22
26
|
"next": ">=12.1.7"
|