Intro

What & Why

Setup

Installation

Getting Started

Language

Targets

JavaScript

Reason

Plugins

Advanced

API Reference

Extra

JavaScript: Fela

yarn add --dev @elodin/generator-javascript-fela

This generator is used with JavaScript and Fela.
It renders all styles to Fela rules using the 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.

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

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

button.elo

variant Variant {
  Primary
  Secondary
}
 
style Button {
  paddingLeft: 10
  paddingRight: 10
  minWidth: $minWidth
  [Variant=Primary] {
    backgroundColor: blue
  }
  [Variant=Secondary] {
    backgroundColor: red
  }
}

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