https://github.com/giuseppeg/babel-plugin-universal-css-prop

Converts the css prop to a function call inside of className
https://github.com/giuseppeg/babel-plugin-universal-css-prop

Last synced: 22 days ago
JSON representation

Converts the css prop to a function call inside of className

• Host: GitHub
• URL: https://github.com/giuseppeg/babel-plugin-universal-css-prop
• Owner: giuseppeg
• License: mit
• Created: 2018-09-25T19:54:03.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-25T19:54:18.000Z (about 6 years ago)
• Last Synced: 2024-04-15T00:17:13.329Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 24
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# babel-plugin-universal-css-prop

[![Build Status](https://travis-ci.org/giuseppeg/babel-plugin-universal-css-prop.svg?branch=master)](https://travis-ci.org/giuseppeg/babel-plugin-universal-css-prop)

Converts the `css` prop to a function call inside of `className`.

```js



```


💫

```js

import _cssProp from 'css-in-js-lib'



```


The `_cssProp` function must return a `string`.

## Installation

```

npm i --save-dev babel-plugin-universal-css-prop

```

Then add the plugin to your `.babelrc` file:

```JSON

{

  "plugins": [

    "@babel/plugin-syntax-jsx",

    ["babel-plugin-universal-css-prop", { "packageName": "css-in-js-lib" }]

  ]

}

```

You must define a mandatory `packageName` option that is the CSS in JS library that exposes the css function that is called with the `css` prop expression (content).

If the function you want to use is not the default package export you can use the `importName` option:

```JSON

{

  "plugins": [

    ["babel-plugin-universal-css-prop", {

      "packageName": "emotion",

      "importName": "css"

    }]

  ]

}

```