Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/styled-components/babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
https://github.com/styled-components/babel-plugin-styled-components

babel babel-plugin minification ssr styled-components

Last synced: 9 days ago
JSON representation

Improve the debugging experience and add server-side rendering support to styled-components

Host: GitHub
URL: https://github.com/styled-components/babel-plugin-styled-components
Owner: styled-components
License: mit
Created: 2016-10-24T20:26:47.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2024-04-06T02:41:20.000Z (3 months ago)
Last Synced: 2024-06-13T04:04:46.608Z (15 days ago)
Topics: babel, babel-plugin, minification, ssr, styled-components
Language: JavaScript
Homepage:
Size: 2.41 MB
Stars: 1,066
Watchers: 31
Forks: 140
Open Issues: 84
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Lists

awesome-github-star - babel-plugin-styled-components - side rendering support to styled-components | styled-components | 1049 | (JavaScript)

README

# `babel-plugin-styled-components`

This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:

- consistently hashed component classNames between environments (a must for server-side rendering)
- better debugging through automatic annotation of your styled components based on their context in the file system, etc.
- various types of minification for styles and the tagged template literals styled-components uses

## Quick start

Install the plugin first:

```
npm install --save-dev babel-plugin-styled-components
```

Then add it to your babel configuration:

```JSON
{
"plugins": ["babel-plugin-styled-components"]
}
```

## Changelog

See [Github Releases](https://github.com/styled-components/babel-plugin-styled-components/releases)

## Documentation

**The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**

- [Usage](https://www.styled-components.com/docs/tooling#usage)
- [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
- [Minification](https://www.styled-components.com/docs/tooling#minification)

## License

See [LICENSE.md](./LICENSE.md) for more information.