search

master-co / css

The CSS Language and Framework
https://css.master.co
MIT License
1.77k stars 42 forks source link

✨ Minifies and obfuscates the class names in HTML #169

Open 1aron opened 1 year ago

1aron commented 1 year ago

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>
itsezc commented 1 year ago

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

1aron commented 1 year ago

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.

pragyamishra56 commented 9 months ago

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

1aron commented 9 months ago

@ 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

pragyamishra56 commented 9 months ago

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

pragyamishra56 commented 9 months ago

@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)
pragyamishra56 commented 9 months ago

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

1aron commented 9 months ago

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

pragyamishra56 commented 9 months ago

@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));

1aron commented 9 months ago

@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.