css ✨ Minifies and obfuscates the class names in HTML

Description

The HTML generated by Master CSS SSR:

import { renderHTML } from '@master/css'
...
const html = renderHTML(html);
res.set('Content-Type', 'text/html');
res.send(Buffer.from(html));

<html>
<head>
    <style title="master">
        .text\:center { text-align: center }
        .font\:16\:hover:hover { font-size: 1rem }
    </style>
</head>
<body>
    <h1 class="text:center font:16:hover"></h1>
</body>
</html>

Now with minifying:

import { renderHTML, minify } from '@master/css'
...
const html = minify(renderHTML(html));
res.set('Content-Type', 'text/html');
res.send(Buffer.from(html));

<html>
<head>
    <style title="master">
        .a { text-align: center }
        .b:hover { font-size: 1rem }
    </style>
</head>
<body>
    <h1 class="a b"></h1>
</body>
</html>

Feb 15 '23 11:02 1aron

Would it not be possible to merge class a and b to reduce the overall output CSS and classes used? i.e the CSS could look like:

.c { text-align: center }
.c:hover { font-size: 1rem }

now c could be used by multiple elements, and it would just be the 1 class

Feb 23 '23 14:02 itsezc

Would it not be possible to merge class a and b to reduce the overall output CSS and classes used? i.e the CSS could look like:
.c { text-align: center }
.c:hover { font-size: 1rem }
now c could be used by multiple elements, and it would just be the 1 class

Great start! It may be possible, but more complete test cases are needed to confirm whether it will conflict with the current API.

Feb 24 '23 00:02 1aron

@ If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

Oct 06 '23 01:10 pragyamishra56

@ If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

Welcome! It's recommended to refer https://github.com/master-co/css/blob/beta/packages/css/src/functions/render-html.ts

Oct 06 '23 07:10 1aron

@1aron Thank you so much, Sir for assigning me this issue

Oct 06 '23 07:10 pragyamishra56

@1aron Sir Is it okay if I request more information, or is there anything else you would like assistance with? I'm here to resolve this issue?

import { MasterCSS } from '../core';
import { Config, renderHTML, minify } from '@master/css';  // Import renderHTML and minify

import generateFromHTML from './generate-from-html';

/**
 * Renders the page-required and sorted CSS text from HTML and injected it back into HTML
 * @param html 
 * @param config 
 * @returns html text
 */
export default function renderHTMLWithMinification(html: string, config?: Config): string {
    if (!html) return;

    let replaced = false;
    html = html.replace(
        /(<style id="master">).*?(<\/style>)/,
        (_, prefix, suffix) => {
            replaced = true;
            return prefix + generateFromHTML(html, config) + suffix;
        }
    );

    if (replaced) {
        return minify(html);  // Minify the HTML if styles were replaced
    }

    const styleText = `<style id="master">${generateFromHTML(html, config)}</style>`;
    const minifiedHtml = minify(html.replace(/<\/head>/, `${styleText}$&`));

    return minifiedHtml;
}[](URL)

Oct 06 '23 11:10 pragyamishra56

@1aron Sir Is this your main website? Screenshot 2023-10-06 190829

Oct 06 '23 13:10 pragyamishra56

@pragyamishra56 I think you misunderstood. minify is the function to be implemented in the issue.

Oct 06 '23 19:10 1aron

@1aron Sir, could you please assist me? You mentioned that you want improvement in the section I referred to, correct?"

import { renderHTML } from '@master/css' ... const html = renderHTML(html); res.set('Content-Type', 'text/html'); res.send(Buffer.from(html));

Now with minifying:

import { renderHTML, minify } from '@master/css' ... const html = minify(renderHTML(html)); res.set('Content-Type', 'text/html'); res.send(Buffer.from(html));

Oct 07 '23 01:10 pragyamishra56

@1aron Sir, could you please assist me? You mentioned that you want improvement in the section I referred to, correct?"

import { renderHTML } from '@master/css' ... const html = renderHTML(html); res.set('Content-Type', 'text/html'); res.send(Buffer.from(html));

Now with minifying:

import { renderHTML, minify } from '@master/css' ... const html = minify(renderHTML(html)); res.set('Content-Type', 'text/html'); res.send(Buffer.from(html));

Again, there is currently no minify function.

Oct 11 '23 12:10 1aron