BEMed comes with a Babel Plugin which is completely optional but it can be used improve the developer experience and optimize bundle size and boot times.

The entry point for the plugin is react-bemed/babel.

So for example in Next.js you would add babel.config.js with

module.exports = {
    presets: ["next/babel"],
    plugins: ["react-bemed/babel"],
};

When the plugin is active source maps are enabled by default in development and removed in production.

When the plugin is active the name property is automatically added from the variable name if not defined.

Example:

const Button = bemed({ as: "button" });

will compile to

const Button = bemed({ name: "Button", as: "button" });

The name geration can be customized with the generateName() option in babel.config.js

module.exports = {
    plugins: [
        [
            "react-bemed/babel",
            {
                generateName(options) {
                    return "custom-prefix-" + options.variableName;
                },
            },
        ],
    ],
};

When the compiler is run in production with NODE_ENV=production it will look for duplicate names and will error the compilation if it finds any.

This will precompile the css tagged template literals during build-time as opposed to doing it during runtime in the browser. It will yield to smaller bundles and faster boot times because the CSS precompiler Stylis will not be added to your bundles at all. It will also run minification for the CSS strings.

There is a limitation when using this: You can use variables only where the standard CSS variables are allowed because the precompiler does not know what your variable values are during the build so it puts CSS variables in place during the compilation.

Eg. code like this does will not work

const Button = bemed({
    name: "MyButton",
    css: css`
        margin-${MARGIN_DIRECTION}: 10px;
    `,
});

because margin-var(--BEMED): 10px is not valid CSS.

This can be disabled by setting precompile to false in babel.config.js.

module.exports = {
    plugins: [
        [
            "react-bemed/babel",
            { precompile: false }
        ]
    ],
};

Not implemented yet. Maybe in future. Not sure if it makes sense with code-splitting frameworks like Next or Gatsby 🤔