babel-plugin-transform-prejss

babel-plugin-transform-prejss

Babel plugin which turns PreJSS constructions into JSS objects.

Example

In

const button = ({selector}) => preJSS`
  button {
    color: ${props => props.disabled ? 'grey' : 'red'};
    width: 200px;
    height: 70px;
    &:hover {
      text-decoration: underline;
    }
  }
`

Out

var button = function button(_ref) {
  var selector = _ref.selector;
  return {
    'button': {
      'color': function color(props) {
        return props.disabled ? 'grey' : 'red';
      },
      'width': '200px',
      'height': '70px',
      '&:hover': {
        'textDecoration': 'underline'
      }
    }
  };
};

See more details here: https://github.com/axept/prejss

Installation

npm install babel-plugin-transform-prejss --save-dev

Usage

Options

• removeImport: <Boolean|String> - by default is prejss. You can configure it to false if you wouldn't like to remove imports for "prejss" automatically. But think twice! By disabling this option you may include server code and a lot of unnecessary dependencies into your bundle.

• silent: <Boolean> - by default is false. This option is configuring if the plugin should or not to log about each removed prejss import.

• namespace: <String> - by default is preJSS

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-prejss"]
}

Via CLI

babel --plugins transform-prejss script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-prejss"]
});