v0.28.x fails on project using @vanilla-extract/next-plugin

[nayaabkhan]

Background

We have a NextJS project using vanilla-extract with playroom v0.27.9 working well. Playroom config is below.

const webpack = require('webpack')
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  components: './library/components/index.ts',
  snippets: './.playroom/snippets.ts',
  outputPath: './public/playroom',
  frameComponent: './.playroom/FrameComponent.tsx',
  scope: './.playroom/useScope.ts',

  title: 'Prism System',
  baseUrl: '/playroom/',
  openBrowser: false,
  port: 8082,

  widths: [320, 768, 1024, 1280],

  typeScriptFiles: ['library/**/*.{ts,tsx}', '!**/node_modules'],
  webpackConfig: () => ({
    plugins: [
      new VanillaExtractPlugin({
        identifiers: 'short',
      }),
      new MiniCssExtractPlugin({
        ignoreOrder: true,
      }),
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: 'swc-loader',
          },
        },
        {
          test: /\.vanilla\.css$/i,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: require.resolve('css-loader'),
              options: {
                url: false,
              },
            },
          ],
        },
        {
          test: /\.svg$/i,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: 'file-loader',
          },
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.ts', '.tsx'],
      plugins: [new TsconfigPathsPlugin()],
    },
  }),
}

However, upgrading to any v0.28.x causes failure:

-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(4:7) /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js Unknown word

  2 | export {};
  3 |     if(module.hot) {
> 4 |       // 1671772239226
    |       ^
  5 |       var cssReload = require("../../mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
  6 |       module.hot.dispose(cssReload);
Generated code for /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/mini-css-extract-plugin/dist/loader.js!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{"fileName":"node_modules/playroom/src/Playroom/Playroom.css.ts.vanilla.css","source":"aHRtbCB7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiAxMDAlOwogIG92ZXJmbG93OiBoaWRkZW47CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdWlzeDR2MWEpOwp9Cmh0bWxbZGF0YS1wbGF5cm9vbS1kYXJrXSB7CiAgY29sb3Itc2NoZW1lOiBkYXJrOwp9CmJvZHkgewogIG1hcmdpbjogMDsKfQouXzFxOWQ1Ym4zIHsKICBwb3NpdGlvbjogYWJzb2x1dGUgIWltcG9ydGFudDsKfQouXzFxOWQ1Ym42IHsKICBtYXgtd2lkdGg6IDkwdnc7Cn0KLl8xcTlkNWJuNi5fMXE5ZDVibjQgewogIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgxMDAlKTsKfQouXzFxOWQ1Ym44IHsKICBtYXgtaGVpZ2h0OiA5MHZoOwp9Ci5fMXE5ZDVibjguXzFxOWQ1Ym40IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7Cn0KLl8xcTlkNWJuYi5fMXE5ZDVibjkgewogIHdpZHRoOiA2MHB4Owp9Ci5fMXE5ZDVibmQgewogIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgb3V0bGluZTogbm9uZTsKICBtaW4td2lkdGg6IHZhcigtLXVpc3g0dmUpOwogIGhlaWdodDogdmFyKC0tdWlzeDR2ZSk7Cn0KLl8xcTlkNWJuZDo6YmVmb3JlIHsKICBjb250ZW50OiAiIjsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdG9wOiAwOwogIGJvdHRvbTogMDsKICBsZWZ0OiAwOwogIHJpZ2h0OiAwOwogIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjsKICBvcGFjaXR5OiAwOwogIHBvaW50ZXItZXZlbnRzOiBub25lOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXVpc3g0dmIpOwogIHRyYW5zaXRpb246IHZhcigtLXVpc3g0dmYpOwp9Ci5fMXE5ZDVibmQ6bm90KDpob3Zlcik6bm90KDpmb2N1cykgewogIG9wYWNpdHk6IDAuMzsKfQouXzFxOWQ1Ym5kOmhvdmVyOjpiZWZvcmUsIC5fMXE5ZDVibmQ6Zm9jdXM6OmJlZm9yZSB7CiAgb3BhY2l0eTogMC4wNTsKfQouXzFxOWQ1Ym5mIHsKICByaWdodDogNjBweDsKfQ=="}!/Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(4:7) /Users/nayaabkhan/Projects/github.com/StarOfService/prism-system/node_modules/@vanilla-extract/webpack-plugin/extracted.js Unknown word\n\n \u001b[90m 2 | \u001b[39mexport \u001b[33m{\u001b[39m\u001b[33m}\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 3 | \u001b[39m    \u001b[36mif\u001b[39m\u001b[36m(module.hot)\u001b[39m \u001b[33m{\u001b[39m\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 4 | \u001b[39m      // 1671772239226\n \u001b[90m   | \u001b[39m      \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 5 | \u001b[39m      var cssReload = \u001b[36mrequire\u001b[39m\u001b[36m(\u001b[39m\u001b[32m\"../../mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\"\u001b[39m\u001b[36m)\u001b[39m\u001b[36m(\u001b[39mmodule.id, \u001b[33m{\u001b[39m\u001b[32m\"locals\"\u001b[39m\u001b[33m:\u001b[39mfalse\u001b[33m}\u001b[39m\u001b[36m)\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 6 | \u001b[39m      \u001b[36mmodule.hot.dispose\u001b[39m\u001b[36m(cssReload)\u001b[39m\u001b[33m;\u001b[39m\n");

 error  in ./node_modules/@vanilla-extract/webpack-plugin/extracted.js

Syntax Error: HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError