Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Document the babel plugin meaninglessFileNames option #821

Merged
merged 1 commit into from Nov 29, 2021
Merged

Document the babel plugin meaninglessFileNames option #821

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 25 additions & 0 deletions sections/tooling/babel-plugin.md
View file
Open in desktop
Expand Up @@ -83,6 +83,31 @@ You can force the component `displayName` to be solely the component name by dis

One example you might want to do this, is testing components with enzyme. While you can always use `.find(ComponentName)` it's definitely possible to search component by its displayName with `.find("ComponentName")`. In the latter case you will need to disable the `fileName` option. If you do want this for testing only, make sure to add this only under your test environment.

#### Control which file names are meaningless

A common pattern is to put components in `Button/index.jsx` instead of `Button.jsx`. By default, if the `fileName` option is set to `true`, the plugin will generate the display name using the directory name (`<button class="Button-asdf123 asdf123" />`) instead of the file name (`<button class="index-asdf123 asdf123" />`), because the former provides more information.

The `meaninglessFileNames` option allows to customize the list of file names that are not relevant to the description of a styled component's functionality, and hence the directory name should be used instead:

```json
{
"plugins": [
[
"babel-plugin-styled-components",
{
"meaninglessFileNames": ["index", "styles"]
}
]
]
}
```

For example, adding `styles` to the list would enable you to store your styled components in a `Button/styles.js` file.

This option defaults to `["index"]`.

If either `fileName` or `displayName` are set to `false`, this option has no effect.

### Minification

Two types of minifications are performed by this plugin: one removes all whitespace & comments from your CSS and the other [transpiles tagged template literals](#template-string-transpilation), keeping valuable bytes out of your bundles.
Expand Down