babel-plugin-object-styles-to-template

    0.2.2 • Public • Published

    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 }]
      ]
    }

    Install

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

    DownloadsWeekly Downloads

    15

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    149 kB

    Total Files

    20

    Last publish

    Collaborators

    • satya164