@navita/next-plugin 0.0.0 → 0.0.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Alexander Liljengård
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/fromServerLoader.d.ts

@@ -0,0 +1,5 @@
+import { LoaderContext } from 'webpack';
+
+declare function pitch(this: LoaderContext<unknown>): string;
+
+export { pitch };

package/fromServerLoader.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var webpackPlugin = require('@navita/webpack-plugin');
+
+function pitch() {
+    this._module.loaders = [];
+    const dependency = webpackPlugin.getNavitaDependency(this._compiler.webpack);
+    const { cssHash , issuerPath  } = Object.fromEntries(new URLSearchParams(this.resourceQuery).entries());
+    this._module.addDependency(new dependency(issuerPath, cssHash));
+    return '';
+}
+
+exports.pitch = pitch;

package/fromServerLoader.mjs

@@ -0,0 +1,11 @@
+import { getNavitaDependency } from '@navita/webpack-plugin';
+
+function pitch() {
+    this._module.loaders = [];
+    const dependency = getNavitaDependency(this._compiler.webpack);
+    const { cssHash , issuerPath  } = Object.fromEntries(new URLSearchParams(this.resourceQuery).entries());
+    this._module.addDependency(new dependency(issuerPath, cssHash));
+    return '';
+}
+
+export { pitch };

package/index.d.ts

@@ -1,7 +1,10 @@
-import { NavitaPlugin } from '@navita/webpack-plugin';
+import { Options } from '@navita/webpack-plugin';
 import { NextConfig } from 'next';
 
-type NavitaConfig = ConstructorParameters<typeof NavitaPlugin>[0];
-declare const createNavitaStylePlugin: (navitaConfig?: NavitaConfig) => (nextConfig: NextConfig) => NextConfig;
+type WebpackOptions = Options;
+interface Config extends WebpackOptions {
+    singleCssFile?: boolean;
+}
+declare const createNavitaStylePlugin: (navitaConfig?: Config) => (nextConfig: NextConfig) => NextConfig;
 
 export { createNavitaStylePlugin };

package/index.js

@@ -1,143 +1,174 @@
 'use strict';
 
 var webpackPlugin = require('@navita/webpack-plugin');
-var browserslist = require('browserslist');
-var css = require('next/dist/build/webpack/config/blocks/css');
-var client = require('next/dist/build/webpack/config/blocks/css/loaders/client');
-var webpack = require('webpack');
+var NextMiniCssExtractPlugin = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var findPagesDir = require('next/dist/lib/find-pages-dir');
 
-/**
- * Next.js adds a cache busting query string to document:
- * https://github.com/vercel/next.js/blob/805183e3e93e15db7bc6c66837925431791a2250/packages/next/src/pages/_document.tsx#L481
- * mini-css-extract-plugin checks for existing css files with an exact match:
- * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/2985918b79cd05cd5390e8b6d70e2009ea531521/src/index.js#L919
- *
- * This webpack plugins fixes that by adding a data-href attribute to the link tag, since that's also part
- * of the comparison that mini-css-extract-plugin does.
- */ class FixLinkTagsPlugin {
-    static pluginName = 'FixLinkTagsPlugin';
-    constructor(name = 'styles.css'){
-        this.name = name;
+const merge = (...merge)=>{
+    const result = {};
+    for (const usedIds of merge){
+        for(const key in usedIds){
+            result[key] = [
+                ...result[key] || [],
+                ...usedIds[key] || []
+            ];
+        }
+    }
+    for(const key1 in result){
+        result[key1] = [
+            ...new Set(result[key1])
+        ];
+    }
+    return result;
+};
+const intersect = (...intersect)=>{
+    const result = {};
+    for (const usedIds of intersect){
+        for(const key in usedIds){
+            result[key] = result[key] ? result[key].filter((id)=>usedIds[key].includes(id)) : usedIds[key];
+        }
     }
-    apply(compiler) {
-        const name = this.name;
-        class AddDataHrefToLink extends webpack.RuntimeModule {
-            constructor(){
-                super(FixLinkTagsPlugin.pluginName, webpack.RuntimeModule.STAGE_NORMAL);
+    return result;
+};
+// structuredClone would be better, but since Next.js version 13 is at node 16.14.0,
+// we can't use it.
+const copy = (source)=>JSON.parse(JSON.stringify(source));
+const removeParentFromCurrent = (usedIds, parentUsedIds)=>{
+    for(const key in parentUsedIds){
+        if (usedIds[key] && parentUsedIds[key]) {
+            usedIds[key] = usedIds[key].filter((id)=>!parentUsedIds[key].includes(id));
+        }
+    }
+};
+function optimizeCSSOutput(output) {
+    const nameToChunk = Object.fromEntries(Array.from(output.keys()).filter((x)=>x.name).map((x)=>[
+            x.name,
+            x
+        ]));
+    const getAllParentUsedIds = (chunk)=>{
+        const { name: route  } = chunk;
+        if (!route) {
+            // If we don't have a name, it's a dynamic chunk.
+            const value = output.get(chunk);
+            if (value.parents.length === 0) {
+                return [];
+            }
+            return [
+                intersect(...value.parents.map((parent)=>merge(...getAllParentUsedIds(parent), output.get(parent).usedIds)))
+            ];
+        }
+        if (route.startsWith('pages/')) {
+            const routes = [
+                'pages/_document',
+                'pages/_app',
+                route
+            ];
+            const currentRouteIndex = routes.indexOf(route);
+            return routes.filter((_, index)=>currentRouteIndex > index).map((x)=>output.get(nameToChunk[x])).filter(Boolean).map((x)=>copy(x.usedIds));
+        }
+        const parts = route.split('/');
+        const parents = [];
+        let currentPart = '';
+        for (const part of parts){
+            currentPart = [
+                currentPart,
+                part
+            ].filter(Boolean).join('/');
+            const possibleParent = `${currentPart}/layout`;
+            if (route === possibleParent) {
+                continue;
             }
-            generate() {
-                return webpack.Template.asString([
-                    `const styleSheets = document.querySelectorAll('link[rel="stylesheet"][href*="${name}"]');`,
-                    `for (const styleSheet of styleSheets) {`,
-                    webpack.Template.indent(`styleSheet.setAttribute('data-href', (styleSheet.getAttribute('href') || '').replace(/\\?.*$/, ''));`),
-                    `}`
-                ]);
+            const parentChunk = nameToChunk[possibleParent];
+            if (output.has(parentChunk)) {
+                parents.push(copy(output.get(parentChunk).usedIds));
             }
         }
-        compiler.hooks.thisCompilation.tap(FixLinkTagsPlugin.pluginName, (compilation)=>{
-            compilation.hooks.runtimeRequirementInTree.for(webpack.RuntimeGlobals.ensureChunkHandlers).tap(FixLinkTagsPlugin.pluginName, (chunk)=>{
-                compilation.addRuntimeModule(chunk, new AddDataHrefToLink());
-            });
+        return parents;
+    };
+    const newOutput = new Map();
+    for (const chunk of output.keys()){
+        const currentUsedIds = copy(output.get(chunk).usedIds);
+        for (const parent of getAllParentUsedIds(chunk)){
+            removeParentFromCurrent(currentUsedIds, parent);
+        }
+        newOutput.set(chunk, {
+            ...output.get(chunk),
+            usedIds: currentUsedIds
         });
     }
+    return newOutput;
 }
 
-function getCssLoader() {
-    try {
-        // v12+
-        return require.resolve('next/dist/build/webpack/loaders/css-loader/src');
-    } catch (_) {
-        return 'css-loader';
-    }
-}
-
-function getNextCssRules(config) {
-    return config.module?.rules?.find((rule)=>typeof rule === "object" && Array.isArray(rule.oneOf) && rule.oneOf.some(({ test  })=>test instanceof RegExp && typeof test.test === "function" && test.test("filename.css")))?.oneOf;
-}
-
-const NextMiniCssExtractPlugin = require("next/dist/build/webpack/plugins/mini-css-extract-plugin").default;
-const getSupportedBrowsers = (dir, isDevelopment)=>{
-    try {
-        return browserslist.loadConfig({
-            path: dir,
-            env: isDevelopment ? "development" : "production"
-        });
-    } catch  {}
-    return undefined;
-};
-const navitaStyleConfig = (nextConfig, navitaConfig = {})=>{
-    return {
-        webpack (config, options) {
-            const { dir , dev , isServer  } = options;
-            const cssRules = getNextCssRules(config);
-            const outputLoaders = [
-                {
-                    loader: getCssLoader(),
-                    options: {
-                        postcss: ()=>css.lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined)
+const MiniCssExtractPlugin = NextMiniCssExtractPlugin['default'];
+const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign({}, nextConfig, {
+            webpack (config, options) {
+                const { dir , config: resolvedNextConfig , dev  } = options;
+                config.plugins?.push({
+                    apply (compiler) {
+                        // We call the getNavitaModule function here
+                        // so that NavitaModule is created with what's required for the next.js rsc to client entry promotion:
+                        webpackPlugin.getNavitaModule(compiler.webpack, ({ cssHash , issuerPath  })=>({
+                                // The resourceResolveData is used by next.js to promote server and ssr entries to client entries:
+                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L590
+                                resourceResolveData: {
+                                    path: '',
+                                    query: '?' + new URLSearchParams({
+                                        cssHash,
+                                        issuerPath
+                                    }).toString()
+                                },
+                                // We set the resource to ".css"
+                                // to trick next.js into thinking this is a css module:
+                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/loaders/utils.ts#L24
+                                resource: '.css'
+                            }));
                     }
-                }
-            ];
-            if (!isServer) {
-                const styleLoader = client.getClientStyleLoader({
-                    // False to force the use of MiniCssExtractPlugin
-                    isDevelopment: false,
-                    assetPrefix: options.config.assetPrefix,
-                    hasAppDir: false,
-                    isAppDir: false
                 });
-                outputLoaders.unshift(styleLoader);
-            }
-            cssRules?.unshift({
-                test: webpackPlugin.getEmptyCssFilePath(),
-                sideEffects: true,
-                use: outputLoaders
-            });
-            // Add next's MiniCssExtractPlugin if it's not already added
-            // todo: ^- only on development?
-            if (!config.plugins?.some((plugin)=>plugin 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.
-                // Logic adopted from https://git.io/JtdBy
-                config.plugins?.push(new NextMiniCssExtractPlugin({
-                    filename: "static/css/[name].css"
-                }));
-            }
-            config.plugins?.push(new webpackPlugin.NavitaPlugin({
-                ...navitaConfig,
-                outputCss: !isServer,
-                isServer
-            }));
-            if (!isServer && dev) {
-                config.plugins?.push(new FixLinkTagsPlugin());
-            }
-            if (typeof nextConfig.webpack === "function") {
-                return nextConfig.webpack(config, options);
-            }
-            config.optimization = {
-                ...config.optimization,
-                splitChunks: {
-                    ...config.optimization?.splitChunks,
-                    cacheGroups: {
-                        ...config.optimization?.splitChunks ? config.optimization.splitChunks.cacheGroups : {},
-                        styles: {
-                            name: 'styles',
-                            type: 'css/mini-extract',
-                            test: webpackPlugin.getEmptyCssFilePath(),
-                            chunks: 'all',
-                            enforce: true
+                // This loader promotes the server and ssr entries to client entries:
+                config.module?.rules.unshift({
+                    resourceQuery: [
+                        /cssHash/,
+                        /issuerPath/
+                    ],
+                    loader: require.resolve("@navita/next-plugin/fromServerLoader")
+                });
+                const findPagesDirResult = findPagesDir.findPagesDir(dir, !!resolvedNextConfig.experimental.appDir);
+                const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
+                const isServer = options.isServer && !(options.nextRuntime === 'edge');
+                const outputCss = !isServer || hasAppDir;
+                if (!hasAppDir && !isServer) {
+                    const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+                    // https://github.com/vercel/next.js/blob/930db5c1afbe541a0b2357c26123c2b365b56624/packages/next/src/build/webpack/config/blocks/css/index.ts#L595
+                    config.plugins.push(new MiniCssExtractPlugin({
+                        filename,
+                        chunkFilename: filename,
+                        ignoreOrder: true
+                    }));
+                }
+                if (navitaConfig?.singleCssFile) {
+                    config.optimization.splitChunks = {
+                        ...config.optimization.splitChunks || {},
+                        cacheGroups: {
+                            ...config.optimization.splitChunks['cacheGroups'] || {},
+                            navita: {
+                                chunks: 'all',
+                                enforce: true,
+                                name: 'navita',
+                                type: webpackPlugin.NAVITA_MODULE_TYPE
+                            }
                         }
-                    }
+                    };
                 }
-            };
-            return config;
-        }
-    };
-};
-const createNavitaStylePlugin = (navitaConfig = {})=>{
-    return (nextConfig)=>{
-        return Object.assign({}, nextConfig, navitaStyleConfig(nextConfig, navitaConfig));
-    };
-};
+                config.plugins?.push(new webpackPlugin.NavitaPlugin({
+                    outputCss,
+                    ...navitaConfig,
+                    optimizeCSSOutput
+                }));
+                if (typeof nextConfig.webpack === "function") {
+                    return nextConfig.webpack(config, options);
+                }
+                return config;
+            }
+        });
 
 exports.createNavitaStylePlugin = createNavitaStylePlugin;

package/index.mjs

@@ -1,143 +1,174 @@
 import { createRequire as createRequire$1 } from 'module';
 const require = createRequire$1(import.meta.url);
-import { getEmptyCssFilePath, NavitaPlugin } from '@navita/webpack-plugin';
-import { loadConfig } from 'browserslist';
-import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
-import { getClientStyleLoader } from 'next/dist/build/webpack/config/blocks/css/loaders/client';
-import { RuntimeGlobals, RuntimeModule, Template } from 'webpack';
+import { getNavitaModule, NAVITA_MODULE_TYPE, NavitaPlugin } from '@navita/webpack-plugin';
+import NextMiniCssExtractPlugin from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
+import { findPagesDir } from 'next/dist/lib/find-pages-dir';
 
-/**
- * Next.js adds a cache busting query string to document:
- * https://github.com/vercel/next.js/blob/805183e3e93e15db7bc6c66837925431791a2250/packages/next/src/pages/_document.tsx#L481
- * mini-css-extract-plugin checks for existing css files with an exact match:
- * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/2985918b79cd05cd5390e8b6d70e2009ea531521/src/index.js#L919
- *
- * This webpack plugins fixes that by adding a data-href attribute to the link tag, since that's also part
- * of the comparison that mini-css-extract-plugin does.
- */ class FixLinkTagsPlugin {
-    static pluginName = 'FixLinkTagsPlugin';
-    constructor(name = 'styles.css'){
-        this.name = name;
+const merge = (...merge)=>{
+    const result = {};
+    for (const usedIds of merge){
+        for(const key in usedIds){
+            result[key] = [
+                ...result[key] || [],
+                ...usedIds[key] || []
+            ];
+        }
+    }
+    for(const key1 in result){
+        result[key1] = [
+            ...new Set(result[key1])
+        ];
+    }
+    return result;
+};
+const intersect = (...intersect)=>{
+    const result = {};
+    for (const usedIds of intersect){
+        for(const key in usedIds){
+            result[key] = result[key] ? result[key].filter((id)=>usedIds[key].includes(id)) : usedIds[key];
+        }
     }
-    apply(compiler) {
-        const name = this.name;
-        class AddDataHrefToLink extends RuntimeModule {
-            constructor(){
-                super(FixLinkTagsPlugin.pluginName, RuntimeModule.STAGE_NORMAL);
+    return result;
+};
+// structuredClone would be better, but since Next.js version 13 is at node 16.14.0,
+// we can't use it.
+const copy = (source)=>JSON.parse(JSON.stringify(source));
+const removeParentFromCurrent = (usedIds, parentUsedIds)=>{
+    for(const key in parentUsedIds){
+        if (usedIds[key] && parentUsedIds[key]) {
+            usedIds[key] = usedIds[key].filter((id)=>!parentUsedIds[key].includes(id));
+        }
+    }
+};
+function optimizeCSSOutput(output) {
+    const nameToChunk = Object.fromEntries(Array.from(output.keys()).filter((x)=>x.name).map((x)=>[
+            x.name,
+            x
+        ]));
+    const getAllParentUsedIds = (chunk)=>{
+        const { name: route  } = chunk;
+        if (!route) {
+            // If we don't have a name, it's a dynamic chunk.
+            const value = output.get(chunk);
+            if (value.parents.length === 0) {
+                return [];
+            }
+            return [
+                intersect(...value.parents.map((parent)=>merge(...getAllParentUsedIds(parent), output.get(parent).usedIds)))
+            ];
+        }
+        if (route.startsWith('pages/')) {
+            const routes = [
+                'pages/_document',
+                'pages/_app',
+                route
+            ];
+            const currentRouteIndex = routes.indexOf(route);
+            return routes.filter((_, index)=>currentRouteIndex > index).map((x)=>output.get(nameToChunk[x])).filter(Boolean).map((x)=>copy(x.usedIds));
+        }
+        const parts = route.split('/');
+        const parents = [];
+        let currentPart = '';
+        for (const part of parts){
+            currentPart = [
+                currentPart,
+                part
+            ].filter(Boolean).join('/');
+            const possibleParent = `${currentPart}/layout`;
+            if (route === possibleParent) {
+                continue;
             }
-            generate() {
-                return Template.asString([
-                    `const styleSheets = document.querySelectorAll('link[rel="stylesheet"][href*="${name}"]');`,
-                    `for (const styleSheet of styleSheets) {`,
-                    Template.indent(`styleSheet.setAttribute('data-href', (styleSheet.getAttribute('href') || '').replace(/\\?.*$/, ''));`),
-                    `}`
-                ]);
+            const parentChunk = nameToChunk[possibleParent];
+            if (output.has(parentChunk)) {
+                parents.push(copy(output.get(parentChunk).usedIds));
             }
         }
-        compiler.hooks.thisCompilation.tap(FixLinkTagsPlugin.pluginName, (compilation)=>{
-            compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.ensureChunkHandlers).tap(FixLinkTagsPlugin.pluginName, (chunk)=>{
-                compilation.addRuntimeModule(chunk, new AddDataHrefToLink());
-            });
+        return parents;
+    };
+    const newOutput = new Map();
+    for (const chunk of output.keys()){
+        const currentUsedIds = copy(output.get(chunk).usedIds);
+        for (const parent of getAllParentUsedIds(chunk)){
+            removeParentFromCurrent(currentUsedIds, parent);
+        }
+        newOutput.set(chunk, {
+            ...output.get(chunk),
+            usedIds: currentUsedIds
         });
     }
+    return newOutput;
 }
 
-function getCssLoader() {
-    try {
-        // v12+
-        return require.resolve('next/dist/build/webpack/loaders/css-loader/src');
-    } catch (_) {
-        return 'css-loader';
-    }
-}
-
-function getNextCssRules(config) {
-    return config.module?.rules?.find((rule)=>typeof rule === "object" && Array.isArray(rule.oneOf) && rule.oneOf.some(({ test  })=>test instanceof RegExp && typeof test.test === "function" && test.test("filename.css")))?.oneOf;
-}
-
-const NextMiniCssExtractPlugin = require("next/dist/build/webpack/plugins/mini-css-extract-plugin").default;
-const getSupportedBrowsers = (dir, isDevelopment)=>{
-    try {
-        return loadConfig({
-            path: dir,
-            env: isDevelopment ? "development" : "production"
-        });
-    } catch  {}
-    return undefined;
-};
-const navitaStyleConfig = (nextConfig, navitaConfig = {})=>{
-    return {
-        webpack (config, options) {
-            const { dir , dev , isServer  } = options;
-            const cssRules = getNextCssRules(config);
-            const outputLoaders = [
-                {
-                    loader: getCssLoader(),
-                    options: {
-                        postcss: ()=>lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined)
+const MiniCssExtractPlugin = NextMiniCssExtractPlugin['default'];
+const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign({}, nextConfig, {
+            webpack (config, options) {
+                const { dir , config: resolvedNextConfig , dev  } = options;
+                config.plugins?.push({
+                    apply (compiler) {
+                        // We call the getNavitaModule function here
+                        // so that NavitaModule is created with what's required for the next.js rsc to client entry promotion:
+                        getNavitaModule(compiler.webpack, ({ cssHash , issuerPath  })=>({
+                                // The resourceResolveData is used by next.js to promote server and ssr entries to client entries:
+                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L590
+                                resourceResolveData: {
+                                    path: '',
+                                    query: '?' + new URLSearchParams({
+                                        cssHash,
+                                        issuerPath
+                                    }).toString()
+                                },
+                                // We set the resource to ".css"
+                                // to trick next.js into thinking this is a css module:
+                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/loaders/utils.ts#L24
+                                resource: '.css'
+                            }));
                     }
-                }
-            ];
-            if (!isServer) {
-                const styleLoader = getClientStyleLoader({
-                    // False to force the use of MiniCssExtractPlugin
-                    isDevelopment: false,
-                    assetPrefix: options.config.assetPrefix,
-                    hasAppDir: false,
-                    isAppDir: false
                 });
-                outputLoaders.unshift(styleLoader);
-            }
-            cssRules?.unshift({
-                test: getEmptyCssFilePath(),
-                sideEffects: true,
-                use: outputLoaders
-            });
-            // Add next's MiniCssExtractPlugin if it's not already added
-            // todo: ^- only on development?
-            if (!config.plugins?.some((plugin)=>plugin 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.
-                // Logic adopted from https://git.io/JtdBy
-                config.plugins?.push(new NextMiniCssExtractPlugin({
-                    filename: "static/css/[name].css"
-                }));
-            }
-            config.plugins?.push(new NavitaPlugin({
-                ...navitaConfig,
-                outputCss: !isServer,
-                isServer
-            }));
-            if (!isServer && dev) {
-                config.plugins?.push(new FixLinkTagsPlugin());
-            }
-            if (typeof nextConfig.webpack === "function") {
-                return nextConfig.webpack(config, options);
-            }
-            config.optimization = {
-                ...config.optimization,
-                splitChunks: {
-                    ...config.optimization?.splitChunks,
-                    cacheGroups: {
-                        ...config.optimization?.splitChunks ? config.optimization.splitChunks.cacheGroups : {},
-                        styles: {
-                            name: 'styles',
-                            type: 'css/mini-extract',
-                            test: getEmptyCssFilePath(),
-                            chunks: 'all',
-                            enforce: true
+                // This loader promotes the server and ssr entries to client entries:
+                config.module?.rules.unshift({
+                    resourceQuery: [
+                        /cssHash/,
+                        /issuerPath/
+                    ],
+                    loader: require.resolve("@navita/next-plugin/fromServerLoader")
+                });
+                const findPagesDirResult = findPagesDir(dir, !!resolvedNextConfig.experimental.appDir);
+                const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
+                const isServer = options.isServer && !(options.nextRuntime === 'edge');
+                const outputCss = !isServer || hasAppDir;
+                if (!hasAppDir && !isServer) {
+                    const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+                    // https://github.com/vercel/next.js/blob/930db5c1afbe541a0b2357c26123c2b365b56624/packages/next/src/build/webpack/config/blocks/css/index.ts#L595
+                    config.plugins.push(new MiniCssExtractPlugin({
+                        filename,
+                        chunkFilename: filename,
+                        ignoreOrder: true
+                    }));
+                }
+                if (navitaConfig?.singleCssFile) {
+                    config.optimization.splitChunks = {
+                        ...config.optimization.splitChunks || {},
+                        cacheGroups: {
+                            ...config.optimization.splitChunks['cacheGroups'] || {},
+                            navita: {
+                                chunks: 'all',
+                                enforce: true,
+                                name: 'navita',
+                                type: NAVITA_MODULE_TYPE
+                            }
                         }
-                    }
+                    };
                 }
-            };
-            return config;
-        }
-    };
-};
-const createNavitaStylePlugin = (navitaConfig = {})=>{
-    return (nextConfig)=>{
-        return Object.assign({}, nextConfig, navitaStyleConfig(nextConfig, navitaConfig));
-    };
-};
+                config.plugins?.push(new NavitaPlugin({
+                    outputCss,
+                    ...navitaConfig,
+                    optimizeCSSOutput
+                }));
+                if (typeof nextConfig.webpack === "function") {
+                    return nextConfig.webpack(config, options);
+                }
+                return config;
+            }
+        });
 
 export { createNavitaStylePlugin };

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@navita/next-plugin",
-  "version": "0.0.0",
+  "version": "0.0.4",
+  "license": "MIT",
+  "private": false,
+  "sideEffects": false,
   "exports": {
-    "import": "./index.mjs",
-    "require": "./index.js",
-    "types": "./index.d.ts"
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./fromServerLoader": {
+      "import": "./fromServerLoader.mjs",
+      "require": "./fromServerLoader.js",
+      "types": "./fromServerLoader.d.ts"
+    }
   },
   "dependencies": {
     "@navita/webpack-plugin": "*",