callstack / callstack/linaria

Classname optimization: shorten CSS class names

Open
#218 4 comments 7 reactions 0 assignees View on GitHub
feature: approved ✅ priority: low 📉 status: up for grabs 🙏
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.