I never said I would ship this css code to every page regardless and perhaps it is my bad for not mentioning.
This css would be included only if the component is included but only once and not be repeated within each occurance of the component. In case of one instance of the component I don't have any gains but in case the component gets included multiple times (for loop, a listing page) the gains could be substantial.
The unreleased Stylex library Facebook has developed referred to in the article above solves the Sublinear Scaling of CSS problem, without moving the problem to HTML like Tailwind appears to have done.
It identifies where the same styles sheet properties are reused across multiple components and generates the minimum number of classes nessesary.
This could probably be incorporated into the build process for tailwind.
< div className={stylex({
backgroundColor: 'blue',
color: 'black'
})} >
I never said I would ship this css code to every page regardless and perhaps it is my bad for not mentioning.
This css would be included only if the component is included but only once and not be repeated within each occurance of the component. In case of one instance of the component I don't have any gains but in case the component gets included multiple times (for loop, a listing page) the gains could be substantial.
The unreleased Stylex library Facebook has developed referred to in the article above solves the Sublinear Scaling of CSS problem, without moving the problem to HTML like Tailwind appears to have done.
It identifies where the same styles sheet properties are reused across multiple components and generates the minimum number of classes nessesary.
This could probably be incorporated into the build process for tailwind.
< div className={stylex({
backgroundColor: 'blue',
color: 'black'
})} >
< div className={stylex({
backgroundColor: 'blue',
color: 'black',
fontWeight: 'bold'
})} >
Effectively renders to something like
.a {
backgroundColor: 'blue',
color: 'black'
}
.b {
fontWeight: 'bold'
}
< div className="a" >
< div className="a b" >