Mantine with ESBuild

[umerfaruk]

I am trying to use mantine with esbuild on my project. postcss does work with esbuild but postcss-simple-vars for mantine doesn't work and all classes using the variables defined for mantine fail to work.

Is there any example of it working.

here is my esbuild config file:

import esbuild from "esbuild";
import cssModulesPlugin from 'esbuild-css-modules-plugin';
import htmlPlugin from '@chialab/esbuild-plugin-html';
import { sassPlugin } from 'esbuild-sass-plugin';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import postcssPresetMantine from "postcss-preset-mantine";
import postcssPresetSimpleVars from "postcss-simple-vars";
//------------------------------------------------------

const args = process.argv;
const isServe = args.includes("--start");

const config = {
    logLevel: "info",
    entryPoints: ["src/index.html"],
    bundle: true,
    treeShaking: true,
    plugins: [
        htmlPlugin(),
        cssModulesPlugin(),
        sassPlugin({
            async transform(source, resolveDir) {
                const { css } = await postcss([
                    postcssPresetMantine(),
                    postcssPresetSimpleVars({
                        variables: {
                            'mantine-breakpoint-xs': '36em',
                            'mantine-breakpoint-sm': '48em',
                            'mantine-breakpoint-md': '62em',
                            'mantine-breakpoint-lg': '75em',
                            'mantine-breakpoint-xl': '88em',
                        },
                        unknown(node, name, result) {
                            console.log('Unknown variable ' + name);
                        }
                    }),
                    autoprefixer(),
                    postcssPresetEnv({ stage: 0 }),
                ])
                    .process(source, { from: undefined })
                return css
            }
        })
    ],
    assetNames: 'assets/[name]',
    chunkNames: '[ext]/[name]',
    loader: {
        ".png": "file",
        ".jpg": "file",
        ".jpeg": "file",
        ".svg": "file",
        ".gif": "file",
        ".woff": "file",
        ".woff2": "file",
        ".js": "jsx",
    }
};

if (args.includes("--build")) {
    esbuild
        .build({
            ...config,
            outdir: "dist",
            minify: true,
            sourcemap: false,
        })
        .catch((e) => {
            console.error(e);
            process.exit(1);
        });
}

if (isServe) {
    esbuild
        .context({
            ...config,
            outdir: "build",
            minify: false,
            sourcemap: true,
            banner: {
                js: `const events = new EventSource("/events")
                    events.addEventListener("reload", e => {
                        window.location.reload()
                    });`,
            }
        })
        .then(async (ctx) => {
            await ctx.watch(); // this is needed only if live reloading will be used
            await ctx.serve({
                port: 4300,
                servedir: "build",
                fallback: `build/index.html`,
                onRequest: ({ remoteAddress, method, path, status, timeInMS }) => {
                    console.info(
                        remoteAddress,
                        status,
                        `"${method} ${path}" [${timeInMS}ms]`
                    );
                },
            });
        })
        .catch((e) => {
            console.error(e);
            process.exit(1);
        });
}

[rtivital]

Use rollup with esbuild plugin instead, it supports all features, you can find example configuration here – https://github.com/mantinedev/extension-template/blob/master/rollup.config.mjs