Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axept/babel-plugin-transform-prejss
Transform PreJSS constructions to plain JSS objects
https://github.com/axept/babel-plugin-transform-prejss
babel babel-plugin css css-in-js jss prejss
Last synced: about 1 month ago
JSON representation
Transform PreJSS constructions to plain JSS objects
- Host: GitHub
- URL: https://github.com/axept/babel-plugin-transform-prejss
- Owner: axept
- License: mit
- Created: 2017-02-28T10:16:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-27T05:37:40.000Z (almost 8 years ago)
- Last Synced: 2024-12-05T19:08:19.025Z (about 2 months ago)
- Topics: babel, babel-plugin, css, css-in-js, jss, prejss
- Language: JavaScript
- Homepage: https://github.com/axept/prejss
- Size: 202 KB
- Stars: 0
- Watchers: 9
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-prejss
[](https://travis-ci.org/axept/babel-plugin-transform-prejss)
[](https://www.npmjs.com/package/babel-plugin-transform-prejss)
[](https://www.npmjs.com/package/babel-plugin-transform-prejss)
[](https://www.npmjs.com/package/babel-plugin-transform-prejss)
[Babel](https://github.com/babel/babel) plugin which turns PreJSS constructions into JSS objects.
## Example
**In**
```js
const button = ({selector}) => preJSS`
button {
color: ${props => props.disabled ? 'grey' : 'red'};
width: 200px;
height: 70px;
&:hover {
text-decoration: underline;
}
}
`
```
**Out**
```js
var button = function button(_ref) {
var selector = _ref.selector;
return {
'button': {
'color': function color(props) {
return props.disabled ? 'grey' : 'red';
},
'width': '200px',
'height': '70px',
'&:hover': {
'textDecoration': 'underline'
}
}
};
};
```
See more details here: https://github.com/axept/prejss
## Installation
```bash
npm install babel-plugin-transform-prejss --save-dev
```
## Usage
### Options
+ `removeImport: ` - by default is `prejss`. You can configure it to `false` if you wouldn't like to remove imports for "prejss" automatically. But think twice! By disabling this option you may include server code and a lot of unnecessary dependencies into your bundle.
+ `silent: ` - by default is `false`. This option is configuring if the plugin should or not to log about each removed prejss import.
+ `namespace: ` - by default is `preJSS`
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["transform-prejss"]
}
```
### Via CLI
```sh
babel --plugins transform-prejss script.js
```
### Via Node API
```javascript
require("babel-core").transform("code", {
plugins: ["transform-prejss"]
});
```