<commit_before>import { Video } from './motivation.js'

## Motivation

**styled-components is the result of wondering how we could enhance CSS for styling React component systems.** By focussing on a single use case we managed to optimize the writing experience for developers as well as the output for end users.

Specifically, styled-components enables:

- **Automatic critical CSS**: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically.
- **No class name bugs**: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
- **Easier deletion of CSS**: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

This talk by <NAME> is a really thorough introduction to styled-components
and goes through what the motivations behind its creation were, along with some
other information to get started with.

<Video />
<commit_msg>Further WIP<commit_after>import { Video } from './motivation.js'

## Motivation

**styled-components is the result of wondering how we could enhance CSS for styling React component systems.** By focussing on a single use case we managed to optimize the experience for developers as well as the output for end users.

Apart from the improved authoring experience, styled-components enables:

- **Automatic critical CSS**: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically.
- **No class name bugs**: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
- **Easier deletion of CSS**: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

{'fraction_non_alphanumeric': 0.05272564789991063, 'fraction_numerical': 0.0, 'mean_word_length': 4.668354430379747, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4866352', 'n_tokens_mistral': 521, 'n_tokens_neox': 499, 'n_words': 330}