Intro

What & Why

Setup

Installation

Getting Started

Language

Targets

JavaScript

Reason

Plugins

Advanced

API Reference

Extra

Reason: CSS

yarn add --dev @elodin/generator-reason-css

This generator is used with ReasonML. It renders to plain CSS and Reason files.
The Reason files contain functions that return the correct className depending on passed variants.

It renders all variants to native Reason variants.

Usage

To use the Javascript generator, simply add it to your Elodin configuration and you're ready to go.

elodin.config.js

var { createGenerator } = require('@elodin/generator-reason-css') 
 
module.exports = { 
  generator: createGenerator(), 
}

Configuration

Option	Type	Default	Description
devMode	Boolean	false	In devMode, class names contain human-readable prefixes that help to indentify the referenced style.
dynamicImport	Boolean	false	By default, CSS files are required as soon as the corresponding Reason file is imported. With dynamic imports, it is only imported once the function is actually called.
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. The result will get uncapitalized by default due to the naming conventions in Reason.
generateReasonFileName	Function	module => capitalize(module) + "Style"	A function that represents the Reason filename convention. It takes the style and module name. The `.re` extension is applied automatically.
generateCSSFileName	Function	(module, name) => capitalize(module) + name + ".elo"	A function that represents the CSS filename convention. It takes the style and module name. The `.css` extension is applied automatically.

Example

elodin.config.js

var { createGenerator } = require('@elodin/generator-reason-css') 
 
module.exports = { 
  generator: createGenerator({ 
    // now our modules are prefixed with Elodin e.g. ElodinButton 
    generateReasonFileName: module => 'Elodin' + capitalize(module), 
    dynamicImport: false, 
    devMode: true, 
  }), 
}

Feature Coverage

Styles

Primitives

Variables

Functions

Variants

Conditionals
- Variants
- Environment
  - Pseudo Classes
  - Media Queries

Usage Examples

button.elo

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

root.css

:root { 
  --theme_widths_button: 120px; 
}

ReasonReact

Button.re

[@react.component] 
let make = (~name, ~children, ~variant=ButtonStyle.Primary) => 
  <button className=ButtonStyle.button(~variant, ())> 
    children
  </button>