@nx/next/plugins/with-less.js

The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides: - Scaffolding for creating, building, serving, linting, and testing Next.js applications. - Integration wit

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.withLess = withLess;
// Adapted from https://raw.githubusercontent.com/elado/next-with-less/main/src/index.js
const webpack_merge_1 = require("webpack-merge");
const addLessToRegExp = (rx) => new RegExp(rx.source.replace('|sass', '|sass|less'), rx.flags);
function withLess(configOrFn) {
    return async (phase) => {
        const baseConfig = typeof configOrFn === 'function' ? await configOrFn(phase) : configOrFn;
        const { lessLoaderOptions = {}, ...nextConfig } = baseConfig;
        return Object.assign({}, nextConfig, {
            webpack(config, opts) {
                // there are 2 relevant sass rules in next.js - css modules and global css
                let sassModuleRule;
                // global sass rule (does not exist in server builds)
                let sassGlobalRule;
                const cssRule = config.module.rules.find((rule) => rule.oneOf?.find((r) => r?.[Symbol.for('__next_css_remove')]));
                const addLessToRuleTest = (test) => {
                    if (Array.isArray(test)) {
                        return test.map((rx) => addLessToRegExp(rx));
                    }
                    else {
                        return addLessToRegExp(test);
                    }
                };
                cssRule.oneOf.forEach((rule) => {
                    if (rule.options?.__next_css_remove)
                        return;
                    if (rule.use?.loader === 'error-loader') {
                        rule.test = addLessToRuleTest(rule.test);
                    }
                    else if (rule.use?.loader?.includes('file-loader')) {
                        rule.issuer = addLessToRuleTest(rule.issuer);
                    }
                    else if (rule.use?.includes?.('ignore-loader')) {
                        rule.test = addLessToRuleTest(rule.test);
                    }
                    else if (rule.test?.source === '\\.module\\.(scss|sass)$') {
                        sassModuleRule = rule;
                    }
                    else if (rule.test?.source === '(?<!\\.module)\\.(scss|sass)$') {
                        sassGlobalRule = rule;
                    }
                });
                const lessLoader = {
                    loader: 'less-loader',
                    options: {
                        ...lessLoaderOptions,
                        lessOptions: {
                            javascriptEnabled: true,
                            // @ts-ignore
                            ...lessLoaderOptions.lessOptions,
                        },
                    },
                };
                let lessModuleRule = (0, webpack_merge_1.merge)(sassModuleRule);
                const configureLessRule = (rule) => {
                    rule.test = new RegExp(rule.test.source.replace('(scss|sass)', 'less'));
                    // replace sass-loader (last entry) with less-loader
                    rule.use.splice(-1, 1, lessLoader);
                };
                configureLessRule(lessModuleRule);
                cssRule.oneOf.splice(cssRule.oneOf.indexOf(sassModuleRule) + 1, 0, lessModuleRule);
                if (sassGlobalRule) {
                    let lessGlobalRule = (0, webpack_merge_1.merge)(sassGlobalRule);
                    configureLessRule(lessGlobalRule);
                    cssRule.oneOf.splice(cssRule.oneOf.indexOf(sassGlobalRule) + 1, 0, lessGlobalRule);
                }
                if (typeof nextConfig.webpack === 'function') {
                    return nextConfig.webpack(config, opts);
                }
                return config;
            },
        });
    };
}
module.exports = withLess;
module.exports.withLess = withLess;