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: about 2 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 (about 2 years ago)
• Last Synced: 2024-07-05T08:32:55.775Z (3 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.