Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/withspectrum/react-app-rewire-styled-components
Add the styled-components Babel plugin to your create-react-app app via react-app-rewired
https://github.com/withspectrum/react-app-rewire-styled-components
create-react-app create-react-app-styled-components react-app-rewire styled-components
Last synced: 3 months ago
JSON representation
Add the styled-components Babel plugin to your create-react-app app via react-app-rewired
- Host: GitHub
- URL: https://github.com/withspectrum/react-app-rewire-styled-components
- Owner: withspectrum
- License: mit
- Archived: true
- Created: 2017-06-17T10:45:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-08-29T05:21:09.000Z (over 2 years ago)
- Last Synced: 2024-10-04T01:34:55.901Z (4 months ago)
- Topics: create-react-app, create-react-app-styled-components, react-app-rewire, styled-components
- Language: JavaScript
- Size: 70.3 KB
- Stars: 170
- Watchers: 5
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `react-app-rewire-styled-components`
Add the [`babel-plugin-styled-components`](https://github.com/styled-components/babel-plugin-styled-components) to your `create-react-app` app via [`react-app-rewired`](https://github.com/timarney/react-app-rewired).
This gives you nicer generated class names that include the components' name, minification of styles and many more goodies đĒ
## Installation
```sh
npm install --save react-app-rewire-styled-components
# alternatively if you have yarn installed
yarn add react-app-rewire-styled-components
```## Usage
In the `config-overrides.js` you created for `react-app-rewired` add this code:
```JS
const rewireStyledComponents = require('react-app-rewire-styled-components');/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireStyledComponents(config, env);
return config;
}
```That's it, you're now using the `styled-components` Babel plugin!
To pass options to the Babel plugin use the third argument, it passes straight through to the plugin:
```JS
config = rewireStyledComponents(config, env, {
ssr: true,
})
```See [the available options](https://www.styled-components.com/docs/tooling#babel-plugin) in the `styled-components` documentation.
## License
Licensed under the MIT License, Copyright Šī¸ 2017 Maximilian Stoiber. See [LICENSE.md](LICENSE.md) for more information.