website/pages/docs/targets/javascript/fela.mdx
import DocLayout from '../../../../components/DocLayout.js'
export default DocLayout
# JavaScript: Fela
```bash
yarn add --dev @elodin/generator-javascript-fela
```
This generator is used with JavaScript and [Fela](https://fela.js.org).<br />
It renders all styles to [Fela rules](http://fela.js.org/docs/basics/Rules.html) using the [fela-plugin-extend](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-extend) `extend` syntax to render variant conditionals.
## Usage
To use the Fela generator, simply add it to your Elodin configuration and you're ready to go.
```javascript name=elodin.config.js
var { createGenerator } = require('@elodin/generator-javascript-fela')
module.exports = {
generator: createGenerator(),
}
```
## Configuration
| Option | Type | Default | Description |
| -------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| generateStyleName | Function | _name => name_ | A function that returns name of the JavaScript function that returns the class name. It takes the style name and returns a string. |
| generateFileName | Function | _module => module + ".elo"_ | A function that represents the JavaScript filename convention. It takes the style and module name. The `.js` extension is applied automatically. |
| generateVariantName | Function | _name => uncapitalize(name)_ | A function that generates variant names in our JavaScript files. It represents the property key which we need to pass in order to apply variants. |
| generateVariantValue | Function | _value => uncapitalize(value)_ | A function that generates variant values in our JavaScript files. It represents the variant value which we need to pass in order to apply variants. |
### Example
```javascript name=elodin.config.js
var { createGenerator } = require('@elodin/generator-javascript-fela')
module.exports = {
generator: createGenerator({
// makes variant values uppercase e.g. variant: "PRIMARY"
generateVariantValue: value => value.toUpperCase(),
}),
}
```
## Feature Coverage
- Styles
- Primitives
- Variables
- Functions
- Variants
- Conditionals
- Variants
- Environment
- Pseudo Classes
- Media Queries
---
## Usage Example
```elo name=button.elo
variant Variant {
Primary
Secondary
}
style Button {
paddingLeft: 10
paddingRight: 10
minWidth: $minWidth
[Variant=Primary] {
backgroundColor: blue
}
[Variant=Secondary] {
backgroundColor: red
}
}
```
```javascript name=Button.js
import { createRenderer } from 'fela'
import { Button } from './button.elo.js'
// make sure to include the fela-plugin-extend
// it is included in the fela-preset-web
const renderer = createRenderer()
const className = renderer.renderRule(Button, {
variant: 'primary',
minWidth: 120,
})
// do something with it
document.getElementById('button').className = className
```