https://github.com/dab0mb/babel-plugin-scoped-styled-components
https://github.com/dab0mb/babel-plugin-scoped-styled-components
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dab0mb/babel-plugin-scoped-styled-components
- Owner: DAB0mB
- License: mit
- Created: 2019-02-09T21:13:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-09T22:22:08.000Z (over 7 years ago)
- Last Synced: 2025-04-09T08:23:28.289Z (over 1 year ago)
- Language: JavaScript
- Size: 91.8 KB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/DAB0mB/babel-plugin-scoped-styled-components/tree/master)
# babel-plugin-scoped-styled-components
Removes the necessity for a dedicated styled component for every React element; instead, we can just use the `className` prop. See [example](#example) below.
### Example
#### old
```jsx
const Button = styled.button `
border-radius: 999px;
`
const RedButton = styled(Button) `
color: red;
`
const GreenButton = styled(Button) `
color: green;
`
const BlueButton = styled(Button) `
color: blue;
`
const Dashboard = (
)
```
#### new
```jsx
const DashboardStyle = styled.div `
._btn {
border-radius: 999px;
}
._red-btn {
color: red;
}
._green-btn {
color: green;
}
._blue-btn {
color: blue;
}
`
const Dashboard = (
)
```
#### out
```jsx
const DashboardStyle = styled.div `
.${props => props.__scopename}-btn {
border-radius: 999px;
}
.${props => props.__scopename}-red-btn {
color: red;
}
.${props => props.__scopename}-green-btn {
color: green;
}
.${props => props.__scopename}-blue-btn {
color: blue;
}
`
const Dashboard = (
)
```
### Usage
- ALWAYS use the `styled` identifier to declare styled components.
- ALWAYS use the `Style` postfix for components that you would like to scope.
- Use the `_` prefix for class names that you would like to encapsulate.
### Installation
`babel-plugin-scoped-styled-components` is installable via NPM (or Yarn):
$ npm install babel-plugin-scoped-styled-components
Add the plug-in to your `.babelrc`:
```json
{
"plugins": ["babel-plugin-scoped-styled-components"]
}
```
### License
MIT