0.0.1 • Published 7 years ago

babel-plugin-styled-components-autoprefixer v0.0.1

Weekly downloads
27
License
MIT
Repository
-
Last release
7 years ago

babel-plugin-styled-components-autoprefixer

autoprefixer for 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

styled.h1`
  display: flex;
`;

Output

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

styled.h1`
  background: ${color};
  display: flex;
  border: 2px solid ${props => props.theme.main};
  padding: ${(props) => {
    props.theme.main
  }};
`;

Output

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;
});