diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap
index bcc392d7..101787b4 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap
@@ -147,10 +147,23 @@ exports[`webpack.config.js properly detects user config files in package mode 1`
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -278,6 +291,7 @@ exports[`webpack.config.js properly detects user config files in package mode 1`
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -455,10 +469,23 @@ exports[`webpack.config.js properly detects user config files in project mode 1`
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -592,6 +619,7 @@ exports[`webpack.config.js properly detects user config files in project mode 1`
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets2","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
@@ -772,10 +800,23 @@ exports[`webpack.config.js returns proper configs for package config 1`] = `
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -903,6 +944,7 @@ exports[`webpack.config.js returns proper configs for package config 1`] = `
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -1081,10 +1123,23 @@ exports[`webpack.config.js returns proper configs for package config with common
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -1212,6 +1267,7 @@ exports[`webpack.config.js returns proper configs for package config with common
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -1391,10 +1447,23 @@ exports[`webpack.config.js returns proper configs for package config with peer d
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -1522,6 +1591,7 @@ exports[`webpack.config.js returns proper configs for package config with peer d
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -1699,10 +1769,23 @@ exports[`webpack.config.js returns proper configs for project configs 1`] = `
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -1836,6 +1919,7 @@ exports[`webpack.config.js returns proper configs for project configs 1`] = `
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "NoBrowserSyncPlugin: {}",
diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap
index f74a52f9..90e5c24d 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap
@@ -149,10 +149,23 @@ exports[`webpack.config.js adds devServer config when passing the --dev-server f
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -281,6 +294,7 @@ exports[`webpack.config.js adds devServer config when passing the --dev-server f
   "plugins": [
     "HtmlWebpackPlugin: {"template":"public/index.html","templateContent":false,"filename":"index.html","publicPath":"auto","hash":false,"inject":"head","scriptLoading":"defer","compile":true,"favicon":false,"minify":"auto","cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"chunksSortMode":"auto","meta":{},"base":false,"title":"Webpack App","xhtml":false}",
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -458,10 +472,23 @@ exports[`webpack.config.js allows changing browsersync port 1`] = `
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -595,6 +622,7 @@ exports[`webpack.config.js allows changing browsersync port 1`] = `
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "NoBrowserSyncPlugin: {}",
@@ -776,10 +804,23 @@ exports[`webpack.config.js builds modules 1`] = `
             "url-loader",
           ],
         },
+        {
+          "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+          "use": [
+            "/node_modules/mini-css-extract-plugin/dist/loader.js",
+            {
+              "loader": "/node_modules/css-loader/dist/cjs.js",
+              "options": {
+                "url": false,
+              },
+            },
+          ],
+        },
         {
           "exclude": [
             /\\\\\\.module\\\\\\.css\\$/,
             /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+            /\\\\\\.vanilla\\\\\\.css\\$/i,
           ],
           "test": /\\\\\\.css\\$/,
           "use": [
@@ -913,6 +954,7 @@ exports[`webpack.config.js builds modules 1`] = `
     },
     "plugins": [
       "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+      "VanillaExtractPlugin: {}",
       "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
       "CopyPlugin: {}",
       "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets2","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
@@ -1089,10 +1131,23 @@ exports[`webpack.config.js builds modules 1`] = `
             "url-loader",
           ],
         },
+        {
+          "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+          "use": [
+            "/node_modules/mini-css-extract-plugin/dist/loader.js",
+            {
+              "loader": "/node_modules/css-loader/dist/cjs.js",
+              "options": {
+                "url": false,
+              },
+            },
+          ],
+        },
         {
           "exclude": [
             /\\\\\\.module\\\\\\.css\\$/,
             /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+            /\\\\\\.vanilla\\\\\\.css\\$/i,
           ],
           "test": /\\\\\\.css\\$/,
           "use": [
@@ -1224,6 +1279,7 @@ exports[`webpack.config.js builds modules 1`] = `
     },
     "plugins": [
       "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+      "VanillaExtractPlugin: {}",
       "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
       "CopyPlugin: {}",
       "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets2","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
@@ -1404,10 +1460,23 @@ exports[`webpack.config.js includes webpack-bundle-analyzer when using --analyze
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -1541,6 +1610,7 @@ exports[`webpack.config.js includes webpack-bundle-analyzer when using --analyze
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
@@ -1721,10 +1791,23 @@ exports[`webpack.config.js includes webpack-bundle-analyzer when using --analyze
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -1858,6 +1941,7 @@ exports[`webpack.config.js includes webpack-bundle-analyzer when using --analyze
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
@@ -2038,10 +2122,23 @@ exports[`webpack.config.js returns proper configs for package config with common
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -2169,6 +2266,7 @@ exports[`webpack.config.js returns proper configs for package config with common
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
@@ -2347,10 +2445,23 @@ exports[`webpack.config.js takes the --target option into account 1`] = `
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -2478,6 +2589,7 @@ exports[`webpack.config.js takes the --target option into account 1`] = `
   },
   "plugins": [
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",
     "WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}",
diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap
index 97eb47f3..43b720f5 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap
@@ -172,10 +172,23 @@ exports[`webpack.config.js includes react-webpack-fast-refresh with the --hot op
           "url-loader",
         ],
       },
+      {
+        "test": /\\\\\\.vanilla\\\\\\.css\\$/i,
+        "use": [
+          "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": {
+              "url": false,
+            },
+          },
+        ],
+      },
       {
         "exclude": [
           /\\\\\\.module\\\\\\.css\\$/,
           /\\\\\\.linaria\\\\\\.module\\\\\\.css/,
+          /\\\\\\.vanilla\\\\\\.css\\$/i,
         ],
         "test": /\\\\\\.css\\$/,
         "use": [
@@ -310,6 +323,7 @@ exports[`webpack.config.js includes react-webpack-fast-refresh with the --hot op
   "plugins": [
     "HtmlWebpackPlugin: {"template":"auto","templateContent":false,"filename":"index.html","publicPath":"auto","hash":false,"inject":"head","scriptLoading":"defer","compile":true,"favicon":false,"minify":"auto","cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"chunksSortMode":"auto","meta":{},"base":false,"title":"Webpack App","xhtml":false}",
     "ESLintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/eslint-webpack-plugin/.eslintcache","extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true}",
+    "VanillaExtractPlugin: {}",
     "MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}",
     "CopyPlugin: {}",
     "StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}",