@vanilla-extract/next-plugin 2.3.7 → 2.4.0

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.
Files changed (4) hide show
  1. package/dist/vanilla-extract-next-plugin.cjs.dev.js +41 -19
  2. package/dist/vanilla-extract-next-plugin.cjs.prod.js +41 -19
  3. package/dist/vanilla-extract-next-plugin.esm.js +41 -19
  4. package/package.json +1 -1
package/dist/vanilla-extract-next-plugin.cjs.dev.js CHANGED
@@ -31,23 +31,50 @@ function getSupportedBrowsers(dir, isDevelopment) {
31
31
 
32
32
  // Adopt from Next.js' getGlobalCssLoader
33
33
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
34
- const getVanillaExtractCssLoaders = (options, assetPrefix) => {
34
+ const getVanillaExtractCssLoaders = (options, assetPrefix, hasAppDir) => {
35
35
  const loaders = [];
36
36
 
37
37
  // Adopt from Next.js' getClientStyleLoader
38
38
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
39
39
  if (!options.isServer) {
40
- // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
41
- // next-style-loader will mess up css order in development mode.
42
- // Next.js appDir doesn't use next-style-loader either.
43
- // So we always use css-loader here, to simplify things and get proper order of output CSS
44
- loaders.push({
45
- loader: NextMiniCssExtractPlugin.loader,
46
- options: {
47
- publicPath: `${assetPrefix}/_next/`,
48
- esModule: false
49
- }
50
- });
40
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16
41
+ // Keep next-style-loader for development mode in `pages/`
42
+ if (options.dev && !hasAppDir) {
43
+ loaders.push({
44
+ loader: 'next-style-loader',
45
+ options: {
46
+ insert: function (element) {
47
+ // By default, style-loader injects CSS into the bottom
48
+ // of <head>. This causes ordering problems between dev
49
+ // and prod. To fix this, we render a <noscript> tag as
50
+ // an anchor for the styles to be placed before. These
51
+ // styles will be applied _before_ <style jsx global>.
52
+
53
+ // These elements should always exist. If they do not,
54
+ // this code should fail.
55
+ const anchorElement = document.querySelector('#__next_css__DO_NOT_USE__');
56
+ const parentNode = anchorElement.parentNode; // Normally <head>
57
+
58
+ // Each style tag should be placed right before our
59
+ // anchor. By inserting before and not after, we do not
60
+ // need to track the last inserted element.
61
+ parentNode.insertBefore(element, anchorElement);
62
+ }
63
+ }
64
+ });
65
+ } else {
66
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
67
+ // next-style-loader will mess up css order in development mode.
68
+ // Next.js appDir doesn't use next-style-loader either.
69
+ // So we always use css-loader here, to simplify things and get proper order of output CSS
70
+ loaders.push({
71
+ loader: NextMiniCssExtractPlugin.loader,
72
+ options: {
73
+ publicPath: `${assetPrefix}/_next/`,
74
+ esModule: false
75
+ }
76
+ });
77
+ }
51
78
  }
52
79
  const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
53
80
 
@@ -91,7 +118,6 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
91
118
  const {
92
119
  dir,
93
120
  dev,
94
- isServer,
95
121
  config: resolvedNextConfig
96
122
  } = options;
97
123
 
@@ -102,11 +128,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
102
128
  const findPagesDirResult = findPagesDir.findPagesDir(dir, ((_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir) ?? false);
103
129
  // Skip nextConfig check since appDir is stable feature after Next.js 13.4
104
130
  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;
131
+ const outputCss = true;
110
132
 
111
133
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
112
134
  const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
@@ -117,7 +139,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
117
139
  cssRules.unshift({
118
140
  test: /vanilla\.virtual\.css/i,
119
141
  sideEffects: true,
120
- use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
142
+ use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix, hasAppDir)
121
143
  });
122
144
 
123
145
  // vanilla-extract need to emit the css file on both server and client, both during the
package/dist/vanilla-extract-next-plugin.cjs.prod.js CHANGED
@@ -31,23 +31,50 @@ function getSupportedBrowsers(dir, isDevelopment) {
31
31
 
32
32
  // Adopt from Next.js' getGlobalCssLoader
33
33
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
34
- const getVanillaExtractCssLoaders = (options, assetPrefix) => {
34
+ const getVanillaExtractCssLoaders = (options, assetPrefix, hasAppDir) => {
35
35
  const loaders = [];
36
36
 
37
37
  // Adopt from Next.js' getClientStyleLoader
38
38
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
39
39
  if (!options.isServer) {
40
- // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
41
- // next-style-loader will mess up css order in development mode.
42
- // Next.js appDir doesn't use next-style-loader either.
43
- // So we always use css-loader here, to simplify things and get proper order of output CSS
44
- loaders.push({
45
- loader: NextMiniCssExtractPlugin.loader,
46
- options: {
47
- publicPath: `${assetPrefix}/_next/`,
48
- esModule: false
49
- }
50
- });
40
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16
41
+ // Keep next-style-loader for development mode in `pages/`
42
+ if (options.dev && !hasAppDir) {
43
+ loaders.push({
44
+ loader: 'next-style-loader',
45
+ options: {
46
+ insert: function (element) {
47
+ // By default, style-loader injects CSS into the bottom
48
+ // of <head>. This causes ordering problems between dev
49
+ // and prod. To fix this, we render a <noscript> tag as
50
+ // an anchor for the styles to be placed before. These
51
+ // styles will be applied _before_ <style jsx global>.
52
+
53
+ // These elements should always exist. If they do not,
54
+ // this code should fail.
55
+ const anchorElement = document.querySelector('#__next_css__DO_NOT_USE__');
56
+ const parentNode = anchorElement.parentNode; // Normally <head>
57
+
58
+ // Each style tag should be placed right before our
59
+ // anchor. By inserting before and not after, we do not
60
+ // need to track the last inserted element.
61
+ parentNode.insertBefore(element, anchorElement);
62
+ }
63
+ }
64
+ });
65
+ } else {
66
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
67
+ // next-style-loader will mess up css order in development mode.
68
+ // Next.js appDir doesn't use next-style-loader either.
69
+ // So we always use css-loader here, to simplify things and get proper order of output CSS
70
+ loaders.push({
71
+ loader: NextMiniCssExtractPlugin.loader,
72
+ options: {
73
+ publicPath: `${assetPrefix}/_next/`,
74
+ esModule: false
75
+ }
76
+ });
77
+ }
51
78
  }
52
79
  const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
53
80
 
@@ -91,7 +118,6 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
91
118
  const {
92
119
  dir,
93
120
  dev,
94
- isServer,
95
121
  config: resolvedNextConfig
96
122
  } = options;
97
123
 
@@ -102,11 +128,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
102
128
  const findPagesDirResult = findPagesDir.findPagesDir(dir, ((_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir) ?? false);
103
129
  // Skip nextConfig check since appDir is stable feature after Next.js 13.4
104
130
  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;
131
+ const outputCss = true;
110
132
 
111
133
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
112
134
  const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
@@ -117,7 +139,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
117
139
  cssRules.unshift({
118
140
  test: /vanilla\.virtual\.css/i,
119
141
  sideEffects: true,
120
- use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
142
+ use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix, hasAppDir)
121
143
  });
122
144
 
123
145
  // vanilla-extract need to emit the css file on both server and client, both during the
package/dist/vanilla-extract-next-plugin.esm.js CHANGED
@@ -22,23 +22,50 @@ function getSupportedBrowsers(dir, isDevelopment) {
22
22
 
23
23
  // Adopt from Next.js' getGlobalCssLoader
24
24
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
25
- const getVanillaExtractCssLoaders = (options, assetPrefix) => {
25
+ const getVanillaExtractCssLoaders = (options, assetPrefix, hasAppDir) => {
26
26
  const loaders = [];
27
27
 
28
28
  // Adopt from Next.js' getClientStyleLoader
29
29
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
30
30
  if (!options.isServer) {
31
- // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
32
- // next-style-loader will mess up css order in development mode.
33
- // Next.js appDir doesn't use next-style-loader either.
34
- // So we always use css-loader here, to simplify things and get proper order of output CSS
35
- loaders.push({
36
- loader: NextMiniCssExtractPlugin.loader,
37
- options: {
38
- publicPath: `${assetPrefix}/_next/`,
39
- esModule: false
40
- }
41
- });
31
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16
32
+ // Keep next-style-loader for development mode in `pages/`
33
+ if (options.dev && !hasAppDir) {
34
+ loaders.push({
35
+ loader: 'next-style-loader',
36
+ options: {
37
+ insert: function (element) {
38
+ // By default, style-loader injects CSS into the bottom
39
+ // of <head>. This causes ordering problems between dev
40
+ // and prod. To fix this, we render a <noscript> tag as
41
+ // an anchor for the styles to be placed before. These
42
+ // styles will be applied _before_ <style jsx global>.
43
+
44
+ // These elements should always exist. If they do not,
45
+ // this code should fail.
46
+ const anchorElement = document.querySelector('#__next_css__DO_NOT_USE__');
47
+ const parentNode = anchorElement.parentNode; // Normally <head>
48
+
49
+ // Each style tag should be placed right before our
50
+ // anchor. By inserting before and not after, we do not
51
+ // need to track the last inserted element.
52
+ parentNode.insertBefore(element, anchorElement);
53
+ }
54
+ }
55
+ });
56
+ } else {
57
+ // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
58
+ // next-style-loader will mess up css order in development mode.
59
+ // Next.js appDir doesn't use next-style-loader either.
60
+ // So we always use css-loader here, to simplify things and get proper order of output CSS
61
+ loaders.push({
62
+ loader: NextMiniCssExtractPlugin.loader,
63
+ options: {
64
+ publicPath: `${assetPrefix}/_next/`,
65
+ esModule: false
66
+ }
67
+ });
68
+ }
42
69
  }
43
70
  const postcss = () => lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
44
71
 
@@ -82,7 +109,6 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
82
109
  const {
83
110
  dir,
84
111
  dev,
85
- isServer,
86
112
  config: resolvedNextConfig
87
113
  } = options;
88
114
 
@@ -93,11 +119,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
93
119
  const findPagesDirResult = findPagesDir(dir, ((_resolvedNextConfig$e = resolvedNextConfig.experimental) === null || _resolvedNextConfig$e === void 0 ? void 0 : _resolvedNextConfig$e.appDir) ?? false);
94
120
  // Skip nextConfig check since appDir is stable feature after Next.js 13.4
95
121
  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;
122
+ const outputCss = true;
101
123
 
102
124
  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
103
125
  const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
@@ -108,7 +130,7 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => {
108
130
  cssRules.unshift({
109
131
  test: /vanilla\.virtual\.css/i,
110
132
  sideEffects: true,
111
- use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
133
+ use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix, hasAppDir)
112
134
  });
113
135
 
114
136
  // vanilla-extract need to emit the css file on both server and client, both during the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vanilla-extract/next-plugin",
3
- "version": "2.3.7",
3
+ "version": "2.4.0",
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",