Merkur - plugin-css-scrambler

merkur/plugin-css-scrambler scrambles css classes for production build.

npm i --save @merkur/plugin-css-scrambler
npm i --save-dev postcss postcss-loader

1. Generate hashtable at build time

This can be achieved by extending webpack config with provided drop-in function. This function will find existing postcss-loader and extend it's config to use scrambling plugin or will define postcss-loader for default CSS rule.

+ const { applyPostCssScramblePlugin } = require('@merkur/plugin-css-scrambler/postcss');
module.exports = Promise.all([
-  pipe(createWebConfig, applyBabelLoader)(),
+  pipe(createWebConfig, applyBabelLoader, applyPostCssScramblePlugin)(),
-  pipe(createWebConfig, applyBabelLoader, applyES9Transformation)(),
+  pipe(createWebConfig, applyBabelLoader, applyES9Transformation, applyPostCssScramblePlugin)(),
  pipe(createNodeConfig, applyBabelLoader)(),
]);

If you have custom webpack configuration you can just define postcss-loader for your styles rule and then call applyPostCssScramblePlugin or you can apply the scramler plugin manually.

const path = require('path');
const { postCssScrambler } = require('@merkur/plugin-css-scrambler/postcss');
{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                postCssScrambler({
                    generateHashTable: true,
                    hashTable: path.resolve(
                        process.env.WIDGET_DIRNAME,
                        './build/static/hashtable.json'
                    ),
                }),
            ],
        },
    },
}

2. Load generated hashtable in widget router

const { loadClassnameHashtable } = require('@merkur/plugin-css-scrambler/server');
const merkurModule = require('../../../build/widget.cjs');
const classnameHashtable = loadClassnameHashtable(
    path.resolve(__dirname, '../../build/static/hashtable.json')
);
router.get('/widget', asyncMiddleware(async (req, res) => {
    const widget = await merkurModule.createWidget({
        classnameHashtable
        props: {
            // ...
        }
    });
    // ...
}));

3. Register plugin in your widget.js.

import { cssScramblePlugin } from '@merkur/plugin-css-scrambler';
export const widgetProperties = {
    // ...
    $plugins: [
        // ...
        cssScramblePlugin,
    ]
}

Now you should use cn function from widget object instead of classname package directly.

import WidgetContext from './WidgetContext';
export default function Counter({ counter }) {
  const widget = useContext(WidgetContext);
  const [visible, setVisibility] = useState(false);
  return (
    <div className={widget.cn({
        counter: true,
        'counter--visible': visible
    })}>
        {* ... *}
    </div>
  );
}

About Merkur

The Merkur is tiny extensible javascript library for front-end microservices(micro frontends). It allows by default server side rendering for loading performance boost. You can connect it with other frameworks or languages because merkur defines easy API. You can use one of six predefined template's library Preact, µhtml, Svelte and vanilla but you can easily extend for others.