https://github.com/hiroppy/babel-plugin-styled-components-autoprefixer
autoprefixer for styled-components
https://github.com/hiroppy/babel-plugin-styled-components-autoprefixer
Last synced: 2 months ago
JSON representation
autoprefixer for styled-components
- Host: GitHub
- URL: https://github.com/hiroppy/babel-plugin-styled-components-autoprefixer
- Owner: hiroppy
- License: mit
- Created: 2016-11-23T13:45:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-17T02:51:07.000Z (almost 6 years ago)
- Last Synced: 2025-03-21T01:28:36.571Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-styled-components-autoprefixer
autoprefixer for [styled-components](https://github.com/styled-components/styled-components).
I want to exclude autoprefixer from styled-componets.
I think autoprefixer should be executed at bundle.
However styled-componets has autoprefixer in a production codes....
### Input
```javascript
styled.h1`
display: flex;
`;
```
### Output
```javascript
var _templateObject = _taggedTemplateLiteral(['\n display: -webkit-box;\ndisplay: -ms-flexbox;\ndisplay: flex;\n'], ['\n display: -webkit-box;\ndisplay: -ms-flexbox;\ndisplay: flex;\n']);
_styledComponents2.default.h1(_templateObject);
-------------------------
// As you can see:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
```
### Input
```javascript
styled.h1`
background: ${color};
display: flex;
border: 2px solid ${props => props.theme.main};
padding: ${(props) => {
props.theme.main
}};
`;
```
### Output
```javascript
var _templateObject = _taggedTemplateLiteral(['\n background: ', ';\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border: 2px solid ', ';\n padding: ', ';\n'], ['\n background: ', ';\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border: 2px solid ', ';\n padding: ', ';\n']);
_styledComponents2.default.h1(_templateObject, color, function (props) {
return props.theme.main;
}, function (props) {
props.theme.main;
});
```