satya164 / babel-plugin-object-styles-to-template

Babel plugin to transpile object styles to template literal

babel-plugin-object-styles-to-template

Babel plugin to transpile object styles to template literal.

The plugin will convert styles written in object syntax to tagged template literal which libraries like linaria and styled-components can consume.

Usage

Install the plugin:

yarn add --dev babel-plugin-object-styles-to-template

Then include it in your .babelrc:

{
  "plugins": ["object-styles-to-template"]
}

Example

When you write the following:

const container = css({
  flex: 1,
  padding: 10,
  backgroundColor: 'orange',
  color: colors.white,

  '&:hover': {
    backgroundColor: 'tomato',
  },
});

It's transpiled to:

const container = css`
  flex: 1;
  padding: 10px;
  background-color: orange;
  color: ${colors.white};

  &:hover {
    background-color: tomato;
  }
`;

The styled components syntax is also supported. So when you write the following:

const FancyButton = styled(Button)({
  backgroundColor: 'papayawhip',
});

It's transpiled to:

const FancyButton = styled(Button)`
  background-color: papayawhip;
`;

Options

You can selectively enable/disable the tags transpiled by the plugin:

• css: boolean: Whether to transpile css tags. Default: true.
• styled: boolean: Whether to transpile styled components like styled tags. Default true.

To pass options to the plugin, you can use the following syntax:

{
  "plugins": [
    ["object-styles-to-template", { "css": true, "styled": false }]
  ]
}

babel-plugin-object-styles-to-template's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.