<commit_before># babel-plugin-emotion

> Babel plugin for the minification and optimization of emotion styles.

`babel-plugin-emotion` is highly recommended, but not required in version 8 and
above of `emotion`.

## Features

| Feature/Syntax                                                                                                                                             | Native | Babel Plugin Required | Notes                                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | :----: | :-------------------: | -------------------------------------------------------------------------------------------------------------------------------------------- |
| css`` | ✅                                                                                                                                                 |
| `css(...)`                                                                                                                                                 |   ✅   |                       | Generally used for object styles.                                                                                                            |
| styled('div')`` syntax | ✅ | | Both string and object styles work without this plugin.                                                                    |
| styled.div`` syntax | | ✅ | Supporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle. |
| components as selectors                                                                                                                                    |        |          ✅           | Allows an emotion component to be [used as a CSS selector](https://emotion.sh/docs/styled#targeting-another-emotion-component).              |
| Minification                                                                                                                                               |        |          ✅           | Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.   |
| Dead Code Elimination                                                                                                                                      |        |          ✅           | Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination. |
| Static Extraction                                                                                                                                          |        |          ✅           | Generated CSS that is eligible for extraction can be moved to an external css file.                                                          |
| Source Maps                                                                                                                                                |        |          ✅           | When enabled, navigate directly to the style declaration in your javascript file.                                                            |
| `css` as Prop                                                                                                                                              |        |          ✅           | Convenient helper for calling `css` and appending the generated className during compile time.                                               |
| Contextual Class Names                                                                                                                                     |        |          ✅           | Generated class names include the name of the variable or component they were defined in.                                                    |

## Example

**In**

```javascript
const myStyles = css`
  font-size: 20px;
  @media (min-width: 420px) {<commit_msg>Align table columns (#592)<commit_after># babel-plugin-emotion

> Babel plugin for the minification and optimization of emotion styles.

`babel-plugin-emotion` is highly recommended, but not required in version 8 and
above of `emotion`.

## Features

<table>
  <thead>
    <tr>
      <th>Feature/Syntax</th>
      <th>Native</th>
      <th>Babel Plugin Required</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>css``</code></td>
      <td align="center">✅</td>
      <td align="center"></td>
      <td></td>
    </tr>
    <tr>
      <td><code>css(...)</code></td>
      <td align="center">✅</td>
      <td align="center"></td>
      <td>Generally used for object styles.</td>
    </tr>
    <tr>
      <td><code>styled('div')``</code> syntax</td>
      <td align="center">✅</td>
      <td align="center"></td>
      <td>Both string and object styles work without this plugin.</td>
    </tr>
    <tr>
      <td><code>styled.div``</code> syntax</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Supporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle.</td>
    </tr>
    <tr>
      <td>components as selectors</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Allows an emotion component to be <a href="https://emotion.sh/docs/styled#targeting-another-emotion-component">used as a CSS selector</a>.</td>
    </tr>
    <tr>
      <td>Minification</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Any leading/trailing space between properties in your <code>css</code> and <code>styled</code> blocks is removed. This can reduce the size of your final bundle.</td>
    </tr>
    <tr>
      <td>Dead Code Elimination</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Uglifyjs will use the injected <code>/*#__PURE__*/</code> flag comments to mark your <code>css</code> and <code>styled</code> blocks as candidates for dead code elimination.</td>
    </tr>
    <tr>
      <td>Static Extraction</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Generated CSS that is eligible for extraction can be moved to an external css file.</td>
    </tr>
    <tr>
      <td>Source Maps</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>When enabled, navigate directly to the style declaration in your javascript file.</td>
    </tr>
    <tr>
      <td><code>css</code> as Prop</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Convenient helper for calling <code>css</code> and appending the generated className during compile time.</td>
    </tr>
    <tr>
      <td>Contextual Class Names</td>
      <td align="center"></td>
      <td align="center">✅</td>
      <td>Generated class names include the name of the variable or component they were defined in.</td>
    </tr>
  </tbody>
</table>

## Example

**In**

```javascript
const myStyles = css`
  font-size: 20px;
  @media (min-width: 420px) {
{'fraction_non_alphanumeric': 0.14360746371803731, 'fraction_numerical': 0.002073255010366275, 'mean_word_length': 1.0122358175750834, 'pattern_counts': {'":': 0, '<': 153, '<?xml version=': 0, '>': 155, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 96, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '961899', 'n_tokens_mistral': 1559, 'n_tokens_neox': 1546, 'n_words': 512}