@vanilla-extract/next-plugin 0.0.0-inline-prototype-202342012537 → 0.0.0-vite-plugin-new-20231229135000

package/dist/vanilla-extract-next-plugin.cjs.d.ts

@@ -1,5 +1,5 @@
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
-import { NextConfig } from 'next/types';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';
+import { NextConfig } from 'next/dist/server/config-shared';
 
 type PluginOptions = ConstructorParameters<typeof VanillaExtractPlugin>[0];
 declare const createVanillaExtractPlugin: (pluginOptions?: PluginOptions) => (nextConfig?: NextConfig) => NextConfig;

package/dist/vanilla-extract-next-plugin.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla-extract-next-plugin.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/vanilla-extract-next-plugin.cjs.dev.js

@@ -2,59 +2,157 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var webpackPlugin = require('@vanilla-extract/webpack-plugin');
-var browserslist = require('browserslist');
+var browserslist = require('next/dist/compiled/browserslist');
+var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var next = require('@vanilla-extract/webpack-plugin/next');
+var findPagesDir = require('next/dist/lib/find-pages-dir');
 var css = require('next/dist/build/webpack/config/blocks/css');
-var loaders = require('next/dist/build/webpack/config/blocks/css/loaders');
+var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
+var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
 
+// @ts-expect-error
+const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
+
+// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
 function getSupportedBrowsers(dir, isDevelopment) {
-  let browsers;
   try {
-    browsers = browserslist__default["default"].loadConfig({
+    return browserslist__default["default"].loadConfig({
       path: dir,
       env: isDevelopment ? 'development' : 'production'
     });
-  } catch {}
-  return browsers;
+  } catch (_) {
+    return undefined;
+  }
 }
-const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
-  webpack(config, options) {
-    var _nextConfig$experimen;
-    const {
-      dir,
-      dev,
-      isServer
-    } = options;
-    const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
-      test
-    }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
-    cssRules.unshift({
-      test: /\.vanilla\.css$/i,
-      sideEffects: true,
-      use: loaders.getGlobalCssLoader({
-        assetPrefix: config.assetPrefix,
-        isClient: !isServer,
-        isServer,
-        isDevelopment: dev,
-        future: nextConfig.future || {},
-        experimental: nextConfig.experimental || {},
-        // @ts-ignore -- 'appDir' config is in beta
-        hasAppDir: (_nextConfig$experimen = nextConfig.experimental) === null || _nextConfig$experimen === void 0 ? void 0 : _nextConfig$experimen.appDir
-      }, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
+
+// Adopt from Next.js' getGlobalCssLoader
+// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
+const getVanillaExtractCssLoaders = (options, assetPrefix) => {
+  const loaders = [];
+
+  // Adopt from Next.js' getClientStyleLoader
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
+  if (!options.isServer) {
+    // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
+    // next-style-loader will mess up css order in development mode.
+    // Next.js appDir doesn't use next-style-loader either.
+    // So we always use css-loader here, to simplify things and get proper order of output CSS
+    loaders.push({
+      loader: NextMiniCssExtractPlugin.loader,
+      options: {
+        publicPath: `${assetPrefix}/_next/`,
+        esModule: false
+      }
     });
-    config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
-      outputCss: !isServer,
-      ...pluginOptions
-    }));
-    if (typeof nextConfig.webpack === 'function') {
-      return nextConfig.webpack(config, options);
-    }
-    return config;
   }
-});
+  const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
+    options: {
+      postcss,
+      importLoaders: 1,
+      modules: false,
+      url: (url, resourcePath) => fileResolve.cssFileResolve(url, resourcePath, options.config.experimental?.urlImports),
+      import: (url, _, resourcePath) => fileResolve.cssFileResolve(url, resourcePath, options.config.experimental?.urlImports)
+    }
+  });
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
+    options: {
+      postcss
+    }
+  });
+
+  // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
+  loaders.push({
+    loader: next.VanillaExtractPlugin.loader
+  });
+  return loaders;
+};
+const createVanillaExtractPlugin = (pluginOptions = {}) => {
+  return (nextConfig = {}) => ({
+    ...nextConfig,
+    webpack(config, options) {
+      const {
+        dir,
+        dev,
+        isServer,
+        config: resolvedNextConfig
+      } = options;
+
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
+      // https://github.com/vercel/next.js/pull/43916
+      // on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
+      const findPagesDirResult = findPagesDir.findPagesDir(dir, resolvedNextConfig.experimental?.appDir ?? false);
+      // Skip nextConfig check since appDir is stable feature after Next.js 13.4
+      const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
+      const outputCss = hasAppDir ?
+      // Always output css since Next.js App Router needs to collect Server CSS from React Server Components
+      true :
+      // There is no appDir, do not output css on server build
+      !isServer;
+
+      // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
+      const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
+        test
+      }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
+
+      // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
+      cssRules.unshift({
+        test: /vanilla\.virtual\.css/i,
+        sideEffects: true,
+        use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
+      });
+
+      // vanilla-extract need to emit the css file on both server and client, both during the
+      // development and production.
+      // However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
+      //
+      // To simplify the logic at our side, we will add MiniCssExtractPlugin based on
+      // the "instanceof" check (We will only add our required MiniCssExtractPlugin if
+      // Next.js hasn't added it yet).
+      // This also prevent multiple MiniCssExtractPlugin being added (which will cause
+      // RealContentHashPlugin to panic)
+      if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
+        // HMR reloads the CSS file when the content changes but does not use
+        // the new file name, which means it can't contain a hash.
+        const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+        config.plugins.push(new NextMiniCssExtractPlugin({
+          filename,
+          chunkFilename: filename,
+          // Next.js guarantees that CSS order "doesn't matter", due to imposed
+          // restrictions:
+          // 1. Global CSS can only be defined in a single entrypoint (_app)
+          // 2. CSS Modules generate scoped class names by default and cannot
+          //    include Global CSS (:global() selector).
+          //
+          // While not a perfect guarantee (e.g. liberal use of `:global()`
+          // selector), this assumption is required to code-split CSS.
+          //
+          // If this warning were to trigger, it'd be unactionable by the user,
+          // but likely not valid -- so just disable it.
+          ignoreOrder: true
+        }));
+      }
+      config.plugins.push(new next.VanillaExtractPlugin({
+        outputCss,
+        ...pluginOptions
+      }));
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  });
+};
 
 exports.createVanillaExtractPlugin = createVanillaExtractPlugin;

package/dist/vanilla-extract-next-plugin.cjs.prod.js

@@ -2,59 +2,157 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var webpackPlugin = require('@vanilla-extract/webpack-plugin');
-var browserslist = require('browserslist');
+var browserslist = require('next/dist/compiled/browserslist');
+var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var next = require('@vanilla-extract/webpack-plugin/next');
+var findPagesDir = require('next/dist/lib/find-pages-dir');
 var css = require('next/dist/build/webpack/config/blocks/css');
-var loaders = require('next/dist/build/webpack/config/blocks/css/loaders');
+var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var browserslist__default = /*#__PURE__*/_interopDefault(browserslist);
+var NextMiniCssExtractPluginDefault__default = /*#__PURE__*/_interopDefault(NextMiniCssExtractPluginDefault);
 
+// @ts-expect-error
+const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault__default["default"];
+
+// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
 function getSupportedBrowsers(dir, isDevelopment) {
-  let browsers;
   try {
-    browsers = browserslist__default["default"].loadConfig({
+    return browserslist__default["default"].loadConfig({
       path: dir,
       env: isDevelopment ? 'development' : 'production'
     });
-  } catch {}
-  return browsers;
+  } catch (_) {
+    return undefined;
+  }
 }
-const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
-  webpack(config, options) {
-    var _nextConfig$experimen;
-    const {
-      dir,
-      dev,
-      isServer
-    } = options;
-    const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
-      test
-    }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
-    cssRules.unshift({
-      test: /\.vanilla\.css$/i,
-      sideEffects: true,
-      use: loaders.getGlobalCssLoader({
-        assetPrefix: config.assetPrefix,
-        isClient: !isServer,
-        isServer,
-        isDevelopment: dev,
-        future: nextConfig.future || {},
-        experimental: nextConfig.experimental || {},
-        // @ts-ignore -- 'appDir' config is in beta
-        hasAppDir: (_nextConfig$experimen = nextConfig.experimental) === null || _nextConfig$experimen === void 0 ? void 0 : _nextConfig$experimen.appDir
-      }, () => css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
+
+// Adopt from Next.js' getGlobalCssLoader
+// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
+const getVanillaExtractCssLoaders = (options, assetPrefix) => {
+  const loaders = [];
+
+  // Adopt from Next.js' getClientStyleLoader
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
+  if (!options.isServer) {
+    // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
+    // next-style-loader will mess up css order in development mode.
+    // Next.js appDir doesn't use next-style-loader either.
+    // So we always use css-loader here, to simplify things and get proper order of output CSS
+    loaders.push({
+      loader: NextMiniCssExtractPlugin.loader,
+      options: {
+        publicPath: `${assetPrefix}/_next/`,
+        esModule: false
+      }
     });
-    config.plugins.push(new webpackPlugin.VanillaExtractPlugin({
-      outputCss: !isServer,
-      ...pluginOptions
-    }));
-    if (typeof nextConfig.webpack === 'function') {
-      return nextConfig.webpack(config, options);
-    }
-    return config;
   }
-});
+  const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
+    options: {
+      postcss,
+      importLoaders: 1,
+      modules: false,
+      url: (url, resourcePath) => fileResolve.cssFileResolve(url, resourcePath, options.config.experimental?.urlImports),
+      import: (url, _, resourcePath) => fileResolve.cssFileResolve(url, resourcePath, options.config.experimental?.urlImports)
+    }
+  });
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
+    options: {
+      postcss
+    }
+  });
+
+  // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
+  loaders.push({
+    loader: next.VanillaExtractPlugin.loader
+  });
+  return loaders;
+};
+const createVanillaExtractPlugin = (pluginOptions = {}) => {
+  return (nextConfig = {}) => ({
+    ...nextConfig,
+    webpack(config, options) {
+      const {
+        dir,
+        dev,
+        isServer,
+        config: resolvedNextConfig
+      } = options;
+
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
+      // https://github.com/vercel/next.js/pull/43916
+      // on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
+      const findPagesDirResult = findPagesDir.findPagesDir(dir, resolvedNextConfig.experimental?.appDir ?? false);
+      // Skip nextConfig check since appDir is stable feature after Next.js 13.4
+      const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
+      const outputCss = hasAppDir ?
+      // Always output css since Next.js App Router needs to collect Server CSS from React Server Components
+      true :
+      // There is no appDir, do not output css on server build
+      !isServer;
+
+      // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
+      const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
+        test
+      }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
+
+      // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
+      cssRules.unshift({
+        test: /vanilla\.virtual\.css/i,
+        sideEffects: true,
+        use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
+      });
+
+      // vanilla-extract need to emit the css file on both server and client, both during the
+      // development and production.
+      // However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
+      //
+      // To simplify the logic at our side, we will add MiniCssExtractPlugin based on
+      // the "instanceof" check (We will only add our required MiniCssExtractPlugin if
+      // Next.js hasn't added it yet).
+      // This also prevent multiple MiniCssExtractPlugin being added (which will cause
+      // RealContentHashPlugin to panic)
+      if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
+        // HMR reloads the CSS file when the content changes but does not use
+        // the new file name, which means it can't contain a hash.
+        const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+        config.plugins.push(new NextMiniCssExtractPlugin({
+          filename,
+          chunkFilename: filename,
+          // Next.js guarantees that CSS order "doesn't matter", due to imposed
+          // restrictions:
+          // 1. Global CSS can only be defined in a single entrypoint (_app)
+          // 2. CSS Modules generate scoped class names by default and cannot
+          //    include Global CSS (:global() selector).
+          //
+          // While not a perfect guarantee (e.g. liberal use of `:global()`
+          // selector), this assumption is required to code-split CSS.
+          //
+          // If this warning were to trigger, it'd be unactionable by the user,
+          // but likely not valid -- so just disable it.
+          ignoreOrder: true
+        }));
+      }
+      config.plugins.push(new next.VanillaExtractPlugin({
+        outputCss,
+        ...pluginOptions
+      }));
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  });
+};
 
 exports.createVanillaExtractPlugin = createVanillaExtractPlugin;

package/dist/vanilla-extract-next-plugin.esm.js

@@ -1,52 +1,149 @@
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
-import browserslist from 'browserslist';
+import browserslist from 'next/dist/compiled/browserslist';
+import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';
+import { findPagesDir } from 'next/dist/lib/find-pages-dir';
 import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
-import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders';
+import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve';
 
+// @ts-expect-error
+const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault;
+
+// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
 function getSupportedBrowsers(dir, isDevelopment) {
-  let browsers;
   try {
-    browsers = browserslist.loadConfig({
+    return browserslist.loadConfig({
       path: dir,
       env: isDevelopment ? 'development' : 'production'
     });
-  } catch {}
-  return browsers;
+  } catch (_) {
+    return undefined;
+  }
 }
-const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) => Object.assign({}, nextConfig, {
-  webpack(config, options) {
-    var _nextConfig$experimen;
-    const {
-      dir,
-      dev,
-      isServer
-    } = options;
-    const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
-      test
-    }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
-    cssRules.unshift({
-      test: /\.vanilla\.css$/i,
-      sideEffects: true,
-      use: getGlobalCssLoader({
-        assetPrefix: config.assetPrefix,
-        isClient: !isServer,
-        isServer,
-        isDevelopment: dev,
-        future: nextConfig.future || {},
-        experimental: nextConfig.experimental || {},
-        // @ts-ignore -- 'appDir' config is in beta
-        hasAppDir: (_nextConfig$experimen = nextConfig.experimental) === null || _nextConfig$experimen === void 0 ? void 0 : _nextConfig$experimen.appDir
-      }, () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), [])
+
+// Adopt from Next.js' getGlobalCssLoader
+// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
+const getVanillaExtractCssLoaders = (options, assetPrefix) => {
+  const loaders = [];
+
+  // Adopt from Next.js' getClientStyleLoader
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
+  if (!options.isServer) {
+    // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44
+    // next-style-loader will mess up css order in development mode.
+    // Next.js appDir doesn't use next-style-loader either.
+    // So we always use css-loader here, to simplify things and get proper order of output CSS
+    loaders.push({
+      loader: NextMiniCssExtractPlugin.loader,
+      options: {
+        publicPath: `${assetPrefix}/_next/`,
+        esModule: false
+      }
     });
-    config.plugins.push(new VanillaExtractPlugin({
-      outputCss: !isServer,
-      ...pluginOptions
-    }));
-    if (typeof nextConfig.webpack === 'function') {
-      return nextConfig.webpack(config, options);
-    }
-    return config;
   }
-});
+  const postcss = () => lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
+    options: {
+      postcss,
+      importLoaders: 1,
+      modules: false,
+      url: (url, resourcePath) => cssFileResolve(url, resourcePath, options.config.experimental?.urlImports),
+      import: (url, _, resourcePath) => cssFileResolve(url, resourcePath, options.config.experimental?.urlImports)
+    }
+  });
+
+  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
+  loaders.push({
+    loader: require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),
+    options: {
+      postcss
+    }
+  });
+
+  // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105
+  loaders.push({
+    loader: VanillaExtractPlugin.loader
+  });
+  return loaders;
+};
+const createVanillaExtractPlugin = (pluginOptions = {}) => {
+  return (nextConfig = {}) => ({
+    ...nextConfig,
+    webpack(config, options) {
+      const {
+        dir,
+        dev,
+        isServer,
+        config: resolvedNextConfig
+      } = options;
+
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336
+      // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626
+      // https://github.com/vercel/next.js/pull/43916
+      // on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object
+      const findPagesDirResult = findPagesDir(dir, resolvedNextConfig.experimental?.appDir ?? false);
+      // Skip nextConfig check since appDir is stable feature after Next.js 13.4
+      const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
+      const outputCss = hasAppDir ?
+      // Always output css since Next.js App Router needs to collect Server CSS from React Server Components
+      true :
+      // There is no appDir, do not output css on server build
+      !isServer;
+
+      // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21
+      const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
+        test
+      }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
+
+      // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190
+      cssRules.unshift({
+        test: /vanilla\.virtual\.css/i,
+        sideEffects: true,
+        use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
+      });
+
+      // vanilla-extract need to emit the css file on both server and client, both during the
+      // development and production.
+      // However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.
+      //
+      // To simplify the logic at our side, we will add MiniCssExtractPlugin based on
+      // the "instanceof" check (We will only add our required MiniCssExtractPlugin if
+      // Next.js hasn't added it yet).
+      // This also prevent multiple MiniCssExtractPlugin being added (which will cause
+      // RealContentHashPlugin to panic)
+      if (!config.plugins.some(p => p instanceof NextMiniCssExtractPlugin)) {
+        // HMR reloads the CSS file when the content changes but does not use
+        // the new file name, which means it can't contain a hash.
+        const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+        config.plugins.push(new NextMiniCssExtractPlugin({
+          filename,
+          chunkFilename: filename,
+          // Next.js guarantees that CSS order "doesn't matter", due to imposed
+          // restrictions:
+          // 1. Global CSS can only be defined in a single entrypoint (_app)
+          // 2. CSS Modules generate scoped class names by default and cannot
+          //    include Global CSS (:global() selector).
+          //
+          // While not a perfect guarantee (e.g. liberal use of `:global()`
+          // selector), this assumption is required to code-split CSS.
+          //
+          // If this warning were to trigger, it'd be unactionable by the user,
+          // but likely not valid -- so just disable it.
+          ignoreOrder: true
+        }));
+      }
+      config.plugins.push(new VanillaExtractPlugin({
+        outputCss,
+        ...pluginOptions
+      }));
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  });
+};
 
 export { createVanillaExtractPlugin };

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@vanilla-extract/next-plugin",
-  "version": "0.0.0-inline-prototype-202342012537",
+  "version": "0.0.0-vite-plugin-new-20231229135000",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-next-plugin.cjs.js",
   "module": "dist/vanilla-extract-next-plugin.esm.js",
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts"
+    ]
+  },
   "files": [
     "/dist"
   ],
@@ -15,13 +20,13 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/webpack-plugin": "^0.0.0-inline-prototype-202342012537",
-    "browserslist": "^4.19.1"
+    "@vanilla-extract/webpack-plugin": "0.0.0-vite-plugin-new-20231229135000"
   },
   "peerDependencies": {
-    "next": ">=12.0.5"
+    "next": ">=12.1.7"
   },
   "devDependencies": {
-    "next": "^12.0.5"
+    "next": "12.3.4",
+    "webpack": "^5.36.1"
   }
 }