@vanilla-extract/next-plugin 2.1.3 → 2.2.1
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.
|
@@ -5,12 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var webpackPlugin = require('@vanilla-extract/webpack-plugin');
|
|
6
6
|
var browserslist = require('browserslist');
|
|
7
7
|
var css = require('next/dist/build/webpack/config/blocks/css');
|
|
8
|
-
var
|
|
8
|
+
var findPagesDir = require('next/dist/lib/find-pages-dir');
|
|
9
|
+
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
9
10
|
|
|
10
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
|
|
14
|
+
var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
|
|
13
15
|
|
|
16
|
+
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
|
|
14
17
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
15
18
|
let browsers;
|
|
16
19
|
try {
|
|
@@ -21,34 +24,108 @@ function getSupportedBrowsers(dir, isDevelopment) {
|
|
|
21
24
|
} catch {}
|
|
22
25
|
return browsers;
|
|
23
26
|
}
|
|
27
|
+
// https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
28
|
+
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
29
|
+
const loaders = [];
|
|
30
|
+
|
|
31
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L14
|
|
32
|
+
if (!options.isServer) {
|
|
33
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
34
|
+
// next-style-loader will mess up css order in development mode.
|
|
35
|
+
// Next.js appDir doesn't use next-style-loader either.
|
|
36
|
+
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
37
|
+
loaders.push({
|
|
38
|
+
loader: NextMiniCssExtractPlugin.loader,
|
|
39
|
+
options: {
|
|
40
|
+
publicPath: `${assetPrefix}/_next/`,
|
|
41
|
+
esModule: false
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
46
|
+
|
|
47
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
48
|
+
loaders.push({
|
|
49
|
+
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
50
|
+
options: {
|
|
51
|
+
postcss,
|
|
52
|
+
importLoaders: 1,
|
|
53
|
+
modules: false
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L43
|
|
58
|
+
loaders.push({
|
|
59
|
+
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
60
|
+
options: {
|
|
61
|
+
postcss
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return loaders;
|
|
65
|
+
};
|
|
24
66
|
const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
|
|
25
67
|
webpack(config, options) {
|
|
26
|
-
var _resolvedNextConfig$e;
|
|
68
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
27
69
|
const {
|
|
28
70
|
dir,
|
|
29
71
|
dev,
|
|
30
72
|
isServer,
|
|
31
73
|
config: resolvedNextConfig
|
|
32
74
|
} = options;
|
|
75
|
+
const findPagesDirResult = findPagesDir.findPagesDir(dir, (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir);
|
|
76
|
+
|
|
77
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
78
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
79
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
80
|
+
const hasAppDir =
|
|
81
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
82
|
+
!!((_resolvedNextConfig$e2 = resolvedNextConfig.experimental) !== null && _resolvedNextConfig$e2 !== void 0 && _resolvedNextConfig$e2.appDir) && !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
83
|
+
const outputCss = hasAppDir ?
|
|
84
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
85
|
+
true :
|
|
86
|
+
// There is no appDir, do not output css on server build
|
|
87
|
+
!isServer;
|
|
33
88
|
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
34
89
|
test
|
|
35
90
|
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
36
91
|
cssRules.unshift({
|
|
37
92
|
test: /\.vanilla\.css$/i,
|
|
38
93
|
sideEffects: true,
|
|
39
|
-
use:
|
|
40
|
-
assetPrefix: config.assetPrefix,
|
|
41
|
-
isClient: !isServer,
|
|
42
|
-
isServer,
|
|
43
|
-
isDevelopment: dev,
|
|
44
|
-
future: resolvedNextConfig.future || {},
|
|
45
|
-
experimental: resolvedNextConfig.experimental || {},
|
|
46
|
-
// @ts-ignore -- 'appDir' config is in beta
|
|
47
|
-
hasAppDir: (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir
|
|
48
|
-
}, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
|
|
94
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
49
95
|
});
|
|
96
|
+
|
|
97
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
98
|
+
// development and production.
|
|
99
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
100
|
+
//
|
|
101
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
102
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
103
|
+
// Next.js hasn't added it yet).
|
|
104
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
105
|
+
// RealContentHashPlugin to panic)
|
|
106
|
+
if (!config.plugins.some(plugin => plugin instanceof NextMiniCssExtractPlugin)) {
|
|
107
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
108
|
+
// the new file name, which means it can't contain a hash.
|
|
109
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
110
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
111
|
+
filename,
|
|
112
|
+
chunkFilename: filename,
|
|
113
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
114
|
+
// restrictions:
|
|
115
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
116
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
117
|
+
// include Global CSS (:global() selector).
|
|
118
|
+
//
|
|
119
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
120
|
+
// selector), this assumption is required to code-split CSS.
|
|
121
|
+
//
|
|
122
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
123
|
+
// but likely not valid -- so just disable it.
|
|
124
|
+
ignoreOrder: true
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
50
127
|
config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
|
|
51
|
-
outputCss
|
|
128
|
+
outputCss,
|
|
52
129
|
...pluginOptions
|
|
53
130
|
}));
|
|
54
131
|
if (typeof nextConfig.webpack === 'function') {
|
|
@@ -5,12 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var webpackPlugin = require('@vanilla-extract/webpack-plugin');
|
|
6
6
|
var browserslist = require('browserslist');
|
|
7
7
|
var css = require('next/dist/build/webpack/config/blocks/css');
|
|
8
|
-
var
|
|
8
|
+
var findPagesDir = require('next/dist/lib/find-pages-dir');
|
|
9
|
+
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
|
|
9
10
|
|
|
10
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
|
|
14
|
+
var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
|
|
13
15
|
|
|
16
|
+
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
|
|
14
17
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
15
18
|
let browsers;
|
|
16
19
|
try {
|
|
@@ -21,34 +24,108 @@ function getSupportedBrowsers(dir, isDevelopment) {
|
|
|
21
24
|
} catch {}
|
|
22
25
|
return browsers;
|
|
23
26
|
}
|
|
27
|
+
// https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
28
|
+
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
29
|
+
const loaders = [];
|
|
30
|
+
|
|
31
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L14
|
|
32
|
+
if (!options.isServer) {
|
|
33
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
34
|
+
// next-style-loader will mess up css order in development mode.
|
|
35
|
+
// Next.js appDir doesn't use next-style-loader either.
|
|
36
|
+
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
37
|
+
loaders.push({
|
|
38
|
+
loader: NextMiniCssExtractPlugin.loader,
|
|
39
|
+
options: {
|
|
40
|
+
publicPath: `${assetPrefix}/_next/`,
|
|
41
|
+
esModule: false
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
46
|
+
|
|
47
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
48
|
+
loaders.push({
|
|
49
|
+
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
50
|
+
options: {
|
|
51
|
+
postcss,
|
|
52
|
+
importLoaders: 1,
|
|
53
|
+
modules: false
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L43
|
|
58
|
+
loaders.push({
|
|
59
|
+
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
60
|
+
options: {
|
|
61
|
+
postcss
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return loaders;
|
|
65
|
+
};
|
|
24
66
|
const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
|
|
25
67
|
webpack(config, options) {
|
|
26
|
-
var _resolvedNextConfig$e;
|
|
68
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
27
69
|
const {
|
|
28
70
|
dir,
|
|
29
71
|
dev,
|
|
30
72
|
isServer,
|
|
31
73
|
config: resolvedNextConfig
|
|
32
74
|
} = options;
|
|
75
|
+
const findPagesDirResult = findPagesDir.findPagesDir(dir, (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir);
|
|
76
|
+
|
|
77
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
78
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
79
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
80
|
+
const hasAppDir =
|
|
81
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
82
|
+
!!((_resolvedNextConfig$e2 = resolvedNextConfig.experimental) !== null && _resolvedNextConfig$e2 !== void 0 && _resolvedNextConfig$e2.appDir) && !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
83
|
+
const outputCss = hasAppDir ?
|
|
84
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
85
|
+
true :
|
|
86
|
+
// There is no appDir, do not output css on server build
|
|
87
|
+
!isServer;
|
|
33
88
|
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
34
89
|
test
|
|
35
90
|
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
36
91
|
cssRules.unshift({
|
|
37
92
|
test: /\.vanilla\.css$/i,
|
|
38
93
|
sideEffects: true,
|
|
39
|
-
use:
|
|
40
|
-
assetPrefix: config.assetPrefix,
|
|
41
|
-
isClient: !isServer,
|
|
42
|
-
isServer,
|
|
43
|
-
isDevelopment: dev,
|
|
44
|
-
future: resolvedNextConfig.future || {},
|
|
45
|
-
experimental: resolvedNextConfig.experimental || {},
|
|
46
|
-
// @ts-ignore -- 'appDir' config is in beta
|
|
47
|
-
hasAppDir: (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir
|
|
48
|
-
}, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
|
|
94
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
49
95
|
});
|
|
96
|
+
|
|
97
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
98
|
+
// development and production.
|
|
99
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
100
|
+
//
|
|
101
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
102
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
103
|
+
// Next.js hasn't added it yet).
|
|
104
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
105
|
+
// RealContentHashPlugin to panic)
|
|
106
|
+
if (!config.plugins.some(plugin => plugin instanceof NextMiniCssExtractPlugin)) {
|
|
107
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
108
|
+
// the new file name, which means it can't contain a hash.
|
|
109
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
110
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
111
|
+
filename,
|
|
112
|
+
chunkFilename: filename,
|
|
113
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
114
|
+
// restrictions:
|
|
115
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
116
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
117
|
+
// include Global CSS (:global() selector).
|
|
118
|
+
//
|
|
119
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
120
|
+
// selector), this assumption is required to code-split CSS.
|
|
121
|
+
//
|
|
122
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
123
|
+
// but likely not valid -- so just disable it.
|
|
124
|
+
ignoreOrder: true
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
50
127
|
config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
|
|
51
|
-
outputCss
|
|
128
|
+
outputCss,
|
|
52
129
|
...pluginOptions
|
|
53
130
|
}));
|
|
54
131
|
if (typeof nextConfig.webpack === 'function') {
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
|
|
2
2
|
import browserslist from 'browserslist';
|
|
3
3
|
import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
|
|
4
|
-
import {
|
|
4
|
+
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
|
|
5
|
+
import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
|
|
5
6
|
|
|
7
|
+
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault;
|
|
6
8
|
function getSupportedBrowsers(dir, isDevelopment) {
|
|
7
9
|
let browsers;
|
|
8
10
|
try {
|
|
@@ -13,34 +15,108 @@ function getSupportedBrowsers(dir, isDevelopment) {
|
|
|
13
15
|
} catch {}
|
|
14
16
|
return browsers;
|
|
15
17
|
}
|
|
18
|
+
// https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
|
|
19
|
+
const getVanillaExtractCssLoaders = (options, assetPrefix) => {
|
|
20
|
+
const loaders = [];
|
|
21
|
+
|
|
22
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L14
|
|
23
|
+
if (!options.isServer) {
|
|
24
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
|
|
25
|
+
// next-style-loader will mess up css order in development mode.
|
|
26
|
+
// Next.js appDir doesn't use next-style-loader either.
|
|
27
|
+
// So we always use css-loader here, to simplify things and get proper order of output CSS
|
|
28
|
+
loaders.push({
|
|
29
|
+
loader: NextMiniCssExtractPlugin.loader,
|
|
30
|
+
options: {
|
|
31
|
+
publicPath: `${assetPrefix}/_next/`,
|
|
32
|
+
esModule: false
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
const postcss = () => lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
|
|
37
|
+
|
|
38
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
|
|
39
|
+
loaders.push({
|
|
40
|
+
loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
|
|
41
|
+
options: {
|
|
42
|
+
postcss,
|
|
43
|
+
importLoaders: 1,
|
|
44
|
+
modules: false
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// https://github.com/vercel/next.js/blob/a4f2bbbe2047d4ed88e9b6f32f6b0adfc8d0c46a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L43
|
|
49
|
+
loaders.push({
|
|
50
|
+
loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
|
|
51
|
+
options: {
|
|
52
|
+
postcss
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
return loaders;
|
|
56
|
+
};
|
|
16
57
|
const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
|
|
17
58
|
webpack(config, options) {
|
|
18
|
-
var _resolvedNextConfig$e;
|
|
59
|
+
var _resolvedNextConfig$e, _resolvedNextConfig$e2;
|
|
19
60
|
const {
|
|
20
61
|
dir,
|
|
21
62
|
dev,
|
|
22
63
|
isServer,
|
|
23
64
|
config: resolvedNextConfig
|
|
24
65
|
} = options;
|
|
66
|
+
const findPagesDirResult = findPagesDir(dir, (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir);
|
|
67
|
+
|
|
68
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
|
|
69
|
+
// https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
|
|
70
|
+
// https://github.com/vercel/next.js/pull/43916
|
|
71
|
+
const hasAppDir =
|
|
72
|
+
// on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
|
|
73
|
+
!!((_resolvedNextConfig$e2 = resolvedNextConfig.experimental) !== null && _resolvedNextConfig$e2 !== void 0 && _resolvedNextConfig$e2.appDir) && !!(findPagesDirResult && findPagesDirResult.appDir);
|
|
74
|
+
const outputCss = hasAppDir ?
|
|
75
|
+
// Always output css since Next.js App Router needs to collect Server CSS from React Server Components
|
|
76
|
+
true :
|
|
77
|
+
// There is no appDir, do not output css on server build
|
|
78
|
+
!isServer;
|
|
25
79
|
const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
|
|
26
80
|
test
|
|
27
81
|
}) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
|
|
28
82
|
cssRules.unshift({
|
|
29
83
|
test: /\.vanilla\.css$/i,
|
|
30
84
|
sideEffects: true,
|
|
31
|
-
use:
|
|
32
|
-
assetPrefix: config.assetPrefix,
|
|
33
|
-
isClient: !isServer,
|
|
34
|
-
isServer,
|
|
35
|
-
isDevelopment: dev,
|
|
36
|
-
future: resolvedNextConfig.future || {},
|
|
37
|
-
experimental: resolvedNextConfig.experimental || {},
|
|
38
|
-
// @ts-ignore -- 'appDir' config is in beta
|
|
39
|
-
hasAppDir: (_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir
|
|
40
|
-
}, () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
|
|
85
|
+
use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
|
|
41
86
|
});
|
|
87
|
+
|
|
88
|
+
// vanilla-extract need to emit the css file on both server and client, both during the
|
|
89
|
+
// development and production.
|
|
90
|
+
// However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
|
|
91
|
+
//
|
|
92
|
+
// To simplify the logic at our side, we will add MiniCssExtractPlugin based on
|
|
93
|
+
// the "instanceof" check (We will only add our required MiniCssExtractPlugin if
|
|
94
|
+
// Next.js hasn't added it yet).
|
|
95
|
+
// This also prevent multiple MiniCssExtractPlugin being added (which will cause
|
|
96
|
+
// RealContentHashPlugin to panic)
|
|
97
|
+
if (!config.plugins.some(plugin => plugin instanceof NextMiniCssExtractPlugin)) {
|
|
98
|
+
// HMR reloads the CSS file when the content changes but does not use
|
|
99
|
+
// the new file name, which means it can't contain a hash.
|
|
100
|
+
const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
|
|
101
|
+
config.plugins.push(new NextMiniCssExtractPlugin({
|
|
102
|
+
filename,
|
|
103
|
+
chunkFilename: filename,
|
|
104
|
+
// Next.js guarantees that CSS order "doesn't matter", due to imposed
|
|
105
|
+
// restrictions:
|
|
106
|
+
// 1. Global CSS can only be defined in a single entrypoint (_app)
|
|
107
|
+
// 2. CSS Modules generate scoped class names by default and cannot
|
|
108
|
+
// include Global CSS (:global() selector).
|
|
109
|
+
//
|
|
110
|
+
// While not a perfect guarantee (e.g. liberal use of `:global()`
|
|
111
|
+
// selector), this assumption is required to code-split CSS.
|
|
112
|
+
//
|
|
113
|
+
// If this warning were to trigger, it'd be unactionable by the user,
|
|
114
|
+
// but likely not valid -- so just disable it.
|
|
115
|
+
ignoreOrder: true
|
|
116
|
+
}));
|
|
117
|
+
}
|
|
42
118
|
config.plugins.push(new VanillaExtractPlugin({
|
|
43
|
-
outputCss
|
|
119
|
+
outputCss,
|
|
44
120
|
...pluginOptions
|
|
45
121
|
}));
|
|
46
122
|
if (typeof nextConfig.webpack === 'function') {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vanilla-extract/next-plugin",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
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",
|
|
@@ -19,9 +19,10 @@
|
|
|
19
19
|
"browserslist": "^4.19.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"next": ">=12.
|
|
22
|
+
"next": ">=12.1.7"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"next": "
|
|
25
|
+
"next": "12.3.4",
|
|
26
|
+
"webpack": "^5.36.1"
|
|
26
27
|
}
|
|
27
28
|
}
|