JavaScript: CSS

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

This generator is used with JavaScript. It renders to plain CSS and JavaScript files.
The JavaScript files contain functions that return the correct className depending on passed 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-javascript') 
 
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 JavaScript 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.
generateJSFileName	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.
generateCSSFileName	Function	module => module + ".elo"	A function that represents the CSS filename convention. It takes the style and module name. The `.css` 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-css') 
 
module.exports = { 
  generator: createGenerator({ 
    devMode: true, 
    dynamicImport: false, 
    // makes all style functions being rendered with a Style postfix e.g. ButtonStyle 
    generateStyleName: name => name + 'Style', 
    // 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 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; 
}

React

Button.js

import React from 'react' 
 
import { Button as ButtonStyle } from './button.elo.js' 
 
function Button({ children, variant = 'primary' }) { 
  return <button className={ButtonStyle({ variant })}>{children}</button> 
}