Classname optimization: shorten CSS class names
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 413
- PR merge metrics
- No merged PRs in 30d
Description
### Introduction
Due to its powerful compile-time CSS and JS preprocessors, and, more importantly, read-write access to both, Linaria has a great potential for further CSS optimizations.
One of the best size reduction optimization is shortening of class names. That is, in production Linaria could rename the default `.classname_ab0c0da8ra` into shorter, simple, potentially sequential, unique identifiers, like `.a_a` or `.z_1` (for example via [incstr](https://github.com/grabantot/incstr))
This optimization is especially important for style-heavy projects, with external CSS, and CSS frameworks.
It reduces size of not only CSS, but also of rendered HTML, by reducing bytesize of class names in tags and in inlined syles.
### State of the art:
[This article](https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b) describes significant CSS size reduction from classname optimization.
The coolest kid in this area is probably LinkedIn's [CSSBlocks](https://css-blocks.com) (see 3-step code optimization teaser). Similarly to Linaria, they parse both, JSX and CSS. However, CSSBlocks is very opinionated: they force a specific CSS flavour in specifically named files. Also they don't support Webpack 4 yet.
There are also standalone Webpack CSS classname optimizers, for example: [optimize-css-classnames-plugin](https://github.com/vreshch/optimize-css-classnames-plugin). But this one only works with HTML extraction, so no SSR.
### Design decisions
- a flag could be added that turns on and off the classname optimization
- classname optimization may be enabled by default in production mode
- ultimately, class naming decision may be deferred to user by exposing a callback interface (potentially stateful)
- it is important that this feature will take into account both, Linaria's CSS-in-JS snippets, as well as external CSS, because large projects that need this feature tend to have both
#### Related
#208
---
Do you think it is something that Linaria can implement?
Contributor guide
Assessment
This issue has not been assessed yet.