✨ Minifies and obfuscates the class names in HTML #395

1aron · 2023-02-15T11:40:01Z

1aron
Feb 15, 2023
Maintainer

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 · 2023-02-23T14:03:55Z

itsezc
Feb 23, 2023
Collaborator

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

0 replies

1aron · 2023-02-24T00:31:18Z

1aron
Feb 24, 2023
Maintainer Author

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.

0 replies

pragyamishra56 · 2023-10-06T01:53:20Z

pragyamishra56
Oct 6, 2023

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

0 replies

1aron · 2023-10-06T07:28:22Z

1aron
Oct 6, 2023
Maintainer Author

@ 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

0 replies

pragyamishra56 · 2023-10-06T07:42:48Z

pragyamishra56
Oct 6, 2023

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

0 replies

pragyamishra56 · 2023-10-06T11:13:33Z

pragyamishra56
Oct 6, 2023

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

0 replies

pragyamishra56 · 2023-10-06T13:48:53Z

pragyamishra56
Oct 6, 2023

@1aron Sir Is this your main website?

0 replies

1aron · 2023-10-06T19:44:48Z

1aron
Oct 6, 2023
Maintainer Author

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

0 replies

pragyamishra56 · 2023-10-07T01:43:47Z

pragyamishra56
Oct 7, 2023

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

0 replies

1aron · 2023-10-11T12:58:05Z

1aron
Oct 11, 2023
Maintainer Author

@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));
<style title="master"> .text\:center { text-align: center } .font\:16\:hover:hover { font-size: 1rem } </style>
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));
<style title="master"> .a { text-align: center } .b:hover { font-size: 1rem } </style>

Again, there is currently no minify function.

0 replies

Uh oh!

✨ Minifies and obfuscates the class names in HTML #395

Uh oh!

Uh oh!

1aron Feb 15, 2023 Maintainer

Description

Replies: 10 comments

Uh oh!

itsezc Feb 23, 2023 Collaborator

Uh oh!

1aron Feb 24, 2023 Maintainer Author

Uh oh!

pragyamishra56 Oct 6, 2023

Uh oh!

1aron Oct 6, 2023 Maintainer Author

Uh oh!

pragyamishra56 Oct 6, 2023

Uh oh!

Uh oh!

pragyamishra56 Oct 6, 2023

Uh oh!

pragyamishra56 Oct 6, 2023

Uh oh!

Uh oh!

1aron Oct 6, 2023 Maintainer Author

Uh oh!

pragyamishra56 Oct 7, 2023

Uh oh!

1aron Oct 11, 2023 Maintainer Author

1aron
Feb 15, 2023
Maintainer

itsezc
Feb 23, 2023
Collaborator

1aron
Feb 24, 2023
Maintainer Author

pragyamishra56
Oct 6, 2023

1aron
Oct 6, 2023
Maintainer Author

pragyamishra56
Oct 6, 2023

pragyamishra56
Oct 6, 2023

pragyamishra56
Oct 6, 2023

1aron
Oct 6, 2023
Maintainer Author

pragyamishra56
Oct 7, 2023

1aron
Oct 11, 2023
Maintainer Author