bpo
babel-plugin-object-styles-to-template
npm i babel-plugin-object-styles-to-template
bpo

babel-plugin-object-styles-to-template

Babel plugin to transpile object styles to template literal

by Satyajit Sahoo

0.2.2 (see all)License:MITTypeScript:DefinitelyTyped
npm i babel-plugin-object-styles-to-template
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 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 }]
  ]
}

Downloads/wk

17

GitHub Stars

33

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
0.2.2
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial