@merkur/plugin-css-scrambler
v0.36.0
Published
Merkur plugin for scrambling CSS classes.
Downloads
38
Readme
Merkur - plugin-css-scrambler - deprectecated
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.