☂️ Css Optimizer

[c0ncentus]

Hi,

Because of HTML parser, formatting support and #984 (CSS parser, formatting).

Extremely Short

1. many properties in one class => One property <-> one class
2. All used and unesd css loaded => use all the times css used for webpage.

In my opinion is the best of best of css optimisation

What purpose ?

1. Avoid Css deadly collision on production.
2. Less line css you have, more speed is client navigator.
3. Manage many thousands and more css lines !

if you have 100 lines of css maybe nobody cares. But maybe if you want website cool as ever, you do cares .
https://codepen.io/c0ncentus/details/JjbwxdV you can't just let it go with css collision. Even more if you make "js" on "css" with "input:focus" or "input:checked" .

Long Story

I managed a lot of web components into one library with react (full TSX ).

I'am not aware if it is like jsDom or wich level is reach for but imagine if you have 80 000 line of css (like me xD) :

.EnumCountBox_Cpnt {
	text-align: center;
	font-family: 'Passion One', cursive;
	width: content-max;
	max-width: 120px;
	border-radius: 5px;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 25px;
	position: relative;
}

.EnumCountBox_Cpnt h3, .EnumCountBox_Cpnt p {
	font-family: 'Neucha', cursive;
	padding: 10px;
	border-radius: 5px 0 0 5px;
	font-size: 18px;
	color: #333;
}

.EnumCountBox_Cpnt p {
	color: #666;
	font-size: 16px;
}

.EnumCountBox_Cpnt .number-wrap {
	height: 50px;
	font-size: 48px;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	padding: 10px 0;
	background: #eaeaea;
}

.EnumCountBox_Cpnt .digit {
	width: 100%;
	position: absolute;
	left: 0;
	top: 10px;
	transition: all 0.2s ease;
}

.EnumCountBox_Cpnt .digit span {
	display: block;
}

.EnumCountBox_Cpnt .button {
	display: inline-block;
	padding: 5px;
	background: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 26px;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0, .99, .44, 1.4);
	user-select: none;
}

.EnumCountBox_Cpnt .plus {
	right: -20px;
	color: #538ae4;
}

.EnumCountBox_Cpnt .minus {
	left: -20px;
	color: #e4535a;
}

.EnumCountBox_Cpnt .disabled {
	color: #ccc;
}

.EnumCountBox_Cpnt .button:hover {
	transform: scale(1.2);
}

.EnumCountBox_Cpnt.button:active {
	transform: scale(1);
}

I have always ".xyz_Cpnt" for binding with children for being sure to isolate rules.
Maybe for me is good on "devlopment mode" to have style for each component I use.

But in production what i need is the css used :
Npm in the case have for me the best solution

One classname = one property.

if I look deeply in my code with my 80 000 lines of code and my conviction is maybe 40 000 lines are totally useless because is the same property over and over [some of 20 000 is for lack of optimization] ! 80 000 - 60 000(40K+20K) = 20 000 and maybe ~10 % used on the webPage => ~2000 lines ... The result of my exceptation is 40 times less than my all css code for load css in browser page !

If you know all class on the page you know exacly what you load, that's amazing :) .

Question

Do you think it is possible ?
Do you think it is good issue and on Rome's goal want to achieve ?

[ematipico]

Just so I understood what you are proposing, I try to make a smaller example.

Given this CSS/HTML as source code

.lorem {
   width: 15px;
   height: 20px;
}

.ipsum {
  width: 15px;
  background-color: red; 
}

.unused {
  display: block;
}

<div class="lorem"></div>
<div class="ipsum"></div>

What you're saying is that width: 15px; could be extracted into a new CSS class and applied to all the elements that use that? So the potential result would be:

/* auto generated at build time */
.hdfoc {
   width: 15px;
}

.lorem {
   height: 20px;
}

.ipsum {
  background-color: red; 
}

<div class="hdfoc lorem"></div>
<div class="hdfoc ipsum"></div>

Is this what you're proposing?

[c0ncentus]

Exactly ! it would be better if classnames generated is human readable.

Maybe i get misunderstand in one point :

PageA

<div class="lorem"></div>
<div class="ipsum"></div>

you have to load "lorem" and "ipsum"

PageB

<div class="lorem"></div>
<div class="aLorem"></div>

you have to load lorem and "aLorem" no need of "ipsum".

But you always have "lorem", "aLorem", "ipsum" rules generated because it would be use at least on one page*

i want somehow manage loading css rules what you need on the page * !

[ematipico]

I believe this is doable, although it requires the implementation of the bundler under the hoods. This is because we need to know the chunks the application and we need to play also with possible dynamic imports (import('./that/module.js')).

It's an advanced feature and I don't really know if it's really important at the beginning of a bundler with CSS.

[c0ncentus]

I strongly agree with you.

I try to search on what Webpack suggest on it . I found nothing.

But on stack overflow i found this https://stackoverflow.com/questions/25472908/is-the-webpack-style-loader-meant-to-load-all-css-or-just-application-specific .
For argu : https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

I cannot know if is the correct way : / but seems add <style></style> at the top at the page on each html file and no import is another good way for the same result. It's a different approach and no "dynamic import" there .