https://github.com/satya164/babel-plugin-object-styles-to-template

Babel plugin to transpile object styles to template literal
https://github.com/satya164/babel-plugin-object-styles-to-template

babel babel-plugin linaria styled-components

Last synced: 9 days ago
JSON representation

Babel plugin to transpile object styles to template literal

• Host: GitHub
• URL: https://github.com/satya164/babel-plugin-object-styles-to-template
• Owner: satya164
• Created: 2017-11-27T20:01:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-11T12:45:31.000Z (about 6 years ago)
• Last Synced: 2024-10-12T17:42:24.911Z (24 days ago)
• Topics: babel, babel-plugin, linaria, styled-components
• Language: JavaScript
• Homepage:
• Size: 166 KB
• Stars: 35
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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`](https://github.com/callstack/linaria) and [`styled-components`](https://www.styled-components.com/) can consume.

## Usage

Install the plugin:

```sh

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

```

Then include it in your `.babelrc`:

```json

{

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

}

```

## Example

When you write the following:

```js

const container = css({

  flex: 1,

  padding: 10,

  backgroundColor: 'orange',

  color: colors.white,

  '&:hover': {

    backgroundColor: 'tomato',

  },

});

```

It's transpiled to:

```js

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:

```js

const FancyButton = styled(Button)({

  backgroundColor: 'papayawhip',

});

```

It's transpiled to:

```js

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:

```json

{

  "plugins": [

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

  ]

}

```