-
Notifications
You must be signed in to change notification settings - Fork 292
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When developing with Next.js, css is not generated #1152
Comments
I've been looking into this a bit. It only happens between navigation in the One more thing is that HMR doesn't work either.
No solution in sight though. Trying to debug further. Possible culprit? #1105 EDIT 2: This patch works for us for now with only diff --git a/dist/vanilla-extract-next-plugin.cjs.dev.js b/dist/vanilla-extract-next-plugin.cjs.dev.js
index 0f6ca91fc7cdc332b5274d54993830782366093c..1f61384b80f726b5870bf3a581501a7e99e29c58 100644
--- a/dist/vanilla-extract-next-plugin.cjs.dev.js
+++ b/dist/vanilla-extract-next-plugin.cjs.dev.js
@@ -8,6 +8,7 @@ var css = require('next/dist/build/webpack/config/blocks/css');
var findPagesDir = require('next/dist/lib/find-pages-dir');
var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var {getGlobalCssLoader} = require('next/dist/build/webpack/config/blocks/css/loaders');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -97,10 +98,23 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
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;
+ const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
cssRules.unshift({
test: /\.vanilla\.css$/i,
sideEffects: true,
- use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
+ use: dev ? getGlobalCssLoader(
+ {
+ assetPrefix: config.assetPrefix,
+ isClient: !isServer,
+ isServer,
+ isDevelopment: dev,
+ future: resolvedNextConfig.future || {},
+ experimental: resolvedNextConfig.experimental || {},
+ // @ts-ignore -- 'appDir' config is in beta
+ hasAppDir: false,
+ },
+ postcss,
+ []) : getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
});
// vanilla-extract need to emit the css file on both server and client, both during the |
Same here, pls fix this :) |
The cause of the problem is that @vanilla-extract/next-plugin removed the next-style-loader from #1105. However, using the next- style-loader may cause inconsistent order between the development and production CSS outputs. I'm not sure if it can be added back. |
I had exactly same issue. - On page directory, css was not generated on HTML(development server) I downgraded @vanilla-extract/next-plugin to 2.1.2(it was 2.3.1) and it's working fine. NextJS - 13.3.4 |
Same issue, hopefully #1203 fixes this
|
I tested |
I upgraded to 2.4.0, but this issue is still happened. |
@takahiro-1227 Could you please raise a separate issue with a minimal reproduction. |
Describe the bug
When a page transition is made on the Next.js development server, the css of the destination page is not generated.
Reproduced with version 2.2.1 of @vanilla-extract/next-plugin, lowering the version to 2.1.3 makes it work correctly.
Reproduction
https://stackblitz.com/edit/stackblitz-starters-dcvpht
System Info
Used Package Manager
pnpm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: